(1)html事件处理程序,使用一个与相应事件处理程序同名的HTML特性来指定,可以定义事件处理程序是可以包含要执行的具体动作,也可以调用页面其他地方定义的脚本函数,但这种方法就是把javascript与html混写,一般开发,不建议使用,比如:
<input type=”button” value=”提交” onsumit=”alert(提交了?)“>
(2)javascript指定事件处理程序
这种方法,必须先取得一个操作对象的引用。
1)DOM0级事件处理程序
例如:
var spanobj = document.querySelector('span');
spanobj.onclick=function(){
alert("span元素被选中");
}
spanobj.οnclick=null;删除事件处理程序,再单击都不会有效果啦。
通过文档对象取得了一个标签元素的引用,然后对它指定事件处理程序,这样的一种形式就是DOM0事件处理程序。以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。
此方法优点:容易理解,对初学者学起来比较好上手,还有就是事件处理程序是在元素的作用域中运行的,程序中的this是引用的当前元素。
缺点:如果这些代码在页面中位于span元素的后面,就有可能一段时间内怎么单击都没有反应,而且也不能够给给一个对象添加多个事件处理程序,因为后面的会把前面的覆盖。
2)DOM2级事件处理程序
a) addEventListener() 处理指定事件处理程序的操作;
用法:elemet.addEventListener(<event-name>, <callback>, <use-capture>)此函数具有三个参数,第一个参数是:要处理的事件名,比如click,submit...,第二个参数是:事件处理程序的函数,第三个参数是:布尔值(true/false)true,表示在捕获阶段调用事件处理函数,false,表示在冒泡阶段调用事件处理程序;比如:以下代码;
var spanobj = document.querySelector('span');
spanobj.addEventListener(“click”,function(){
alert("span元素被选中");
},false);
优点:可以同时给一个对象添加多个事件处理程序,并且这些事件处理程序会按照添加的顺序触发。比如:
spanobj.addEventListener("click",function(){
alert("span元素被选中");
},false);
spanobj.addEventListener("click",function(){
alert("span元素被选中1111");
},false);
会依次弹出“span元素被选中”,"span元素被选中1111"。
b)removeEventListener(),删除事件处理程序的操作;
用法:element.removeEventListener(<event-name>, <callback>, <use-capture>);
专门用来移除addEventListener()添加的事件处理程序,移除时的参数与添加时的参数相同,那么就需要保留回调函数的句柄,因此,也就对于匿名函数,无法移除,我们不能使用匿名函数作为回调函数。
例如: 添加事件处理程序:
var spanobj = document.querySelector('span');
spanobj.addEventListener("click",function(){//这个回调函数是匿名的
alert("span元素被选中1111");
},false);
移除事件处理程序(1)
spanobj.removeEventListener(“click”,function(){//这种是不起作用的,因为回调函数是匿名的
alert("span元素被选中1111");
},false);
移除事件处理程序(2)
var spanobj = document.querySelector('span');
var spanhander=function(){ alert("span元素被选中1111"); };//将函数附值给一个对象。
spanobj.addEventListener(“click”,spanhander,false);//这个函数的对象作为参数。
spanobj.removeEventListener(“click”,spanhander,false);//此时就可以移除事件处理程序了,
3)Ie事件处理程序
a)attachEvent();添加事件处理程序;
用法:attachEvent(<on+event-name>, <callback>),这个函数只有两个参数,第一个参数是:要处理的事件名称以“on”为前缀,第二参数是:处理程序的函数。因为iE事件模型不支持事件捕获,所以没有第三个布尔值的参数。
特点:类似与addEventListener(),同样允许相同的事件处理程序注册多次,不过这些事件处理程序不是以添加的顺序执行,而是以相反的顺序被触发。而且与DOM0级方法的主要区别是,事件处理程序的作用域上,在使用DOM0级的情况下,事件处理程序会在其所属元素的作用域内进行,而在IE处理程序下,事件处理程序作用域会在全局作用域中进行,程序中的this==window。
b)detachEvent();移除事件处理程序;
用法:detachEvent(<on+event-name>, <callback>) ,也是使用attachEvent添加的事件必须由detachEvent事件来移除,同样要必须提供相同的参数,匿名函数将不能被移除,例子看上面的removeEventListener()事件。
(3)总结:一般事件处理程序都会考虑到这三方面,尽可能全写到如图(3)添加事件处理程序如下这些会在后期的学习中,跨浏览器添加事件很有帮助,根据后期的学习,会继续完善下面的代码,使之以后用起来比较方便:
对应上面的添加事件,来进行移除事件,这里的移除事件是与添加事件一一对应的,
最后,修改上面的实现跨浏览器的事件处理程序:
var EventUtil = { addHandler: function(element, type, handler){ // 该方法接受3个参数:要操作的元素,事件名称和事件处理程序函数 if (element.addEventListener){ //检查传入的元素是否存在DOM2级方法 element.addEventListener(type, handler, false); // 若存在,则使用该方法 } else if (element.addEvent){ // 如果存在的是IE的方法 element.attachEvent("on" + type, handler); //则使用IE的方法,注意,这里的事件类型必须加上"on"前缀。 } else { // 最后一种可能是使用DOM0级 element["on" + type] = hander; } }, removeHandler: function(element, type, handler){ // 该方法是删除之前添加的事件处理程序 if (element.removeEventListener){ //检查传入的元素是否存在DOM2级方法 element.removeEventListener(type, handler, false); // 若存在,则使用该方法 } else if (element.detachEvent){ // 如果存在的是IE的方法 element.detachEvent("on" + type, handler); //则使用IE的方法,注意,这里的事件类型必须加上"on"前缀。 } else { // 最后一种可能是使用DOM0及方法(在现代浏览器中,应该不会执行这里的代码) element["on" + type] = null; } } }; //可以向下面这样来使用: var btn =document.getElementById("mybtn"); var hander= function(){ alert("clicked"); }; //这里省略了部分代码 EventUtil.addHandler(btn,"click",hander); //这里省略了部分代码 EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件处理程序
转载于:https://blog.51cto.com/xiyin001/1749509