JavaScript WebApi之事件

55 阅读1分钟

事件

事件解决了三件事

  • 某个 DOM:监听谁?
  • 某件事(事件类型):它发生了什么?
  • 某些处理(处理函数):我要做什么

监听谁

dom对象

它发生什么(事件类型)

developer.mozilla.org/zh-CN/docs/…

image.png

image.png

image.png

注册事件

方式 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

案例一 图片移入切换,

动画.gif image.png

案例二 列表插入

动画.gif

image.png