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 相关文章推荐
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
JavaScript 面向对象基础简单示例
Oct 02 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
vue+iview使用树形控件的具体使用
Nov 02 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
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
jquery插件推荐 jquery.cookie
2014/11/09 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python实现全局变量的两个解决方法
2014/07/03 Python
Python算法应用实战之队列详解
2017/02/04 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Appium+python自动化怎么查看程序所占端口号和IP
2019/06/14 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
python的scipy实现插值的示例代码
2019/11/12 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
法律工作求职自荐信
2013/10/31 职场文书
建筑项目策划书
2014/01/13 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2015中学学校工作总结
2015/07/20 职场文书
python实现图片批量压缩
2021/04/24 Python
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android