javascript 事件处理程序介绍


Posted in Javascript onJune 27, 2012

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; 
} 
} 
}
Javascript 相关文章推荐
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
常用的JS验证和函数汇总
Dec 23 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解
May 31 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
VueJS事件处理器v-on的使用方法
Sep 27 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 #Javascript
IE事件对象(The Internet Explorer Event Object)
Jun 27 #Javascript
跨浏览器的事件对象介绍
Jun 27 #Javascript
UI Events 用户界面事件
Jun 27 #Javascript
浅谈Javascript鼠标和滚轮事件
Jun 27 #Javascript
浅谈Javascript事件模拟
Jun 27 #Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 #Javascript
You might like
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
javascript CSS画图之基础篇
2009/07/29 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
关于js类的定义
2011/06/28 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
vue项目刷新当前页面的三种方法
2018/12/04 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Python入门篇之对象类型
2014/10/17 Python
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
apache部署python程序出现503错误的解决方法
2017/07/24 Python
基于python绘制科赫雪花
2018/06/22 Python
python五子棋游戏的设计与实现
2019/06/18 Python
django 消息框架 message使用详解
2019/07/22 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
澳大利亚领先的亚麻品牌:Bed Threads
2019/12/16 全球购物
高考自主招生自荐信
2013/10/20 职场文书
读书心得体会
2013/12/28 职场文书
学校采购员岗位职责
2014/01/02 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
给医院的感谢信
2015/01/21 职场文书
品德与社会教学反思
2016/02/24 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android