addEventListener 的第三个参数为false的时候 : 事件冒泡
addEventListener 的第三个参数为true的时候 : 事件捕获
// 注册事件的第一种方式
// 无法给同一个对象的同一个事件注册多个事件处理函数
btn.onclick = function () {
}
// 浏览器兼容性问题 IE9以后才支持
btn.addEventListener('click', function () {
alert('hello world');
})
// 第一个参数,事件的名称前要加 on
// ie6-10支持
btn.attachEvent('onclick', function () {
alert('hello world');
});
// 处理注册事件的兼容性问题
// eventName, 不带on, click mouseover mouseout
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}
var btn = document.getElementById('btn');
btn.onclick = function () {
alert('hello world');
// 移除事件
btn.onclick = null;
}
如果想要移除事件,注册事件的时候不能使用匿名函数
btn.addEventListener('click', function () {
alert('hello world');
// 移除事件
btn.removeEventListener('click', )
});
function btnClick () {
alert('hello world');
// 移除事件
btn.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);
//
// chrome 中不支持attachEvent。 IE9-10
function btnClick() {
alert('hello world');
// 移除事件
btn.detachEvent('onclick', btnClick);
}
btn.attachEvent('onclick', btnClick);
// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
if (element.removeEventListener) {
element.removeEventListener(eventName, fn);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
}