事件处理程序
2016-05-25 00:00
344 查看
摘要: attachEvent,detachEvent,addEventListener,removeEventListener
HTML事件处理程序、DOM 0级事件处理程序、DOM 2级事件处理程序、IE事件处理程序
以上两个例子都是函数调用写在HTML结构里的。最大的缺点是,HTML和js代码是紧密耦合在一起的,也就是说,当我修改js的时候,可能也需要修改HTML里面的内容:例如,我修改showMes()的函数名为showMessage(),那相应的,HTML中的input元素也要修改调用的函数名。
在这里,事件其实是元素btn的一个属性(给按钮添加一个属性,而这个属性触发了一个函数)
(true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序,一般设置为false,因为添加到冒泡阶段可以最大限度的兼容各种浏览器)
优点:可以给一个元素添加多个事件。
detachEvent():删除事件;
都接受两个参数:事件处理程序的名称,事件处理程序的函数(IE8以及更早的版本,默认是冒泡,所以不需要布尔值)
HTML事件处理程序、DOM 0级事件处理程序、DOM 2级事件处理程序、IE事件处理程序
1、HTML事件处理程序
指的是,事件直接加在HTML结构里:<input type="button" value="按钮" onclick="alert('hello')"> <input type="button" value="按钮" onclick="showMes()"> <script> function showMes(){ alert('hello'); } </script>
以上两个例子都是函数调用写在HTML结构里的。最大的缺点是,HTML和js代码是紧密耦合在一起的,也就是说,当我修改js的时候,可能也需要修改HTML里面的内容:例如,我修改showMes()的函数名为showMessage(),那相应的,HTML中的input元素也要修改调用的函数名。
2、DOM 0级事件处理程序(用的最多的一种)
指的是,把一个函数赋值给一个事件处理程序的属性,特点是:在大部分的浏览器都支持,用的较多,而且简单,有跨浏览器的优势,除此之外,还可以给一个元素添加多个事件。<input type="button" value="按钮" id="btn" onclick="alert('hello')"> <input type="button" value="按钮" onclick="showMes()"> <script> function showMes(){ alert('hello'); } var btn = document.getElementById("btn"); btn.onclick = function(){ alert("btn hello"); } </script>
在这里,事件其实是元素btn的一个属性(给按钮添加一个属性,而这个属性触发了一个函数)
3、DOM 2级事件处理程序
此方法定义了两个方法,用于处理和删除事件的操作:addEventListener()和removeEventListener(),接受3个参数:要处理的事件名,作为事件处理程序的函数,false/true(true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用事件处理程序,一般设置为false,因为添加到冒泡阶段可以最大限度的兼容各种浏览器)
var btns = document.getElementById("btns"); //添加事件监听器 btns.addEventListener('click', showMes, false); //删除事件 btns.removeEventListener('click', showMes, false);
优点:可以给一个元素添加多个事件。
4、IE事件处理程序(主要是IE和opera)
attachEvent():添加事件;detachEvent():删除事件;
都接受两个参数:事件处理程序的名称,事件处理程序的函数(IE8以及更早的版本,默认是冒泡,所以不需要布尔值)
//添加事件监听器 btns.attachEvent('onclick', showMes); //删除事件 btns.detachEvent('onclick', showMes);
相关文章推荐
- addEventListener()第三个参数useCapture (Boolean)详细解析
- JS在IE和FF下attachEvent,addEventListener学习笔记
- addEventListener 的用法示例介绍
- JavaScript通过attachEvent和detachEvent方法处理带参数的函数
- 详解addEventListener的三个参数之useCapture
- document.addEventListener使用介绍
- 多种方法实现JS动态添加事件
- 事件绑定之小测试 onclick && addEventListener
- javascript中attachEvent用法实例分析
- Javascript 的addEventListener()及attachEvent()区别分析
- JavaScript使用addEventListener添加事件监听用法实例
- JS事件监听 JS:attachEvent和addEventListener 使用方法
- [html]事件处理addEventListener详解
- IE9以下的this指向问题
- js 添加事件 attachEvent 和 addEventListener 的用法
- addEventListener取消监听,以及传入外部参数
- js 中on和addEventLisenter的区别
- addEventListener和on的区别
- addEventListener()及attachEvent()区别
- 【自用】几个自用的接口-無它