JS-绑定事件的三种方法(+兼容代码)

绑定事件的三种方法

• ele.onxxx = function (event) {}
• obj.addEventListener(事件类型, 处理函数, false);
• obj.attachEvent(‘on’ + 事件类型, 处理函数);

1. ele.onxxx = function (event) {}
   程序this指向的是dom元素本身;
   ** 解除：ele.onxxx = false / ‘’ / null;
   兼容性很好，但是一个元素只能绑定一个事件处理函数。

var div = document.getElementsByTagName('div')[0];
div.onclick = function() {
    this.style.backgroundColor = 'pink';
    //this.onclick = null;只能执行一次，再点没用
}

div.onclick = null;//解除

2. obj.addEventListener(事件类型, 处理函数, false);
   程序this指向的是dom元素本身;
   ** 解除：ele.removeEventListener(事件类型, 处理函数, false);
   IE9以下不兼容，可以为一个事件绑定多个事件处理函数。

var div = document.getElementsByTagName('div')[0];
div.addEventListener('click', function() {
    console.log('a');
}, false);
div.addEventListener('click', function() {
    console.log('b');
}, false);//可绑定多个处理函数
//！！但是如果绑定的是匿名函数(如上代码)，则无法解除！那么只能通过下面代码绑定的才能解除：
div.addEventListener('click', test, false);
function test() {
    console.log('a');
}

div.removeEventListener('click', test, false);//解除

3. obj.attachEvent(‘on’ + 事件类型, 处理函数);
   程序this指的是window；(如何让this指向元素本身呢？代码中有)
   ** 解除：ele.detachEvent(‘on’ + 事件类型, 处理函数);
   IE独有的，一个事件可以绑定多个事件处理函数。同一个函数绑定多次也能执行多次，但第二种方法同一个函数绑定多次只能执行一次。

var div = document.getElementsByTagName('div')[0];
div.attachEvent('onclick', function() {
    handle.call(div);
});
function handle() {
    //事件处理程序
    //这里this就一定指向元素本身了
}

绑定事件的兼容代码：
为任意元素.绑定任意的事件（任意的元素，事件的类型，事件处理函数）

function addEventListener(element, type, fn) {
	//判断浏览器是否支持这个方法--对象.方法名
	if (element.addEventListener) {
    	element.addEventListener(type, fn, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + type, fn);
    } else {
        element["on" + type] = fn;
    }
}

解绑事件的兼容代码：
为任意的一个元素解绑对应的事件

function removeEventListener(element, type, fnName) {
	if (element.removeEventListener) {
    	element.removeEventListener(type, fnName, false);
    } else if (element.detachEvent) {
        element.detachEvent("on" + type, fnName);
    } else {
        element["on" + type] = null;
    }
}