JavaScript基础进阶——WebAPI—DOM-事件高级

最新推荐文章于 2023-10-03 21:29:43 发布

m0_52001826

最新推荐文章于 2023-10-03 21:29:43 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_52001826/article/details/126688595

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了JavaScript中的事件处理，包括注册和删除事件的两种方式，DOM事件流的三个阶段，事件对象的使用，如何阻止事件冒泡以及事件委托的概念和原理。重点讲解了addEventListener和removeEventListener方法，事件对象的target属性和preventDefault方法，以及常见的鼠标和键盘事件。通过实例展示了事件委托在处理列表元素事件时的高效性，并提供了阻止右键菜单和选中文字的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、注册事件(绑定事件）

1.1、元素注册的两种方式

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

传统方式：元素名.on开头的事件 = function（）{}

方法监听方式：addEventListener（type，listener[，useCaptrue]）

该方法将指定的监听器注册到eventTArget（事件对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

type：事件类型字符串不带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCaptrue:可选参数，是一个布尔值，默认时false，代表事件流为冒泡事件

2、删除事件

2.1、删除事件的两种方式

传统方式：元素名.on开头的事件名 = null 可以实现解绑事件

监听方式：removeEventListener（type，函数名）

<script>
        var div = document.querySelector('div');
        //传统
        // div.onclick = function(){
        //     alert('111');
        //     div.onclick = null;
        // }
        //监听
        div.addEventListener('click',fn);
        function fn(){
            alert(111);
            div.removeEventListener('click',fn);
        }
        
    </script>

3、DOM事件流

3.1、DOM事件流概述

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

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

3.2、DOM事件流的三个阶段

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

注意：

js代码只能执行捕获或者冒泡其中一个阶段
onclick和attachEvent（IE）只能得到冒泡阶段
捕获阶段参数（useCapture）为true
冒泡阶段参数为false 默认为false

4、事件对象

4.1、事件对象概述

写在监听函数的小括号里面，当作形参来使用。

事件对象有了事件才存在，是系统自动生成的，不需要我们设置
事件对象是事件的一系列相关数据的集合，例如鼠标坐标，点击对象等
事件对象由为我们自己命名，没有特定的命名规则
事件对象 ie9以上才可以使用

4.2、事件对象的常用属性和方法

4.2.1、e.target 返回触发事件的对象

e.target和this的区别：

this返回的绑定的对象
target返回的是触发事件的对象

4.2.2、e.preventDefault（）阻止默认行为

return false 也可以阻止，但是人return 后面的代码不执行，而且适用于传统方式注册的事件。

让链接不跳转等。

5、阻止事件冒泡

5.1、Dom推荐的标准方法

stopPropagation（） propagation 传播

6、事件委托

6.1、事件委托概述

事件委托也称为事件代理。

6.2、事件委托原理

给父节点设置事件监听器，利用冒泡原理影响子节点。

<ul>
        <li>
            知否知否
        </li>
        <li>
            知否知否
        </li>
        <li>
            知否知否
        </li>
        <li>
            知否知否
        </li>
        <li>
            知否知否
        </li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click',function(e){
            // alert('知否知否');
            e.target.style.backgroundColor = 'orange';
        })
    </script>

7、常用的鼠标事件

7.1、contextmenu禁用右键菜单

7.2、禁止选中文字selectstart()

8、常用的键盘事件

8.1、keyup

按键弹起的时候触发

8.2、keydown

按键按下的时候触发

8.3、keypress

按键按下的时候触发

不能识别功能键 ctrl等

8.4、键盘事件对象

keycode属性：可以得到相应键的ASCII码值。

<input type="text" id="search"> //设置文本框
    <script>
        var input = document.querySelector('#search');//获取元素
        document.addEventListener('keydown',function(e) {
            if (e.keyCode == 83){ //keycode 可以得到当前事件对象的ASCLL值 s的值为83
                input.focus(); //获得焦点
            }
            console.log(e.keyCode); 
        })
    </script>