js学习笔记——事件
2013-03-30 21:54
218 查看
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属性来调用那个事件处理函数。
4、事件句柄返回值:如表单提交验证,用户没有填写时,阻止提交:
原始事件模型——这是一种简单的事件处理模式,响应事件时调用事件句柄名,可移植性强,所有启动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>
相关文章推荐
- JS 事件 学习笔记(一)
- JS学习笔记-事件绑定
- 【JS学习笔记】06 JavaScript HTML DOM 事件
- 【js学习笔记-092】-----事件处理程序的调用
- js学习笔记之事件处理模型
- JS和JQuery中的事件托付 学习笔记
- JS学习笔记(一)DOM事件和监听
- js学习笔记(十四)事件处理模型
- 【js学习笔记-098】-------键盘事件
- 【js基础】js事件对象学习笔记
- JS学习笔记9之event事件及其他事件
- JS和JQuery中的事件委托 学习笔记
- 【js学习笔记-091】-----------注册事件处理程序
- Vue.js学习笔记:v-no绑定事件
- Node.js学习笔记之三:事件
- 【js学习笔记-102】------基于服务器端推送事件的Comet技术
- Node.js学习笔记【1】入门(服务器JS、函数式编程、阻塞与非阻塞、回调、事件、内部和外部模块)
- day03_js学习笔记_03_js的事件、js的BOM、js的DOM
- js学习笔记24----焦点事件
- 【js学习笔记-096】----拖放事件