js学习笔记——事件

最新推荐文章于 2024-10-07 21:15:54 发布

转载最新推荐文章于 2024-10-07 21:15:54 发布 · 84 阅读

CC 4.0 BY-SA版权

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>

转载于:https://www.cnblogs.com/zhangchunxi/archive/2013/03/30/2990997.html