JavaScript基础之事件处理
Author: Vic.Wang 2016/08/10
这是一篇JS事件的整理笔记。
JavaScript中有两种事件流,一种是IE的事件冒泡,还有就是Netscape的事件捕获,这两种事件流是完全相反的概念。在W3C事件模型中,首先会进入捕获阶段,直到达到目标元素,再进入冒泡阶段。
DOM0级事件处理程序:
var btn = document.getElementById('btn'); /*事件处理程序赋值*/ btn.onclick = function() { /*xxxx*/ } /*删除事件处理程序*/ btn.onclick = null;
DOM0级中是将一个函数赋值给一个元素的属性,称为事件处理程序赋值。直接通过
DOM2级事件处理程序:
var btn = document.getElementById('btn'); btn.addEventListener('click', function() { /*xxxx*/ }, false); /*删除事件处理程序*/ btn.removeEventListener(type, handler, false);
DOM2级的事件处理程序是通过两个函数来处理的添加事件
方法接受3个参数,第一个是要处理的事件名(如click),第二个是作为事件处理的函数(自定义的函数或匿名函数),第三个参数是布尔值(true在捕获阶段调用事件处理程序,false则在冒泡阶段调用,默认是false)
用 addEventListener() 添加的事件只能用 removeEventListener() 来移除,移除时传入的参数和添加的时候相同,但是添加的时候第二个参数是匿名函数的话,这意味着无法移除。
IE事件处理程序:
var btn = document.getElementById('btn'); btn.attachEvent('onclick', function() { /*xxxxx*/ }); /*删除事件处理程序*/ btn.detachEvent('onclick', handler);
IE8以及更早版本的IE不支持 addEventListener() 方法,但是提供了IE自有的方法来添加
IE提供的方法接受2个参数:事件名称和事件处理函数。
注意:IE中的事件名称是要在事件名之前加on的,如click事件,要写成onclick,
attachEvent()方法添加的事件处理程序会在全局作用域内运行,this等于window。
事件兼容封装:
我们封装一下代码,以后可以直接拿来用。
function addEvent(element, type, handler) { if (element.addEventListener) { /*DOM2级*/ element.addEventListener(type, handler, false); } else if (element.attachEvent) { /*IE*/ element.attachEvent('on' + type, handler); } else { /*DOM0级*/ element['on' + type] = handler; } } function removeEvent(element, type, handler) { if (element.removeEventListener) { /*DOM2级*/ element.removeEventListener(type, handler, false); } else if (element.detachEvent) { /*IE*/ element.detachEvent('on' + type, handler); } else { /*DOM0级*/ element['on' + type] = null; } } var btn = document.getElementById('btn'); var handler = function() { /*xxxxx*/ } addEvent(btn, 'click', handler); removeEvent(btn, 'click', handler);
上面的代码中,我们用特帧检测,先检查DOM2级是否支持,不支持则检测IE是否支持,都不支持则使用DOM0级的方法绑定事件。
本文地址:http://blog.mingsixue.com/it/JS-base-event-handler.html
文章若需转载,请附上原文链接,谢谢配合。^_^