WebAPI(part12)--事件高级-CFANZ编程社区

学习笔记，仅供参考，有错必究

文章目录

事件高级

注册事件

addEventListener 事件监听方式
attachEvent事件监听方式
案例

删除事件(解绑事件)

删除事件的方式
案例

DOM事件流
事件对象

案例
事件对象的常见属性和方法
target和this的区别
阻止默认行为
阻止冒泡

事件委托

事件委托原理

常用鼠标事件

禁止选中文字
获得鼠标在页面中的坐标

常用键盘事件

事件高级

注册事件

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

WebAPI(part12)--事件高级_html

addEventListener 事件监听方式

EventTarget.addEventListener(type, listener, useCapture);

该方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时，就会执行事件处理函数.

该方法接受3个参数：

type: 表示监听事件类型的字符串;
listener: 事件处理函数，事件发生时，会调用该监听函数;
useCapture: 布尔值，默认为false

attachEvent事件监听方式

EventTarget.attachEvent(eventNameWithOn, callback);

EventTarget.attachEvent()方法将指定的监听器注册到eventTarget上，当该对象触发指定的事件时，指定的回调函数就会被执行.

该方法接收两个参数：

eventNameWithOn: 事件类型字符串，比如onclick、onmouseover，这里要带on
callback: 事件处理函数，当目标触发事件时回调函数被调用.

案例

<!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>按钮1</button>
    <button>按钮2</button>

    <script>
        var btns = document.querySelectorAll("button");

        // 传统方式注册
        btns[0].onclick = function() {
            alert("A 弹出1");
        }

        btns[0].onclick = function() {
            alert("A 弹出2");
        }

        // 事件侦听注册事件 addEventListener
        // 里面的事件类型是字符串必定加引号而且不带on
        // 同一个元素同一个事件可以添加多个侦听器（事件处理程序）

        btns[1].addEventListener("click", function() {
            alert("B 弹出1");
        })

        btns[1].addEventListener("click", function() {
            alert("B 弹出2");
        })

    </script>
</body>
</html>

删除事件(解绑事件)

删除事件的方式

WebAPI(part12)--事件高级_事件对象_02

案例

<!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>
    div {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>

</head>
<body>
    <div>1</div>
    <div>2</div>
    <script>

        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert("弹出1");
            divs[0].onclick = null;
        }

        divs[1].addEventListener("click", fn);

        function fn() {
            alert("弹出2");
            divs[1].removeEventListener("click", fn);
        }
    </script>
</body>
</html>

DOM事件流

视频地址：DOM事件流代码验证 .

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

比如我们给一个div注册了点击事件：

捕获阶段
当前目标阶段
冒泡阶段

事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点的过程。
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到到最具体的元素接收的过程。
WebAPI(part12)--事件高级_前端_03

注意：

Js代码中只能执行捕获或者冒泡其中的一个阶段。
onclick 和 attachEvent 只能得到冒泡阶段。

事件对象

案例

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>


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

    </script>
</body>
</html>

WebAPI(part12)--事件高级_html_04

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

WebAPI(part12)--事件高级_javascript_05

target和this的区别

e.target返回的是触发事件的对象（元素），而this返回的是绑定事件的对象（元素）

<!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>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

</head>
<body>
    <div>div</div>

    <ul>
        <li>A1</li>
        <li>A2</li>
    </ul>

    <script>
        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) {
            console.log(e.target);
            console.log(this);
        })

    </script>

</body>
</html>

WebAPI(part12)--事件高级_事件委托_06

阻止默认行为

<body>
    <a href="https://www.baidu.com/">百度</a>
    <a href="">CSDN</a>
    
<script>
    var a = document.querySelectorAll("a");
    a[0].addEventListener("click", function(e) {
        e.preventDefault();
    })

    a[1].onclick = function(e) {
        // 我们可以用return false的方法阻止默认事件发生，但是return后的代码不会执行.
        return false;
        alert("弹出");
    }

</script>

</body>