🟡JavaScript事件

事件流

🍉事件捕获

自顶层向深层传递

🍉事件冒泡

自最深层向顶层传递

🍉DOM事件流

事件监听器

on+事件名构成事件监听器

🥑HTML标签使用监听器

在HTML标签内使用事件监听器属性可为元素绑定事件

此时this指向当前元素

触发事件后生成event参数描述事件(不可自定义改参数名)

<button onclick="alert('Hellow World!')">Click</button>

Click

🥑DOM事件监听器

• 元素节点的事件监听器属性 DOM0

该属性接收一个处理函数处理事件,函数有可选参数传递event(可自定义该参数名)

当不使用箭头函数时this指向事件监听器绑定的元素节点

const Button = document.querySelector('butto')
Button.onclick = function(e) {
  alert('Hellow World!')
};

• EventListener方法 DOM2

addEventListener('eventName', (e) => {} [, Boolean])

处理函数可接收event参数,this为事件监听器绑定的元素节点(箭头函数无)

可为同一事件绑定多个事件监听器

布尔值 true:事件捕获阶段,false:事件冒泡阶段(默认)

const Button = document.querySelector('butto')
Button.addEventListener(
  'click',
  function(e) {
    alert('Hellow World!')
  }, false)

removeEventListener('eventName', (e) => {} [, Boolean])

不可移除匿名函数, 需与创建时的函数相同

const Say = (e) => alert('Hellow World!')
Button.addEventListener('click', Say, false)
Button.removeEventListener('click', Say, false)

事件对象

事件类型

🥦用户界面事件

🥦焦点事件

焦点转移时事件执行顺序,失去焦点事件在失焦元素触发,获得焦点事件在获得焦点的元素上触发

事件名	触发事件
focusout 支持冒泡	某元素失去焦点
foucusin 支持冒泡	某元素获得焦点
blur 不支持冒泡	某元素失去焦点
DOMFocusOut 已废弃	某元素失去焦点
focus 不支持冒泡	某元素获得焦点
DOMFocusIn 已废弃	某元素获得焦点

🥦鼠标与滚轮事件

除DOM3新事件外其它鼠标事件均可冒泡与取消

事件名	触发事件
mousedown	任意鼠标键按下
mouseup	任意鼠标键弹起
click	鼠标单击或敲击回车
dblclick	鼠标双击主键
mouseenter DOM3	鼠标从元素外移入
mouseleave DOM3	鼠标移出本元素
mousemove	鼠标在元素上移动(多次触发)
mouseover	鼠标移至其它元素
mouseout	鼠标移至本元素
mousewheel	滚轮滚动

📌鼠标位置

鼠标事件触发event参数可传递触发时鼠标的位置

属性	值
clientX/clientY	视口坐标
pageX/pageY	网页页面坐标
screenX/screenY	设备屏幕坐标

📌修饰键

鼠标事件触发event参数可传递触发时几个特殊键的状态

属性	值
shiftKey	shift键
ctrlKey	shift键
altKey	alt键
metaKey	meta/win/command键

🥦键盘与输入事件

事件名	触发事件
keydown	键按下
keypress DOM3已废弃	产生字符前
keyup	键释放

🥦合成事件

参考文档:

《JavaScript高级程序设计 第四版》