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 相关文章推荐
DHTML 中的绝对定位
Nov 26 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
JS实现身份证输入框的输入效果
Aug 21 Javascript
Angularjs实现数组随机排序的方法
Oct 02 Javascript
vue踩坑记录之数组定义和赋值问题
Mar 20 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
使用jQuery实现购物车
Oct 29 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 图片上传代码
2011/09/13 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
Laravel5中contracts详解
2015/03/02 PHP
php批量修改表结构实例
2017/05/24 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
python 实现归并排序算法
2012/06/05 Python
python flask实现分页效果
2017/06/27 Python
Python中按键来获取指定的值
2019/03/02 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
详解Python中的编码问题(encoding与decode、str与bytes)
2020/09/30 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
接口中的方法可以是abstract的吗
2015/07/23 面试题
不用游标的SQL语句有哪些
2012/09/07 面试题
长安大学毕业生自我鉴定
2014/01/17 职场文书
《尊严》教学反思
2014/02/11 职场文书
财务内勤岗位职责
2014/04/17 职场文书
质量保证书范本
2014/04/29 职场文书
护士自荐信怎么写
2015/03/06 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书