webApi（二）事件高级

小满不吃香菜

已于 2022-03-02 08:58:01 修改

阅读量299

点赞数

分类专栏：前端文章标签：前端 javascript DOM

于 2022-03-02 08:55:47 首次发布

本文链接：https://blog.csdn.net/fjd7474/article/details/123221459

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件高级

1 绑定和解绑事件

1.1 绑定事件

给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式

（1）传统注册方式：利用 on 开头的事件 onclick
特点：注册事件唯一性，同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数
（2）addEventListener 方法监听注册方式： addEventListener() 方法
特点：同一个元素同一个事件可以注册多个监听器按注册顺序依次执行

方法和参数

eventTarget.addEventListener(type, listener, useCapture)；

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

btn.addEventListener('click', function() {
    alert('hello world');
});

1.2 解绑事件

传统的监听解绑用eventTarget.onclick = null;，方法监听注册方式用removeEventListener

eventTarget.removeEventListener(type, listener, useCapture)

<body>
    <div>点我</div>
    <div>点我</div>

    <script>
        var divList = document.getElementsByTagName('div');
        divList[0].onclick = function() {
            alert(111);
            this.onclick = null;
        }

        divList[1].addEventListener('click', fun);
        function fun() {
            alert(222);
            this.removeEventListener('click', fun);
        }
    </script>
</body>

1.3 DOM 事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

比如我们给一个div 注册了点击事件,DOM 事件流分为3个阶段：

捕获阶段: 由 DOM 最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程
当前目标阶段
冒泡阶段 : 事件开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点的过程

在这里插入图片描述

注意：

JS 代码中只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent 只能得到冒泡阶段
addEventListener第三个参数如果是 true，表示在事件捕获阶段。用事件处理程序；如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序
实际开发中我们很少使用事件捕获，我们更关注事件冒泡
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件

下面是先son后father, 因为是冒泡的

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

    <script>
        var son = document.querySelector('.son');
        var parent = son.parentElement;
        son.addEventListener('click', function() {
            alert('son');
        });

        parent.addEventListener('click', function() {
            alert('father');
        });
    </script>
</body>

是先father后son, 因为是冒泡的

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

    <script>
        var son = document.querySelector('.son');
        var parent = son.parentElement;
        son.addEventListener('click', function() {
            alert('son');
        }, true);

        parent.addEventListener('click', function() {
            alert('father');
        }, true);
    </script>
</body>

2 事件对象

2.1 什么是事件对象

代码里的event 就是事件对象，我们还喜欢的写成 e 或者 evt

		div.onclick = function(event) {
            console.log(event);
        }
        div.addEventListener('click', function(event) {
            console.log(event);
        })

event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

事件对象有兼容性问题，ie678通过windows.event, 兼容性写法：e = event || windows.event

2.2 事件对象的常见属性和方法

在这里插入图片描述
例如，阻止链接跳转

	  // 阻止默认行为，让链接不跳转，或让提交按钮不提交
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
            // 阻止跳转行为
            e.preventDefault();
        })

阻止链接冒泡
e.stopPropagation()

2.3 事件委托（代理、委派）

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

	<ul>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
        <li>知否知否，应是绿肥红瘦</li>
    </ul>

如果要点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间。利用事件委托可以给 ul 注册点击事件，然后利用事件对象的 target 来找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器

    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('知否知否，应是绿肥红瘦');
            e.target.style.backgroundColor = 'pink';
        })
    </script>

2.4 常用的鼠标事件

2.4.1 基础鼠标事件

在这里插入图片描述

2.4.2 禁止鼠标选中文字和右键菜单

    <script>
        // 禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        });
    </script>

2.4.3 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段主要是用鼠标事件对象PointerEvent 和键盘事件对象 KeyboardEvent。

2.4.3.1 e.target和this区别

e.target返回的是触发事件的对象， this返回的是绑定事件对象

    <script>
        // e.target返回的是触发事件的对象， this返回的是绑定事件对象
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            console.log(e.target);   // li
            console.log(this);    // ul
        })
    </script>

2.4.3.2 鼠标事件对象属性

在这里插入图片描述

2.4.3.3 跟随鼠标的天使

    <style>
        img {
            position: absolute;
        }
    </style>

<body>
    <img src="images/angel.gif">

    <script>
        var img = document.querySelector('img');
        document.addEventListener('mousemove', function(e) {
            var x = e.pageX;
            var y = e.pageY;
            img.style.left = x - 50 + 'px';
            img.style.top = y - 40 + 'px';
        })
    </script>
</body>

2.5 常用的键盘事件

2.5.1 常用的键盘事件

keyup : 某个键盘弹起时
keydown：某个键盘按下时
keypress：非功能键按下时

三个键盘事件执行顺序是：keydown -- keypress --- keyup

<body>
    <script>
        document.addEventListener('keyup', function() {
            console.log('键盘弹起');
        });
        document.addEventListener('keydown', function() {
            console.log('键盘按下');
        });
        document.addEventListener('keypress', function() {
            console.log('非功能键按下');
        });
    </script> 
</body>

2.5.2 键盘事件对象

keyCode: 返回该键的ascall值

keyup和keydown的keyCode不区分大小写，'a’和’A’都是65
keypress的keyCode区分大小写，'a’是65, 'A’是97
在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键（包括功能键）

2.5.3 模拟京东按键输入内容

当按下 s 键，光标就定位到搜索框

<body>
    <div class="search">
        <input placeholder="打印机">
        <button>搜索</button>
    </div>

    <script>
        var input = document.querySelector('input');
        document.addEventListener('keyup', function(e) {
            if(e.keyCode === 83) {
                input.focus();
            }
        })
    </script>
</body>