时间:2021-05-28
1、DOM0级事件处理程序
将一个函数值给一个事件处理程序属性。
例如:
复制代码 代码如下:
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;
}
}
}
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文全篇介绍了JavaScript事件流和事件处理程序,分享给大家供大家参考,具体内容如下一、事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡
最近用到JavaScript事件处理机制,找了些资料。以前写JavaScript程序时,事件都是采用复制代码代码如下:object.event=handler;
本文实例讲述了JavaScript中为事件指定处理程序的五种方式。分享给大家供大家参考,具体如下:JavaScript和HTML之间的交互是通过事件实现的。IE
本文为大家分享了javascript跨浏览器事件处理机制,供大家参考,具体内容如下跨浏览器的事件处理程序function$(id){returndocument
事件处理概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件-启动事件处理程序-事