DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式
来源:互联网 发布:怎么让胃变小 知乎 编辑:程序博客网 时间:2024/05/17 03:50
1.传统的方式是将一个函数赋值给一个事件处理程序属性。看看DOM0级方式例如:
var btn = document.getElementById("myBtn");btn.onclick = function() { alert(this.id); //"myBtn"}
使用DOM0级方法指定的事件处理程序被认为是元素的方法,因此程序中的this引用的是当前的元素btn,可以通过this访问元素的任何属性和方法。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
也可以删除事件处理程序:btn.onclick = null; //删除事件处理程序
。
2.在DOM2级事件中定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们接受3个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值为true时表明在捕获阶段调用事件处理程序,为false时表明在冒泡阶段调用事件处理程序。与DOM0级一样,this引用的也是当前的元素。
主要好处是:可以添加多个事件处理程序,例如:
var btn = document.getElementById("myBtn");btn.addEventListener("click", function() { alert(this.id);}, false);btn.addEventListener("click", function() { alert("me");}, false);
会按添加的顺序触发,先显示ID,再显示me
通过addEventListener()添加的事件处理程序只能通过removeEventListener()来移除,并且移除时传入的参数要和添加处理程序的参数一样。这意味着通过addEventListener()添加的匿名函数将无法移除,如下面的例子:
var btn = document.getElementById("myBtn");btn.addEventListener("click", function() { alert(this.id);}, false);btn.removeEventListener("click", function() { alert(this.id);}, false); //没有用,因为这个匿名函数和上面的匿名函数不是用一个函数。
要想删除匿名函数可以把事件处理程序放到变量中例如:
var btn = document.getElementById("myBtn");var handler = function() { alert(this.id);};btn.addEventListener("click", handler, false);btn.removeEventListener("click", handler, false); //有效
大多数情况下,为了最大限度的兼容各种浏览器,都是将事件处理程序添加到事件流的冒泡阶段,当特别需要在捕获阶段截获的时候才将事件处理程序添加到捕获阶段,如果不是特别需要,不建议在捕获阶段添加事件处理程序。
3.IE事件处理程序也有两个自己的方法:attachEvent()和detachEvent()。接受两个参数:事件名和事件处理程序函数。都是添加到冒泡阶段。
与DOM0级不同的是事件处理程序是在全局作用域中运行的,this等于window。例子:
var btn = document.getElementById("myBtn");btn.attachEvent("onclick", function() { alert(this === window); //true}); //第一个参数的事件名是"onclick"不是click
与addEventListener类似,也可以添加多个事件:
var btn = document.getElementById("myBtn");btn.attachEvent("onclick", function() { alert(this.id) });btn.addEventListener("click", function() { alert("me");});
要删除事件处理程序,也是和addEventListener()一样:
var btn = document.getElementById("myBtn");var handler = function() { alert("Clicked");};btn.attachEvent("onclick", handler);btn.detachEvent("onclick", handler); //有效
4.跨浏览器的事件处理程序
创建一个方法addHandler(),它的职责是综合考虑到DOM0级方法、DOM2级方法和IE方法添加事件,removeHandler()同理,addHandler接受3个参数:要操作的元素、事件名称和事件处理程序函数。封装到EventUtility对象里:
var EventUtil = { addHandler: function(element, type, handler) { //判断是否存在DOM2级方法 if(element.addEventListener) { element.addEventListener(type, handler, false); } //判断是否是IE版本 else if(element.attachEvent) { element.attachEvent("on" + type, handler); } //判断是否存在DOM0级方法 else { element["on" + type] = handler } }, removeHandler: function(element, type, handler) { if(element.removeEventListener) { element.removeEventListener(type, handler, false); } else if(element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }};//可以这样使用var btn = document.getElementById("myBtn");var handler = function() { alert("Clicked");}EventUtil.addHandler(btn, "click", handler);EventUtil.removeHandler(btn, "click", handler);
- DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式
- 事件处理程序的几种方式总结
- DOM事件处理方式
- ugui 添加事件的几种方式
- Swing中添加事件响应的三种处理方式
- HTML DOM - 事件处理方式
- 为一个DOM元素添加事件有几种方式,分别是什么?
- Android为Button按钮添加监听事件的几种方式
- UGUI点击事件的几种代码添加方式
- a标签添加onclick事件的几种方式
- 跨浏览器添加事件处理程序
- 为input标签绑定事件的几种方式
- JS事件处理程序的3中方式
- Android之Button点击事件处理的几种方式
- Js事件详解(1)事件类型及几种添加事件处理程序的方法
- 多种DOM事件处理程序分析及跨浏览器的事件解决方案
- 为按钮添加点击事件的三种方式
- JavaScript 事件处理程序的指派方式
- android WebView登录状态session id 和cookie同步
- 【前端福利】用grunt搭建自动化的web前端开发环境-完整教程
- 如何下载之前版本的xcode
- Linux C利用Socket套接字进行服务器与多个客户端进行通讯
- Android Studio git环境配置
- DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式
- HDOJ 2159 FATE
- android send key event
- Read the Last line in a file
- html form
- 国内Android应用分析报告,看看大家都在用什么开发
- CentOS安装JDK1.7
- Linux下获取软件源码的几种方法
- Python数字