JavaScript---event事件处理对象_js event撖寡情-优快云博客

本文链接：https://blog.youkuaiyun.com/zheshiyangyang/article/details/147034072

一、什么是event对象

event对象是在事件触发时由浏览器自动创建的一个对象，它封装了与该事件相关的所有信息

当为元素绑定事件处理函数后，一旦相相应的事件触发，浏览器就会自动将这个event对象作为默认参数传递给事件处理函数。

二、event创建和传递

2.1内联事件处理函数【手动传入】

在HTML标签内直接定义事件处理函数时，需要显式地将event作为参数传递事件处理函数

<!DOCTYPE html>
<html>

<body>
    <button onclick="handleClick(event)">点击我</button>
    <script>
        function handleClick(event) {
            console.log('事件类型:', event.type);
        }
    </script>
</body>

</html>

2.2addEventListener【自动传入】

使用addEventListener方法绑定事件处理函数时，浏览器会自动地将event对象作为第一个参数传递给处理函数

<!DOCTYPE html>
<html>

<body>
    <button id="myButton">点击我</button>
    <script>
        const button = document.getElementById('myButton');
        button.addEventListener('click', function (event) {
            console.log('事件类型:', event.type);
        });
    </script>
</body>

</html>

三、event的常用属性

3.1事件目标相关

target：指向触发事件的最具体的元素。(例如，在一个列表中点击某个列表项，target就会指向该列表项元素)
可以简单理解为，给一个父元素绑定事件处理函数，target指向的是父元素中哪一个子元素

<!DOCTYPE html>
<html>

<body>
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
    </ul>
    <script>
        const ul = document.querySelector('ul');
        ul.addEventListener('click', function (event) {
            console.log('触发事件的元素:', event.target);
        });
    </script>
</body>

</html>

当点击不同列表项时，打印信息也不同：

currentTarget：指向绑定事件处理函数的元素。(在上面例子中，无论点击哪一个列表项，currentTarget始终指向<ul>)
可以简单理解为，currentTarget就是绑定事件处理函数的元素

<!DOCTYPE html>
<html>

<body>
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
    </ul>
    <script>
        const ul = document.querySelector('ul');
        ul.addEventListener('click', function (event) {
            console.log('触发事件的元素:', event.currentTarget);
        });
    </script>
</body>

</html>

当点击不同列表项时，始终打印：

3.2事件类型相关

type：表示事件的类型，如click、mousemove、keydown等

document.addEventListener('mousemove', function (event) {
    console.log('事件类型:', event.type);
});

3.3鼠标位置相关

clientX和clientY：表示鼠标点击或移动时相对于浏览器窗口可视区域左上角的坐标

document.addEventListener('mousemove', function (event) {
    console.log('鼠标位置 (X, Y):', event.clientX, event.clientY);
});

pageX和pageY：表示鼠标点击或移动时相对于整个文档左上角的坐标，考虑了页面滚动的情况

3.4按键相关

type：表示按下的键的字符值，如'a'、'Enter'等

document.addEventListener('keydown', function (event) {
    console.log('按下的键:', event.key);
});

code：表示按下的键的物理代码，如'keyA'、'Enter'等，它不依赖于键盘布局

四、event常用方法

4.1preventDefault()

用于阻止事件的默认行为。例如，点击链接时，默认会跳转到链接地址，使用preventDefault()可以阻止这种跳转

<!DOCTYPE html>
<html>

<body>
    <a href="https://www.baidu.com">点击我</a>
    <script>
        const link = document.querySelector('a');
        link.addEventListener('click', function (event) {
            event.preventDefault();
            console.log('阻止了链接跳转');
        });
    </script>
</body>

</html>

4.2stopPropagation()

用于停止事件冒泡(事件冒泡是指事件从触发的元素开始，依次向上级元素传播)

<!DOCTYPE html>
<style>
    #outer {
        width: 200px;
        height: 200px;
        background-color: #f00;
    }
    #inner {
        width: 100px;
        height: 100px;
        background-color: #0f0;
    }
</style>
<html>

<body>
    <div id="outer">
        <div id="inner">点击我</div>
    </div>
    <script>
        const outer = document.getElementById('outer');
        const inner = document.getElementById('inner');

        outer.addEventListener('click', function () {
            console.log('外层元素被点击');
        });

        inner.addEventListener('click', function (event) {
            event.stopPropagation();
            console.log('内层元素被点击');
        });
    </script>
</body>

</html>

当点击内层元素时，由于调用了stopPropagation()，事件不会再传播到外层元素，因此不会触发外层元素的点击事件处理函数

此时，只有当点击不同元素时，对应的事件处理函数会正确执行：

五、使用event进行事件委托

基于event.target属性，可以实现事件委托

事件委托是指将事件处理函数绑定到一个父元素上，利用事件冒泡机制，当子元素触发事件时，事件会冒泡到父元素，通过判断event.target来确定具体是哪一个子元素触发了事件，从而进行响应处理。

这样可以减少事件处理函数的绑定数量，提高性能

<!DOCTYPE html>
<html>

<body>
    <ul id="myList">
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
    </ul>
    <script>
        const list = document.getElementById('myList');
        list.addEventListener('click', function (event) {
            if (event.target.textContent === '列表项 1') {
                console.log('你点击了列表项1');
            }
            else {
                console.log('你点击了其他项');
            }
        });
    </script>
</body>

</html>

上面代码，只有点击列表项1才会打印对应的信息，否则统一打印其他信息：