绑定事件的三种方法
- ele.onxxx = function (event) {}
- obj.addEventListener(事件类型, 处理函数, false);
- obj.attachEvent(‘on’ + 事件类型, 处理函数);
- 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;//解除
- 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);//解除
- 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;
}
}