一、传统事件绑定方法
传统事件绑定方法事例如下:
window.onload = function () {
alert("页面加载完毕");
}
document.getElementById("btn").onclick= function () {
alert("按钮被点击");
};
document.onmousemove = function () {
console.log("鼠标在移动");
};
(1) 事件名称之间一定要加上 on,比如:onclick、onload、onmousemove。
(2) 当同一个元素绑定多个事件时,只有最后一个事件会被添加,并且传播模式只能是冒泡模式。
二、addEventListener
window.addEventListener('load', init, false);
function init(){
alert("页面加载成功");
}
// 下面写法与上面等价
window.addEventListener('load', function () {
alert("页面加载成功");
}, false);
(1) element.addEventListener(event, function, useCapture) 中的第3个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。
(2) addEventListener 可以给同一个元素绑定多个事件,不会发生覆盖的情况。如果给同一个元素绑定多个事件,那么采用先绑定先执行的规则。
(3) addEventListener 在绑定事件的时候,事件名称之前不需带 on 。