js学习笔记——事件
js实现交互主要通过事件模型实现,事件处理模型主要有三种:原始事件模型、标准事件模型和Internet Explorer事件模型。
原始事件模型——这是一种简单的事件处理模式,响应事件时调用事件句柄名,可移植性强,所有启动js的浏览器都支持;
标准事件模型——具有完整性,除IE以外的所有浏览器都支持;
Internet Explorer事件模型——IE浏览器专用。
一、原始事件模型:
1、常用的句柄属性:
onabort句柄——图像装载被中断——<img>标记支持;
onchange——选中<select>元素中的选项或其他表单元素失去了焦点,并且由于获得焦点而使值发生改变——<input>、<select>、<textarea>
onclick——点击事件
ondbclick——双击事件
onfocus——元素得到输入焦点——<button>、<input>、<lable>、<select>、<textarea>、<body>\
onkeykown——键盘键被按下,返回false取消默认动作——表单元素和<body>
onkeypress——键盘键被按下后释放,返回false取消默认动作——表单元素和<body>
onkeyup——键盘键被按下后释放——表单元素和<body>
onload——文档装载完毕——<body>、<frameset>、<img>
onmousemove
onmousedown
onmouseover
onmouseout
onreset——表单请求重置,返回false阻止重置——<form>
onresize——调整窗口大小——<body>、<frameset>
onselect——选中文本——<input>、<textarea>
onsubmit——请求提交表单,返回false阻止提交——<form>
onunload——卸载文档或帧集——<body>/<frameset>
2、在事件句柄中,关键字this引用发生事件的对象;
3、显示调用事件句柄:由于js事件句柄属性的值是函数,因此可以用js直接调用事件处理函数,如使用<form>的属性onsubmit定义一个表单验证函数,
并想在用户提交之前的某个时刻验证表单,那么可以使用Form对象的onsubmit属性来调用那个事件处理函数。
document.myform.onsubmit();
4、事件句柄返回值:如表单提交验证,用户没有填写时,阻止提交:
<form action="search.do" onsubmit="if(this.elements[0].value.length==0) return false;"> <input type="text"> </form>