javascript 事件处理程序介绍
2012-06-27 00:00
706 查看
1、DOM0级事件处理程序
将一个函数值给一个事件处理程序属性。
例如:
删除事件,btn.onclick = null;
--------------------------------------------------------------------------------
2、DOM2级事件处理程序
先介绍,“DOM2级事件”定义的两个方法,用于处理指定和删除事件处理程序的操作:
addEventListener()
removeEventListener()
所有DOM节点都包含这两个方法,接受3个参数:处理事件名、作为事件处理程序的函数、一个布尔值。
最后的布尔值参数,true:表示在捕获阶段调用事件处理程序;false:表示在冒泡阶段调用事件处理程序。\
用DOM2级方法添加事件处理程序主要的好处是可以添加多个事件处理程序。
例如:
这两个事件会按照顺序触发。
通过 addEventListener()添加的事件只能用removeEventListener()移除。移除时传入的参数需与添加时的参数一致,也就是说匿名函数将无法移除。
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,以便兼容各种浏览器。
firefox、safari、chrome、opera支持DOM2级事件处理程序。
--------------------------------------------------------------------------------
3、IE事件处理程序
IE实现了与DOM中类似的两个方法:
attachEvent()
detachEvent()
这两个方法都接受两个参数:事件处理程序名称和事件处理程序函数。
由于IE只支持时间冒泡,所以通过attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。
例如:
注意,attachEvent()的第一个参数是“onclick”,而非 “click”。
IE的attachEvent()与DOM0的addEventListener()的主要区别是事件处理程序的作用域。
DOM0级方法,事件处理程序会在所属元素的作用域内运行;
attachEvent()方法,事件处理程序会在全局作用域中运行,因此 this等于 window。
attachEvent()也可以为一个元素添加多个事件处理程序。
与DOM方法不同的是,这些事件处理程序不是以添加顺序执行,而是以相反的方向执行。
detachEvent() 的用法与removeEventListener()的用法一样。
--------------------------------------------------------------------------------
4、跨浏览器的事件处理程序
将一个函数值给一个事件处理程序属性。
例如:
var btn = document.getElementById("myBtn"); btn.onclick = funtion(){ alert(this.id); //"myBtn" }
删除事件,btn.onclick = null;
--------------------------------------------------------------------------------
2、DOM2级事件处理程序
先介绍,“DOM2级事件”定义的两个方法,用于处理指定和删除事件处理程序的操作:
addEventListener()
removeEventListener()
所有DOM节点都包含这两个方法,接受3个参数:处理事件名、作为事件处理程序的函数、一个布尔值。
最后的布尔值参数,true:表示在捕获阶段调用事件处理程序;false:表示在冒泡阶段调用事件处理程序。\
var btn = document.getElementById("myBtn"); btn.addEventListener("click",funciton(){ alert(this.id); },false);
用DOM2级方法添加事件处理程序主要的好处是可以添加多个事件处理程序。
例如:
var btn = document.getElementById("myBtn"); btn.addEventListener("click",funciton(){ alert(this.id); },false);btn.addEventListener("click",funciton(){
alert(“Hello World!”);
},false);
这两个事件会按照顺序触发。
通过 addEventListener()添加的事件只能用removeEventListener()移除。移除时传入的参数需与添加时的参数一致,也就是说匿名函数将无法移除。
var btn = document.getElementById("myBtn"); var handler = function(){ alert(this.id); }; btn.addEventListener("click" , handler , false); btn.removeEventListener("click", handler , false);
大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,以便兼容各种浏览器。
firefox、safari、chrome、opera支持DOM2级事件处理程序。
--------------------------------------------------------------------------------
3、IE事件处理程序
IE实现了与DOM中类似的两个方法:
attachEvent()
detachEvent()
这两个方法都接受两个参数:事件处理程序名称和事件处理程序函数。
由于IE只支持时间冒泡,所以通过attachEvent() 添加的事件处理程序都会被添加到冒泡阶段。
例如:
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick" , function(){ alert("Clicked"); })
注意,attachEvent()的第一个参数是“onclick”,而非 “click”。
IE的attachEvent()与DOM0的addEventListener()的主要区别是事件处理程序的作用域。
DOM0级方法,事件处理程序会在所属元素的作用域内运行;
attachEvent()方法,事件处理程序会在全局作用域中运行,因此 this等于 window。
attachEvent()也可以为一个元素添加多个事件处理程序。
var btn = document.getElementById("myBtn"); btn.attachEvent(”onclick“ , function(){ alert("clicked"); }) btn.attachEvent(”onclick“ , function(){ alert("Hello World!"); })
与DOM方法不同的是,这些事件处理程序不是以添加顺序执行,而是以相反的方向执行。
detachEvent() 的用法与removeEventListener()的用法一样。
--------------------------------------------------------------------------------
4、跨浏览器的事件处理程序
var EventUtil = { addHandler : function(element, type , handler){ if (element.addEventListener){ 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.removeElementListener) { element.removeElementListener( type , handler , flase); } else if ( element.detachEvent) { element.detachEvent ( "on" + type , handler) } else { element["on" + type] = handler; } } }
相关文章推荐
- javascript 事件处理程序介绍
- JavaScript事件处理程序
- JavaScript 事件处理程序
- JavaScript事件处理程序的3种方式
- 浅谈JavaScript的事件(事件处理程序)
- JavaScript高级程序设计学习笔记--事件(一)(事件流、事件处理程序/事件侦听器)
- JavaScript 事件处理程序的指派方式
- javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
- 浅谈Javascript事件处理程序的几种方式
- JavaScript 中的事件流和事件处理程序(读书笔记思维导图)
- 事件处理程序实现的另一种方法:浏览器的事件监听机制实现“1事件对应n事件处理程序”(Javascript)
- javascript练习:8-8显式调用事件处理程序
- 浅谈 Javascript 事件处理程序的几种方式
- JavaScript事件处理程序的3种方式
- 探究JavaScript中的五种事件处理程序
- JavaScript实现为指定对象添加多个事件处理程序的方法
- javascript练习:8-9事件处理程序的返回值
- JavaScript 事件流、事件处理程序及事件对象总结
- JavaScript中的事件处理程序
- JavaScript 事件流、事件处理程序及事件对象总结