JS事件流与事件处理程序实例分析
本文实例讲述了JS事件流与事件处理程序。分享给大家供大家参考，具体如下：
1.事件流：从页面中接收事件的顺序
1.1 IE ：事件冒泡流
1.2 Netscape ：事件捕获
1.3 DOM事件流 ：事件捕获阶段——事件目标阶段——事件冒泡阶段
DOM2级事件规定 ：捕获阶段不会涉及目标事件。
2.事件处理程序
事件 ：用户或者浏览器自身执行的 某种动作
事件处理程序 ：响应某个事件的 函数 。
2.1 HTML事件处理程序
用一个与该事件处理程序同名的HTML特性来指定。
2.1.1包含要执行的具体动作
<input type="button" value="Click me" onclick="alert('Clicked')"/>
2.1.2 调用其他地方定义的脚本
<input type="button" value="Click me" onclick="showMessage()"/>
2.1.3 缺点
- 1.时差问题：使用try-catch块捕捉错误。
onclick="try { showMessage() ;} catch(ex) {} "
- 2.程序的作用域链在不同浏览器中会导致不同结果
- 3.HTML和JS代码耦合紧密
2.2 DOM0级事件处理程序
将一个函数赋值给一个事件处理程序属性，例如：onclick。
为事件处理程序赋值。
btn.onclick = function() {
alert( this.id );
};
事件处理程序在元素的作用域中运行，this指向当前元素。
删除事件处理程序：
btn.onclick = null;
2.3 DOM2级事件处理程序
addEventListener(处理的事件名，事件处理程序函数，布尔值)；
removeEventListener(处理的事件名，事件处理程序函数，布尔值)；
布尔值：捕获阶段调用事件处理程序：true。冒泡阶段调用：false。大多数情况下用false。
btn.addEventListener("click" , function() {
alert(this.id);
}, false);
好处：可以添加多个事件处理程序。事件按照添加先后顺序执行。
问题：匿名函数无法移除。
最好写成
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);
2.4 IE事件处理程序
attachEvent(事件处理程序名称，事件处理程序函数)；
detachEvent(事件处理程序名称，事件处理程序函数)；
通过该方法添加的事件处理程序，都会被添加到冒泡阶段。
btn.attachEvent("onclick",function(){
alert("clicked");
});
注意：使用DOM级方法时，事件会在所属元素的作用域内运行；使用attachEvent()方法，事件处理程序会在全局作用域运行，this==window。
好处：可以添加多个事件处理程序。后添加先执行。
问题：匿名函数无法移除。
var handler = function(){
alert(this.id);
};
btn.attachEvent ("onclick", handler);
btn.detachEvent ("onclick", handler);
2.5跨浏览器事件处理程序
- 1.创建一个方法addHandler():区分使用哪种方法来添加事件；
- 2.创建一个对象EventUtil。拥有两个方法。
- 3.addHandler(要操作的元素，事件名称，事件处理函数)。
- 4.removeHandler(要操作的元素，事件名称，事件处理函数)。
var EventUtil = {
addHandler: function(element,type,handler){
if(element.addEventLister) {
element.addEventListener(type,handler,false);
} else if(element.attachEvent) {
element.attachEvent("on"+type, handler);
}else {
element.["on"+type] =handler;
}
},
removeHandler: function(element,type,handler){
if(element.addEventLister) {
element.removeEventListener(type,handler,false);
} else if(element.attachEvent) {
element.detachEvent("on"+type, handler);
}else {
element.["on"+type] = null;
}
}
};
使用：
EventUtil.addHandler(btn ,"click",handler); EventUtil.removeHandler(btn ,"click",handler);
PS：这里再为大家附上javascript系统自带事件参考表供大家参考查询：
javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event
更多关于JavaScript相关内容可查看本站专题：《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
本工具所有的功能实现都是由 ttp://jscompress.sinaapp.com/api 处理.（包括现在可以使用的这个在线压缩）2010-12-12
这篇文章主要为大家详细介绍了js html实现计算器功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要为大家详细介绍了 Bootstrap 3 浏览器兼容性问题及其对应的解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
在JavaScript中，一切都是对像，函数是第一型2010-10-10
今天看视频学习时学习了一种新技术，即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面,在网上搜了一下，关于这个技术处理有多种方法,有兴趣的朋友可以参考下2013-01-01
今天小编就为大家分享一篇layui弹出框Tab选项卡的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
本文通过实例代码给大家介绍了js中实现复选框全选功能，代码简单易懂，非常不错，需要的朋友参考下2016-12-12
有关this想必大家早有所耳闻，只不过在使用中不是那么在意而已，接下来为大家介绍下this做事件参数问题，感兴趣的你可不要错过了哈2013-03-03
写在前面:这是一个关于Ext, Prototype, JavaScript方面的问题,其实下面遇到的问题本不是问题,都是因为错误的理解造成的,本文的宗旨是希望读者朋友避免我犯的同类错误,遇事三思而后行,同时也体会下发现问题,解决问题,反思问题这种精神活动所带来的快乐!2009-01-01
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
这篇文章主要介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能【二】的相关资料，非常具有参考价值，感兴趣的朋友一起学习吧2016-05-05
最新评论