事件处理程序的几种方式总结
2017-08-20 14:28
567 查看
本文主要总结一下关于事件处理的几种方式。
点击该按钮就会弹出相应的对话框。
这种方式是将onclick作为元素属性,将执行的代码作为属性值来表达。但是这样的写法需要注意,为了避免解析不正确,需要使用经过转义的HTML语法字符。
当然也可以这样写:
这种事件处理程序的方式,所有浏览器都支持,兼容性很好。但是它也存在很多缺点。
这样会使HTML与JavaScript代码紧密耦合。若要改动代码,则要改动两个地方,非常麻烦,容易出错。
若上面的例子中script代码放在input的后面,可能会出现script还未解析完毕,但是点击了按钮的事情,这样容易出错。
这种方式很简单。这种方式的处理程序会在事件流的冒泡阶段被处理。
删除该事件也很简单:
举例如下:
如上面的代码,使用DOM2级方法可以添加多个事件处理程序,并且添加的程序依次被触发。
移除事件时也很简单。
此处要注意的一点:没办法对添加的匿名函数进行移除。因而若想移除绑定的事件函数,必须给它一个名字,如上面的两个handle。
IE事件处理程序也实现了两个方法:attachEvent()和detachEvent()。都接受两个参数:事件处理程序的名称和事件处理程序函数。需要注意的是:IE8及更早版本只支持事件冒泡,所以添加的事件处理程序都被添加到冒泡阶段。
举例如下:
注意此处的区别:
它的参数是“onclick”而不是“click”。
attach添加多个事件处理程序时,不是按添加顺序执行而是按相反的顺序被触发。
删除事件的方式与DOM2级基本相同。
其中HTML事件处理程序、DOM0级及DOM2级事件处理程序中this值表示事件的目标元素。而IE事件处理程序会在全局作用域中运行,因此它的this等于window。
HTML事件处理程序
这种方式即写在HTML代码中的,如<input type="button" value="click" onclick="alert('Clicked')">
点击该按钮就会弹出相应的对话框。
这种方式是将onclick作为元素属性,将执行的代码作为属性值来表达。但是这样的写法需要注意,为了避免解析不正确,需要使用经过转义的HTML语法字符。
当然也可以这样写:
<script> function showMessage(){ alert("CLicked"); } </script> <input type="button" value="click" onclick="showMessage()" />
这种事件处理程序的方式,所有浏览器都支持,兼容性很好。但是它也存在很多缺点。
这样会使HTML与JavaScript代码紧密耦合。若要改动代码,则要改动两个地方,非常麻烦,容易出错。
若上面的例子中script代码放在input的后面,可能会出现script还未解析完毕,但是点击了按钮的事情,这样容易出错。
DOM0级事件处理程序
这种方法的实现方式就是将一个事件处理函数赋值给一个事件处理程序的属性。如下所示:var btn = document.getElementById("myBtn"); btn.onclick = function(){ alert("clicked"); }
这种方式很简单。这种方式的处理程序会在事件流的冒泡阶段被处理。
删除该事件也很简单:
btn.onclick = null;
DOM2级事件处理程序
这种方式有两个专门定义的方法来添加和删除事件,addEventListener()和removeEventListener()。都接受三个参数:处理的事件名称、处理事件的函数和一个布尔值(false表示在冒泡阶段调用处理函数,true表示在捕获阶段调用处理函数)。举例如下:
var btn = document.getElementById("myBtn"); var handle1 = function(){ alert("我是添加的第一个处理程序"); } var handle2 = function(){ alert("我是添加的第二个处理程序"); } btn.addEventListener("click",handle1,false); btn.addEventListener("click",handle2,false);
如上面的代码,使用DOM2级方法可以添加多个事件处理程序,并且添加的程序依次被触发。
移除事件时也很简单。
btn.removeEventListener("click",handle1,false);
此处要注意的一点:没办法对添加的匿名函数进行移除。因而若想移除绑定的事件函数,必须给它一个名字,如上面的两个handle。
IE事件处理程序
若要兼容IE8及更早的版本,我们需要用到这种方法。IE事件处理程序也实现了两个方法:attachEvent()和detachEvent()。都接受两个参数:事件处理程序的名称和事件处理程序函数。需要注意的是:IE8及更早版本只支持事件冒泡,所以添加的事件处理程序都被添加到冒泡阶段。
举例如下:
var btn = document.getElementById("myBtn"); var handle1 = function(){ alert("我是添加的第一个处理程序"); } var handle2 = function(){ alert("我是添加的第二个处理程序"); } btn.attachEvent("onclick",handle1); btn.attachEvent("onclick",handle2);
注意此处的区别:
它的参数是“onclick”而不是“click”。
attach添加多个事件处理程序时,不是按添加顺序执行而是按相反的顺序被触发。
删除事件的方式与DOM2级基本相同。
btn.detachEvent("onclick",handle1);
事件处理程序作用域
事件处理程序的方式主要就是以上几种。它们还有一个很重要的知识点,就是关于函数执行的作用域问题。其中HTML事件处理程序、DOM0级及DOM2级事件处理程序中this值表示事件的目标元素。而IE事件处理程序会在全局作用域中运行,因此它的this等于window。
兼容的事件处理程序
使用能力检测方法,可以写出能保证在大多数浏览器下一致运行的处理事件代码。如下:var EventUtil = { addHandler: function (element, type, handler){ if(element.addEventListener){ element.addEventListener(type,handle,false); }else if(element.attachEvent){ element.attachEvent("on"+type, handle); }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; } } };
相关文章推荐
- 浅谈Javascript事件处理程序的几种方式
- 浅谈Javascript事件处理程序的几种方式
- 浅谈Javascript事件处理程序的几种方式
- 对象事件与处理程序代码进行关联的几种方式
- 浅谈 Javascript 事件处理程序的几种方式
- DOM中为事件添加事件处理程序的几种方式以及跨浏览器方式
- 数组的几种常见排序方式总结(Java程序)
- 基于MVC4+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式
- JS事件处理程序的几种方法
- 探究JavaScript中的五种事件处理程序方式
- 用js给div绑定事件,实现点击切换效果的几种方式总结
- JavaScript 事件流、事件处理程序及事件对象总结
- JavaScript中为事件指定处理程序的五种方式分析
- Js事件详解(1)事件类型及几种添加事件处理程序的方法
- JavaScript 事件流、事件处理程序及事件对象总结
- 基于MVC+EasyUI的Web开发框架经验总结(12)--利用Jquery处理数据交互的几种方式
- JavaScript 事件流、事件对象总结和事件处理程序
- JS事件处理程序的3中方式
- javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
- Android之Button点击事件处理的几种方式