黑马JavaScript核心操作BOM与DOM课程笔记2-事件高级

最新推荐文章于 2024-08-14 15:45:18 发布

Audrey2020

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量241

点赞数

分类专栏：前端JS核心操作DOM和BOM 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_42413901/article/details/124572251

版权

本文详细介绍了JavaScript中的事件处理，包括注册事件（绑定事件）的两种方式：传统方式和事件监听方式，特别是addEventListener和attachEvent。讲解了DOM事件流的三个阶段：捕获阶段、当前目标阶段、冒泡阶段。还探讨了事件对象，如何阻止事件冒泡，以及事件委托的概念和应用场景。此外，还讨论了常用的鼠标和键盘事件及其相关属性和方法。

摘要由CSDN通过智能技术生成

目标：
能够写出元素注册事件的两种方式
能够说出删除事件的两种方式
能够说出 DOM 事件流的三个阶段
能够利用事件对象完成跟随鼠标案例
能够封装阻止冒泡的兼容性函数
能够说出事件委托的原理
能够说出常用的鼠标和键盘事件

1. 注册事件（绑定事件）

1.1 注册事件概述

给元素添加事件，称为注册事件或者绑定事件。
注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式
利用 on 开头的事件 onclick

<button onclick=“alert('hi~')”></button>
btn.onclick = function() {
   }

特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

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

//注册事件两种方式
<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
   
            alert('hi');
        }
        btns[0].onclick = function() {
   
                alert('hao a u');
            }
            // 2. 事件侦听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 必定加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
   
            alert(22);
        })
        btns[1].addEventListener('click', function() {
   
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
   
            alert(11);
        })
    </script>
</body>

1.2 addEventListener 事件监听方式

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

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接收三个参数：
type：事件类型字符串，比如 click 、mouseover ，注意这里不要带 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

1.3 attachEvent 事件监听方式

 eventTarget.attachEvent(eventNameWithOn, callback)

eventTarget.attachEvent()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。
该方法接收两个参数：
eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on
callback：事件处理函数，当目标触发事件时回调函数被调用
注意：IE8 及早期版本支持

1.4 注册事件兼容性解决方案

 function addEventListener(element, eventName, fn) {
   
      // 判断当前浏览器是否支持 addEventListener 方法
      if (element.addEventListener) {
   
        element.addEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.attachEvent) {
   
        element.attachEvent('on' + eventName, fn);
      } else {
   
        // 相当于 element.onclick = fn;
        element['on' + eventName] = fn;
 }

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

2. 删除事件（解绑事件）

2.1 删除事件的方式

传统注册方式

eventTarget.onclick = null;

方法监听注册方式

1、eventTarget.removeEventListener(type, listener[, useCapture]);//ie9以下不兼容
2、eventTarget.detachEvent(eventNameWithOn, callback);//IE9以下兼容

2.2 删除事件兼容性解决方案

 function removeEventListener(element, eventName, fn) {
   
      // 判断当前浏览器是否支持 removeEventListener 方法
      if (element.removeEventListener) {
   
        element.removeEventListener(eventName, fn);  // 第三个参数 默认是false
      } else if (element.detachEvent) {
   
        element.detachEvent('on' + eventName, fn);
      } else {
   
        element['on' + eventName] = null;
 }

<style>
        div {
   
            width: 100px;
            height: 100px;
            background-color: pink;
        }
</style>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
   
                alert(11);
                // 1. 传统方式删除事件
                divs[0].onclick = null;
            }
            // 2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn) // 里面的fn 不需要调用加小括号

        function fn() {
   
            alert(22);
            divs[1].removeEventListener('click', fn);
        }
        // 3. detachEvent
        divs[2].attachEvent('onclick', fn1);

最低0.47元/天解锁文章

Audrey2020

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
黑马JavaScript核心操作BOM与DOM课程笔记2-事件高级

目标：能够写出元素注册事件的两种方式能够说出删除事件的两种方式能够说出 DOM 事件流的三个阶段能够利用事件对象完成跟随鼠标案例能够封装阻止冒泡的兼容性函数能够说出事件委托的原理能够说出常用的鼠标和键盘事件1. 注册事件（绑定事件）1.1 注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式传统注册方式利用 on 开头的事件 onclick<button onclick=“alert('hi~')”></butt
复制链接

扫一扫