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 相关文章推荐
原创javascript小游戏实现代码
Aug 19 Javascript
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
详解vue express启动数据服务
Jul 05 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
Nov 29 Javascript
js实现验证码干扰(静态)
Feb 22 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 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
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
asp批量修改记录的代码
2008/06/25 Javascript
javascript 鼠标拖动图标技术
2010/02/07 Javascript
javascript 精粹笔记
2010/05/09 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
javascript 构造函数强制调用经验总结
2012/12/02 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
使用javascript插入样式
2016/03/14 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
layer插件select选中默认值的方法
2018/08/14 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
js实现表格数据搜索
2020/08/09 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python异常处理机制结构实例解析
2020/07/23 Python
vscode调试django项目的方法
2020/08/06 Python
大学自我鉴定
2013/12/20 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
秘书英文求职信
2014/04/16 职场文书
拉拉队口号
2014/06/16 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL