【如果你要学JS XV】——趣学[ 阻止冒泡事件、常见的鼠标事件和键盘事件 ]

原创

像素人

发布于 2023-12-28 22:39:38

7450

发布于 2023-12-28 22:39:38

文章被收录于专栏：如果你要学JS如果你要学JS

导绪

在我们进行target和this的使用中如何区分this的指向问题呢？怎么才能阻止冒泡事件？
在js中常用的鼠标事件和键盘事件，在实开发中会遇到很多的地方需要用到这些比如mousemove，keydown等，本篇就来了解一下这些吧！

1.e.target与this的区别

简单来说就是this指向的是绑定事件的元素，e.target返回的是所触发事件的元素

<script>
        // e.target返回的是触发事件的对象(元素)     this返回的是绑定事件的对象(元素)
        var div = document.querySelector('div');
        div.addEventListener('click', function (e) {
            console.log(e.target);
            console.log(this);
        })
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            // e. target 指向我们点击的那个对象谁触发了这个事件我们点击的是li e. target 指向的就是1i
            console.log(e.target);
            // 绑定ul，那么this指向的就是我们所绑定的ul
            console.log(this);
        })
    </script>

2.阻止默认行为

<body>
    <div>666</div>
    <a href="https://www.baidu.com/">666</a>
    <form action="https://www.baidu.com/">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);
        function fn(e) {
            console.log(e.type);
        }
        // e.preventDefault()该方法阻止默认事件(默认行为)标准比如不让链接跳转
        var a = document.querySelector('a');
        a.addEventListener('click', function (e) {
            e.preventDefault();
        })
        // 利用return也能进行一个阻止默认事件 特点return后面的代码不执行 只能用于传统的方式哦
        a.onclick = function (e) {
            return false;
        }
    </script>

注意:return false;只能用在传统的方法上，并且它后面的代码不执行

3.阻止冒泡事件*

为什么要阻止冒泡事件？

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

事件冒泡本身的特性,会带来的部分坏处需要我们灵活使用。

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

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
            var son = document.querySelector('.son');
            son.addEventListener('click', function (e) {
                alert('son');
                e.stopPropagation();
            }, false);
        
            var father = document.querySelector('.father');
            father.addEventListener('click', function () {
                alert('father')
            }, false);
        </script>
</body>

4.事件委托

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

<body>
    <ul>
        <li>小li小li，漂亮的lili</li>
        <li>小li小li，漂亮的lili</li>
        <li>小li小li，漂亮的lili</li>
        <li>小li小li，漂亮的lili</li>
        <li>小li小li，漂亮的lili</li>
    </ul>
    <script>
        // 事件委托的核心原理:给父节点添加侦听器，利用事件冒泡影响每一个子节点
 
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            e.target.style.backgroundColor = 'chartreuse';
        })
    </script>
</body>

5.鼠标点击事件

5.1鼠标事件禁止页面文本复制

contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单

禁止选中文字selectstart

<body>
    我的地盘我做主！
    <script>
        // 1. contextmenu 我们可以禁用右键菜单
        document.addEventListener('contextmenu', function (e) {
            e.preventDefault();
        })
        // 2.禁止选中文字selectstart
        document.addEventListener('selectstart', function (e) {
            e.preventDefault();
        })
 
    </script>
</body>
5.2鼠标点击获取坐标
<body>
    <script>
        document.addEventListener('click', function (e) {
            // client返回鼠标相对于浏览器窗口可视区的坐标
            console.log(e.clientX);
            console.log(e.clientY);
            // page返回鼠标相对于文档页面的坐标
            console.log(e.pageX);
            console.log(e.pageY);
            // screen返回鼠标相对于电脑屏幕的X坐标
            console.log(e.screenX);
            console.log(e.screenY);
        })
    </script>
</body>

5.3鼠标跟随事件

注：不要忘记给img一个绝对定位哦

<style>
        img {
            position: absolute;
            top: 20px;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
 
<body>
    <img src="./img/shanyu.jpg" alt="">
    <script>
        var pic = document.querySelector('img');
        document.addEventListener('mousemove', function (e) {
            // 1.mousemove只要鼠标移动1px就会触发这个事件
            var x = e.pageX;
            var y = e.pageY;
            pic.style.left = x - 30 + 'px';
            pic.style.top = y - 30 + 'px';
        })
    </script>
</body>

6.键盘事件

使用addEventListener不需要加on

<body>
    <script>
        // 这三个的执行顺序为down press up
        document.addEventListener('keyup', function () {
            console.log('弹起来！');
        })
        //2. keydown 按键按下的时候触发不识别功能键比如ctrl shift 左右箭头啊
        document.addEventListener('keydow', function () {
            console.log('把down按下去！');
        })
        //2. keypress 按键按下的时候触发不识别功能键比如ctrl shift 左右箭头啊
        document.addEventListener('keyup', function () {
            console.log('把press按下去！');
        })
    </script>
</body>