共计 907 个字符,预计需要花费 3 分钟才能阅读完成。
定义
DOM 事件被发送用于告诉代码相干的事件曾经产生了。每个事件都是继承自 Event 类的对象,能够包含自定义的成员属性及函数用于获取事件产生时相干的更多信息。事件能够示意从根本用户交互到渲染模型中产生的事件的主动告诉的所有内容。
绑定事件的办法
1.ele.onxxx = function (event) {}
兼容性很好,然而一个元素只能绑定一个处理程序 根本等同于写在 HTML 行间上
2.ele.addEventListener(type, fn, false);
IE9 以下不兼容,能够为一个事件绑定多个处理程序
当第三个参数设置为 true 就在捕捉过程中执行,反之就在冒泡过程中执行处理函数。
3.ele.attachEvent(‘on’+ type, fn);
IE 独有,一个事件同样能够绑定多个处理程序
事件处理程序的运行环境
1.ele.onxxx = function (event) {} 程序 this 指向是 dom 元素自身
2.obj.addEventListener(type, func, false); 程序 this 指向是 dom 元素自身
3.obj.attachEvent(‘on’+ type, fn); 程序 this 指向 window
封装兼容性的 addEvent(elem, type, handle) 办法
function addEvent(elem, type, handle) {
if(elem.addEventListener){elem.addEventListener(type, handle, false);
} else if(elem.attachEvent) {elem.attachEvent('on'+ type, function(){handle.call(elem);
})
} else {elem['on' + type] = handle;
}
}
解除事件处理程序
ele.onclick = false/‘’/null;
ele.removeEventListener(type, func, false);
ele.detachEvent(‘on’+ type, func);
注: 若绑定匿名函数,则无奈解除