事件
事件解决了三件事
- 某个 DOM:监听谁?
- 某件事(事件类型):它发生了什么?
- 某些处理(处理函数):我要做什么
监听谁
dom对象
它发生什么(事件类型)
developer.mozilla.org/zh-CN/docs/…
注册事件
方式 1:将事件注册写到元素上,这种方式基本被弃用
<button onclick="js代码">按钮</button>
方式 2:使用 dom 属性注册事件==
属性名为 on+事件类型
// 监听事件
dom.onclick = function () {
// 处理函数
};
// 移除监听事件
dom.onclick = null;
这种方式的特点是:
- 优点:易于监听、覆盖、移除
- 缺点:只能注册一个处理函数
- 缺点:某些事件不支持用这种方式注册
方式 3:使用 addEventListener 方法注册事件(推荐)
dom.addEventListener('click', function () {
// 处理函数1
});
dom.addEventListener('click', function () {
// 处理函数2
});
dom.addEventListener('click', handler1);
dom.addEventListener('click', handler2);
dom.removeEventListener('click', handler1); // 移除监听函数1
这是最完美的事件注册方式,如果要移除用这种方式注册的事件,需要改写代码
事件处理函数
当事件发生时,会自动调用事件处理函数,并向函数传递一个参数,该参数称之为事件对象,里面包含了事件发生的相关信息,比如鼠标位置、键盘按键等等
dom.addEventListener('click', function (e) {
console.log(e.clientX); //打印鼠标的横坐标
});
另外,在事件处理函数中,this
始终指向注册事件的 dom
案例一 图片移入切换,