JavaScript事件进阶

Posted 2021-07-12 遥岑.

目录

• 注册事件
• • 传统注册方式
  • 事件监听方式
• 删除事件（解绑事件）
• • 传统方式
  • 事件监听方式
• 事件流
• 事件对象（event）
• • 事件对象的使用
  • 事件对象的属性
• 事件委托（代理、委派）
• 常用的鼠标事件
• • 鼠标事件的常用方法
  • 鼠标事件对象
• 常用的键盘事件
• • 键盘事件的常用方法
  • 键盘事件对象

注册事件

给元素添加事件，称为注册事件或者绑定事件。

注册事件的两种方式：

• 传统方式
• 事件监听注册方式

传统注册方式

// 对象.事件名 = 事件处理程序
对象名.onclick = function() { }

• 同一个对象的同一个事件只能注册一个处理程序，后面注册的程序会将前面注册的程序覆盖掉（唯一性）

事件监听方式

由于不同浏览器采用的事件流实现方式不同，事件监听的实现存在兼容性问题。
通常根据浏览器的内核，可以把浏览器分为两大类：一类是早期版本的IE浏览器（如IE6-IE8），一类是遵循W3C 标准的浏览器（简称标准浏览器）。
该方式注册事件的特点在于可以给同一个DOM对象的同一个事件添加多个事件处理程序。

1. 早期浏览器

 dom对象.attachEvent(type,callback)

• type参数：表示事件的类型，如click、change、foucs等
• callback参数：是回调函数，表示事件处理程序

2. 标准浏览器

 dom对象.addEventListener(type,callback,[capture])

• type参数：表示事件的类型，如click、change、foucs等
• callback参数：是回调函数，表示事件处理程序
• capture参数：可选参数，用来指定事件处理的方式。true表示事件在捕获阶段处理；false表明在冒泡阶段处理（默认）

包括IE8版本以上的IE浏览器，以及新版的FireFox、Chrome等浏览器

删除事件（解绑事件）

传统方式

dom对象.事件名 = null

事件监听方式

1. 早期浏览器

dom对象.detachEvent(type, callback)

2. 标准浏览器

dom对象.removeEventListener(type,callback) 

事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为三个阶段：

• 捕获阶段
• 当前目标阶段
• 冒泡阶段
  
• JS代码中只能执行捕获或者冒泡其中的的一个阶段
• onclick 和 attachEvent 只能得到冒泡阶段
• 实际开发中我们很少使用事件捕获，我们更关注事件冒泡
• 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程
W3C：先捕获，再冒泡

事件对象（event）

event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件发生后，跟事件相关的一系列信息数据的集合都放在这个对象里面，这个对象就是事件对象event，它有很多的属性和方法。
当事件被触发后由系统自动生成，它是与事件有关的数据信息的集合。

事件对象的使用

1. 早期浏览器

在标准浏览器中会将一个event对象直接传入到事件处理程序中，而早期版本的IE浏览器（IE6-IE8）中，仅能通过window.event才能获取事件对象。

var 事件对象 = window.event

2. 标准浏览器

DOM对象.事件 = function(event) { }

• 这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去
• 当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

事件对象的兼容性问题解决： e = e || window.event

事件对象的属性

• 表中的type属性是标准浏览器和早期版本IE浏览器的事件对象的共有属性，通过该属性可以获取发生事件的类型，如click、mouseover等（不带on）
• e.target是事件触发的对象
• this是事件绑定的元素，这个函数的调用者（绑定这个事件的元素）
• 在实际开发中，为了使程序更加严谨，想要确定含有默认行为的标签符合要求后，才能执行默认行为时，可以使用事件对象的preventDefault( )方法和returnValue属性，禁止所有浏览器执行元素的默认行为

事件委托（代理、委派）

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
不给子元素注册事件，而是给父元素注册事件。事件处理代码在父元素的事件中执行。
我们只操作了一次DOM，提高了程序的性能。

常用的鼠标事件

鼠标是计算机的一种输入设备，也是计算机显示系统纵横坐标定位的指示器。

鼠标事件的常用方法

• 禁止右键菜单：禁止contextmenu事件的默认行为

 document.addEventListener('contextmenu',function(e) {
      e.preventDefault();
 })

• 禁止鼠标选中：禁止selectstart事件的默认行为

document.addEventListener('selectstart',function(e) {
     e.preventDefault();
})

鼠标事件对象

IE6-IE8浏览器中不兼容pageX和pageY属性

常用的键盘事件

用户在使用键盘时触发的事件。

键盘事件的常用方法

• 如果使用addEventListener不需要加on
• 三个事件执行的顺序是：keydown - keypress - keyup
• keypress事件保存的按键值是ASCII码
• keydown 和 keypress如果按住不放的话，会重复触发对应事件
• keyup 和 keydown事件不区分字母大小写，而keypress区分字母大小写

键盘事件对象

键盘事件对象：KeyBoardEvent，其属性keyCode返回的是按键的ASCII码值，通过ASCII码值可以判断出用户按了哪个键。

String.fromCharCode( ) : 将ASCII码值转换成字母
String.charCodeAt( ): 将字母转换成对应的ASCII码