# 注册事件(绑定事件)

# 注册事件概述

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

注册事件两种方式:传统方式和方法监听注册方式

# 传统注册方式

  • 利用 on 开头的事件 onclick
  • 特点:注册事件唯一性
  • 同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数

# 方式监听注册方式

  • w3c 标准 推荐方式
  • addEventListener() 它是一个方法
  • IE9 之前的 IE 不支持,可使用 attachEvent() 方法代替
  • 特点:同一个元素同一个事件可以注册多个监听器
  • 按照注册顺序一次执行

# addEventListener 事件监听方式

eventTarget.addEventListener(type,listener[,useCapture])

eventTarget.addEventListener () 方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数

  • type:事件类型的字符串,比如 click,mouseover,注意这里不带 on
  • listener:事件处理函数,事件发生时,会调用监听函数
  • useCapture:可选参数,是一个布尔值,默认是 false,学完 DOM 事件流后,进一步学习
<button>监听事件</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',function(){
        alert(1);
    })
    btn.addEventListener('click',function(){
        alert(2);
    })
</script>

# attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn,callback);

eventTarget.attachEvent() 方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行

  • eventNameWithOn:事件类型字符串,比如 onclick,onmouseover
  • callback:事件处理函数,当目标触发事件时回调函数被调用

# 删除事件(解绑事件)

# 删除事件的方式

# 传统注册方式

eventTarget.onclick = null;

# 方法监听注册方式

eventTarget.removeEventListener(type,listener[,useCapture]);
//移除案例
<button>监听事件</button>
<script>
    var btn = document.querySelector('button');
btn.addEventListener('click',fn);
function fn() {
    alert(1);
    btn.removeEventListener('click',fn)
}
</script>

# DOM 事件流

# 事件流概述

事件流描述是页面中接收事件的顺序

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流

# DOM 事件分为三个阶段

  • 捕获阶段
  • 当前目标阶段
  • 冒泡阶段

# 事件流图解

image-20230807162208604

# 注意

  • JS 代码中只执行捕获或者冒泡其中的一个阶段
  • onclick 只能得到冒泡阶段
  • addEventListener(type,listener,[useCapture]) 第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序,如果是 false(不写默认为 false),表示处于冒泡阶段
  • 实际开发中很少用事件捕获,我们更关注事件冒泡
  • 有些事件时没有冒泡的 例如 onblur onfocus onmouseenner onmouseleave

# 事件对象

# 事件对象概述

eventTarget.onclick = function(event){}    //event 就是事件对象
  • 官方解释:event 对象代表事件的状态,比如键盘按键状态,鼠标位置,鼠标按钮型状
  • 简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象是事件对象 event,它有很多方法

# 事件对象语法

<button>事件对象</button>
<script>
    var btn = document.querySelector('button');
    btn.addEventListener('click',fn);
    function fn(event) {
        alert(1);
        event = event || window.event; // 处理兼容性问题
        console.log(event);
    }
</script>

# 事件兼容性用法

event = event || window.event;

# 事件对象常用属性和方法

事件对象属性方法 说明
e.target 返回触发事件的对象
e.srcElement 返回触发事件的对象 非标准
e.type 返回事件类型 比如 click
e.cancelBubble 该属性阻止冒泡 非标准
e.returnValue 该属性阻止默认事件(默认行为)非标准 比如不让连接跳转
e.preventDefault() 该方法阻止默认事件(默认行为)标准,比如不让连接跳转
e.stopPropogation() 阻止冒泡 标准

# 阻止事件冒泡

# 阻止事件冒泡的两种方式

事件冒泡:开始时由最具体的元素接收,然后逐层向上传播到 DOM 最顶层节点

阻止事件冒泡

标准写法:利用事件对象里面的 stopPropagation() 方法

e.stopPropagation();

# 事件委托(代理 委派)

# 事件委托概述

事件委托也称为事件代理

# 事件委托原理

不是每个子节点单的设置事件监听器,而是事件监听器设置在父节点上,然后利用冒泡原理影响设置每个子节点

# 事件委托作用

只进行一次 DOM 操作,提高了程序的性能

# 常用鼠标事件

# 常用鼠标事件

禁止鼠标右键菜单:contextmenu 主要控制应该何时显示上下文菜单

<script>
    document.addEventListener('contextmenu',function(e) {
        e.preventDefault();
    })
</script>

禁止鼠标选中 selectstart

<script>
    document.addEventListener('selectstart',function(e) {
        e.preventDefault();
    })
</script>

mouseenter 和 mouseover 的区别

  • 当鼠标移动到元素上时就会触发 mouseenter 事件
  • mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发,mouseenter 智慧经过自身盒子触发
  • 因为 mouseenter 不会冒泡
  • 跟 mouseenter 搭配鼠标离开 mouseleave,同样不会冒泡

# 鼠标事件对象

event 对象代表事件的状态,跟事件相关的一系列信息的集合,现阶段我们主要是鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent

鼠标事件对象 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的 x 坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的 y 坐标
e.pageX 返回鼠标相对于文档页面的 X 坐标
e.pageY 返回鼠标相对于文档页面的 Y 坐标
e.screenX 返回鼠标相对于电脑屏幕的 X 坐标
e.screenY 返回鼠标相对于电脑屏幕的 Y 坐标

# 常用键盘事件

# 常用键盘事件

键盘事件 触发条件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按下时被触发
onkeypress 某个键盘按键被按下时触发 但不能识别功能键 ctrl 等

注意:

  • 如果使用 addEventListener 不需要加 on
  • onkeypress 和前面两个的区别,它不识别功能健,比如左右箭头,shift 等
  • 三个事件的执行顺序: keydown keypress keyup

# 键盘事件对象

键盘事件对象属性 说明
keyCode 返回该健的 ASCll 值

注意:

  • onkeydown 和 onkeyup 不区分大小写,onkeypress 区分字母大小写,在实际开发中,我们更多的使用 keydown 和 keyup,他能识别所有的健(包括识别功能健),keypress 不识别功能键,但是 keyCode 区分大小写,返回不同的 ASCll 值
  • keyup 事件触发的时候,输入的按键已经被输入
  • keydown 和 keypress 事件触发,是先触发事件,再输入按键
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

Baozi 微信支付

微信支付

Baozi 支付宝

支付宝

Baozi 微信

微信