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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
一个简单的js树形菜单
Dec 09 Javascript
JS中的forEach、$.each、map方法推荐
Apr 05 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
JS实现添加,替换,删除节点元素的方法
Jun 30 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
JavaScript中return用法示例
Nov 29 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
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转盘抽奖接口实例
2015/02/09 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
NodeJS Express框架中处理404页面一个方式
2014/05/28 NodeJs
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
微信小程序云开发 搭建一个管理小程序
2019/05/17 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
JavaScript Array对象基本方法详解
2019/09/03 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python smtplib模块实现发送邮件带附件sendmail
2018/05/22 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
pycharm实现猜数游戏
2020/12/07 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
大学生工作求职信
2014/06/23 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
办公经费申请报告
2015/05/15 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
十大最强飞行系宝可梦,BUG燕上榜,第二是飞行系王者
2022/03/18 日漫