Web API 事件(高级) —— 事件委托、常用鼠标事件

最新推荐文章于 2024-04-07 16:58:04 发布

没人回复我哼

最新推荐文章于 2024-04-07 16:58:04 发布

阅读量386

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_45645902/article/details/105671381

版权

本文介绍了JavaScript中的事件委托技术，通过给父元素注册事件来替代为每个子元素单独设置，从而提高性能并能处理动态添加的元素。同时，讲解了常见的鼠标事件，包括禁止选中文字、禁止右键菜单，以及如何获取鼠标在页面的坐标，并通过一个案例展示了如何实现天使图片跟随鼠标移动的效果。

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

5、事件委托

事件冒泡本身的特性，会带来的坏处，也会带来的好处。

什么是事件委托

把事情委托给别人，代为处理

事件委托也称为事件代理，在 jQuery 里面称为事件委派。

说白了就是，不给予元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

js事件中的代理：

    <ul>
        <li> li 一号</li>
        <li> li 二号</li>
        <li> li 三号</li>
    </ul>

点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问DOM的次数越多，就会延长整个页面的交互就绪时间。

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。(给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。)

例如上面的案例：给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li ，因为点击 li ，时间就会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。

事件委托的作用

只操作了一次 DOM ，提高了程序的性能。
动态新创建的子元素，也拥有事件。

<body>
    <ul>
        <li> li 一号</li>
        <li> li 二号</li>
        <li> li 三号</li>
    </ul>
    <script>
        // 事件委托的核心原理：给父节点添加监听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            // e.target 可以得到我们点击的对象
            e.target.style.backgroundColor = 'red';
            console.log(e.target.innerHTML);
        })
    </script>
</body>

在这里插入图片描述

6、常用鼠标事件

在这里插入图片描述

禁止选中文字和禁止右键菜单

禁止鼠标选中

        // selectstart 开始选中
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })

禁止鼠标右键菜单

        // contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        })

示例

<body>
    我是一段不愿意分享的文字
    <script>
        // contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        })
        // selectstart 开始选中
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })
    </script>
</body>

鼠标事件对象

在这里插入图片描述

获取鼠标在页面的坐标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        // 鼠标事件对象 MouseEvent
        document.addEventListener('click', function (e) {
            // client 鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('---------------------');
            // page 鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);
            console.log('---------------------');
            // screen 鼠标在电脑屏幕的x和y坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
</body>

</html>

在这里插入图片描述

案例：跟随鼠标的天使

要求
天使图片跟随鼠标移动

思路
鼠标不断的移动，使用鼠标移动事件：mousemove
在页面中移动，给 document 注册事件
图片要移动距离，而且不占位置，使用绝对定位即可
每次鼠标移动，都会获得最新的鼠标坐标，把这个x和y坐标做为图片的 top 和 left 值就可以移动图片

<body>
    <a href="http://baidu.com">百度</a>
    <img src="images/angel.gif" alt="" style="position: absolute; top: 2px;">
    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            // mousemove 只要鼠标移动1px，就会触发这个事件
            // 每次鼠标移动，都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片
            var x = e.pageX;
            var y = e.pageY;
            console.log('x坐标是' + x, 'y坐标是' + y);
            // 千万不要忘记给left 和top 添加px 单位
            img.style.left = x + 'px';
            img.style.top = y + 1 + 'px';
        });
    </script>
</body>