【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?

简介: 【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?

前言


在我们进行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>
目录
相关文章
|
9天前
|
JavaScript 前端开发 索引
问js的forEach和map的区别
JavaScript中的`forEach`和`map`都是数组迭代方法。`forEach`遍历数组但不修改原数组,无返回值;它接受回调函数处理元素。`map`则遍历数组并返回新数组,新数组元素为回调函数处理后的结果。两者都接收元素、索引和数组作为回调函数参数。
18 7
|
12天前
|
JavaScript 前端开发
JS require 与 import 的区别
JS require 与 import 的区别
14 1
|
21天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
20 2
|
22天前
|
自然语言处理 JavaScript 网络架构
js开发:请解释什么是ES6的箭头函数,以及它与传统函数的区别。
ES6的箭头函数以`=&gt;`定义,简化了函数写法,具有简洁语法和词法作用域的`this`。它无`arguments`对象,不能用作构造函数,不支持`Generator`,且不改变`this`、`super`、`new.target`绑定。适用于简短表达式,常用于异步编程和高阶函数。
17 5
|
23天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
18 0
|
1月前
|
JavaScript 前端开发 网络架构
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
JavaScript 谈谈对箭头函数的理解及其与普通函数的区别。
15 1
|
1月前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
10天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
|
12天前
|
JavaScript 前端开发 流计算
JS:oninput和onchange事件的区别
JS:oninput和onchange事件的区别
15 1
|
21天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
13 2