JS事件高级

最新推荐文章于 2023-11-10 17:29:37 发布

Pi皮蛋儿

最新推荐文章于 2023-11-10 17:29:37 发布

阅读量87

点赞数

分类专栏： JS 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50723416/article/details/115371028

版权

JS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

注册事件（绑定事件）

注册事件两种方式：传统方式、方法监听注册方式

传统方式：

利用on开头的事件 onclick
<button onclick = ’ alert( ’ hi~ ’ ) </ button> '>
btn.onclick = function ( ) { }
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

W3C标准推荐方式
addEventListener( ) 它是一个方法
IE9之前不支持，可使用attachEvent（）代替
特点：同一个元素，同一个事件可以注册多个监听器
按注册顺序依次执行

addEventListener 事件监听方式：eventTarget.addEventListener(type,listener[, useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
该方法接受三个参数：

type：事件类型字符串，比如 click、mouseover，注意这里不加 on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是false。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btn = document.querySelector('button');
        var btns = document.querySelectorAll('button');

        // 1.传统注册事件
        btns[0].onclick = function() {
            alert('hi~');
        }
        btns[0].onclick = function() {
            alert('How are you');
        }

        // 2.方法监听注册事件 addEventListener
        // (1) 里面的事件类型是字符串  必定加引号  而且不带 on
        // (2) 同一个元素 同一个事件可以添加多个侦听器(事件处理程序)
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
            alert(33);
        })
        
        // 3.attachEvent IE浏览器
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>
</body>

</html>

删除事件（解绑事件）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>传统方式删除事件（解绑事件）</button>
    <button>removeEventListener </button>
    <button>removeattach</button>
    <script>
        var btns = document.querySelectorAll('button');

        btns[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件（解绑事件）
            btns[0].onclick = null;
        };
        //--------------------------------------------------------------------------------------------------
        btns[1].addEventListener('click', fn) // 里面的 fn 不需要加小括号
        function fn() {
            alert(22);
            // 2. removeEventListener 删除事件（解绑事件）
            btns[1].removeEventListener('click', fn);
        };
        // ---------------------------------------------------------------------------------------------------
        btns[2].attachEvent('onclick', fun) // 里面的 fn 不需要加小括号
        function fun() {
            alert(33);
            // 3.attachEvent IE9以前 删除事件（解绑事件）
            btns[2].attachEvent('onclick', fun);
        }
    </script>
</body>

</html>

DOM事件流
事件流描述的是从页面中接受事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分3个阶段：捕获阶段、当前目标阶段、冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程。
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接受的过程。
在这里插入图片描述
注意

JS代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。
addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（默认false），表示在事件冒泡阶段调用事件处理程序。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: purple;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        
        .son {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>

    <script>
        // true 捕获阶段 document -> html -> body -> father -> son(目标)
        // var son = document.querySelector('.son');
        // son.addEventListener('click', function() {
        //     alert('son');
        // }, true);
        // var father = document.querySelector('.father');
        // father.addEventListener('click', function() {
        //     alert('father');
        // }, true);

        // false 冒泡阶段 son -> father -> body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        });
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        });
    </script>
</body>

</html>

事件对象
event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event它有很多属性和方法。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>event</button>
    <script>
        // 事件对象
        var btn = document.querySelector('button');
        btn.onclick = function (e){
            console.log(e);
            console.log(window.event);
            e = e || window.event; // 兼容性写法
            console.log(e);
        }
        // btn.addEventListener('click',function(e){
        //     console.log(e);
        // })
        // 1.event 就是一个事件对象 写在侦听函数的 小括号里 当形参来看
        // 2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
        // 3.事件对象 是 事件一系列相关数据的集合  跟事件相关的  比如鼠标点击里面就包含鼠标的相关信息，鼠标坐标等等，如果是键盘事件 就包含键盘事件信息 比如判断 用户按下那个 键
        // 4.这个事件可以自定义命名 比如 event、evt、e
        // 5.事件对象也有兼容性问题，IE678 通过window.event 兼容性写法 e = e || window.event;
    </script>
</body>

</html>

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>常见事件对象的属性和方法</button>
    <ul>
        <li>我是1</li>
        <li>我是2</li>
        <li>我是3</li>
    </ul>
    <script>
        var btn = document.querySelector('button');
        // 1. e.target 返回的是触发事件的对象(元素);  this 返回的是绑定事件对象
        btn.addEventListener('click', function(e) {
            console.log(e.target);
            console.log(this);
            console.log(e.currentTarget);
        });
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // 给 ul 绑定事件 那么 this 就指向 ul
            console.log(this);
            // e.target 指向的是点击的对象，谁触发事件，点击li e.target就指向 li 返回 li
            console.log(e.target);
        });
        // 兼容性写法
        // btn.onclick = function(e) {
        //     e = e || window.event;
        //     var target = e.target || e.srcElement;
        //     console.log(target);
        // }

        // 2.了解 跟 this 有个非常相似的属性  currentTarget
    </script>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>123</div>
    <a href="http://www.baidu.com">百度</a>
    <form action="http://www.baidu.com">
        <input type="submit" value="提交" name="sub">
    </form>
    <script>
        // 常见事件的属性和方法
        // 1. 返回事件类型
        var div = document.querySelector('div');
        div.addEventListener('click', fn);
        div.addEventListener('mouseover', fn);
        div.addEventListener('mouseout', fn);

        function fn(e) {
            console.log(e.type);
        }
        // 2. 阻止默认行为(事件) 
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            e.preventDefault(); // DOM 标准写法
        });
        // 3. 传统注册方式
        a.onclick = function(e) {
            // 普通浏览器 e.preventDefault();  方法
            // e.preventDefault();
            // 低版本浏览器 ie678 returnVlaue 属性
            // returnValue;
            // 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点：return 后面的代码不再执行，而且仅限于传统方式
            return false;
            alert(11);
        }
    </script>
</body>

</html>

阻止事件冒泡
事件冒泡：开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点。

标准写法：利用事件对象里的 stopPropagation()方法
非标准写法：IE 6-8 利用事件对象 cancelBubble属性

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: purple;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        
        .son {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>

    <script>
        // 常见事件对象的属性和方法
        // 阻止事件冒泡  DOM 推荐标准 stopPropagation()
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation(); // stop 停止  Propagation 传播
            e.cancelBubble = true; // -非标准 cancel 取消  Bubble 泡泡 
        }, false);

        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })

        // 阻止事件冒泡的兼容性写法
        if (e && e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubblt = true;
        }
    </script>
</body>

</html>

事件委托（代理、委派）

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

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

事件委托的作用：只操作一次DOM，提高程序性能。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>click 1</li>
        <li>click 2</li>
        <li>click 3</li>
    </ul>
    <script>
        // 事件委派原理：给父节点添加侦听器，利用事件冒泡影响每个字节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('click');
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

</html>

常用的鼠标事件
常用的键盘事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 键盘对象中的KeyCode 属性可以得到相应键的 ASCII码值
        // 1. keyup 和 keydown事件不区分字母大小写 a 和 A 得到的都是 65
        // 2. keypress 事件 区分字母大小写 a 97 和 A 得到的是 65
        document.addEventListener('keyup', function(e) {
            console.log(e);
            console.log(e.keyCode);
            // 可以利用 keyCode 判断用户按下那个键
            alert('您按下的键盘键号是' + e.keyCode)
        })
    </script>
</body>

</html>