js学习笔记——（11）DOM事件高级（DOM事件对象、阻止事件冒泡、鼠标事件、键盘事件）

最新推荐文章于 2023-11-17 19:57:30 发布

脸红流氓兔

最新推荐文章于 2023-11-17 19:57:30 发布

阅读量298

点赞数

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

本文链接：https://blog.csdn.net/qq_41860287/article/details/105511721

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一、注册事件（绑定事件）

1.1注册事件概述

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

传统注册方式

利用on开头事件onclick
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

方法监听注册方式

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

1.2addEventListener事件监听方式

eventTarget.addEventListener(type, listener[, useCapture])

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

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

1.3attachEvent 事件监听方式（IE9以下）

eventTarget . att achEvent (eventNamewi thon，callback)
eventrarget . attachEvent ()方法将指定的监听器注册到eventrarget (目标对象)上,当该对象触
发指定的事件时,指定的回调函数就会被执行。
该方法接收两个参数:

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

1.4注册事件兼容性解决方案

function addEventListener (element, eventName, fn) {
//判断当前浏览器是否支持addEventListener方法
	if (element.addEventListener) {
		element.addEventListener (eventName, fn); // 第三个参数默认是false
	} else if (element.attachEvent) {
		element.attachEvent('on' + eventName，fn);
	} else {
//相当于element .οnclick= fn;
	element[ 'on' + eventName] = fn;
	}
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>注册事件</button>
    <button>方法监听注册事件</button>
    <button>IE9</button>

    <script>
        //1.传统方式注册事件
        var btns = document.querySelectorAll('button');
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hello');
            }
            //2.事件侦听注册事件  addEventListener里面的事件类型是字符串  必定加引号  而且不带on
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            //3.attachEvent  ie9以前版本
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>
</body>

</html>

二、删除事件

2.2删除事件的方式

1.传统注册方式

eventTarget.onclick = null;

2.方法监听注册方式

eventTarget.removeEventListener(Type, listener[, useCapture])

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>


<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
<script>
    var divs = document.querySelectorAll('div');
    divs[0].onclick = function() {
            alert(11);
            //1.传统方式删除事件
            divs[0].onclick = null;
        }
        //2.removeEventListener  删除事件
    divs[1].addEventListener('click', fn); //里面的fn不需要调用加小括号

    function fn() {
        alert(22);
        divs[1].removeEventListener('click', fn);
    }
    //3.
    divs[3].attachEvent('onclick', fn1);

    function fn1() {
        alert(33);
        div[2].detattachEvent('onclick', fn1);
    }
</script>

</html>

三、DOM事件流

事件流描述的是从页面中接收事件的顺序

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

DOM事件流分为3个阶段：

1.捕获阶段

2.当前目标阶段

3.冒泡阶段
在这里插入图片描述
事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程

事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收过程

在这里插入图片描述
注意：

（1）JS代码中只能执行捕获或者冒泡其中的一个阶段
（2）onclick和attachEvent只能得到冒泡阶段
（3）addEventListener(type, listener, [, useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序，如果是false（不写就默认为false），表示在事件冒泡阶段调用事件处理程序。
（4）实际开发中我们很少使用捕获事件，我们更关注事件冒泡
（5）有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 300px;
            height: 300px;
            margin: 50px;
            background-color: purple;
            line-height: 300px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //捕获阶段  如果 addEventListener  第三个参数是 true 那么处于捕获阶段
        //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);
        //冒泡阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        });
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        });
        document.addEventListener('click', function() {
                alert('document');
            })
    </script>
</body>

</html>

四、事件对象

4.1什么是事件对象？

eventTarget. onclick = function (event) {}
eventTarget . addEventListener(‘click’, function(event) {})

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

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

比如：①谁绑定了这个事件②鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置③键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去，当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

4.2事件对象兼容性方案

事件对象本身的获取存在兼容问题:
1.标准浏览器中是浏览器给方法传递的参数,只需要定义形参e就可以获取到。
2.在IE6~8中,浏览器不会给方法传递参数,如果需要的话,窝要到window.event中获取查找。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

        //     console.log(event);

        // }
        div.addEventListener('click', function(e) {
            console.log(e);
        })
    </script>
</body>

</html>

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

在这里插入图片描述
五、阻止冒泡事件

5.1阻止事件冒泡的两种方式

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

阻止事件冒泡

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

5.2阻止事件冒泡的兼容性解决方案

  if (e && e.stopPropagation){
            e.stopPropagation;
  }else{
            window.event.cancelBubble = true;
  }

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            overflow: hidden;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 300px;
            height: 300px;
            margin: 50px;
            background-color: purple;
            line-height: 300px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //捕获阶段  如果 addEventListener  第三个参数是 true 那么处于捕获阶段
        //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);
        //冒泡阶段
        var son = document.querySelector('.son');
        son.addEventListener('click', function(e) {
            alert('son');
            e.stopPropagation();
            e.cancelBubble = true;
        });
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        });
        document.addEventListener('click', function() {
                alert('document');
            })
            //兼容性解决方案
            // if (e && e.stopPropagation){
            //     e.stopPropagation;
            // }else{
            //     window.event.cancelBubble = true;
            // }
    </script>
</body>

</html>

六、事件委托（代理、委托）

事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派

事件委托的原理

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

事件委托作用

我们只操作了一次DOM，提高了程序的性能

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>弹框</li>
        <li>弹框</li>
        <li>弹框</li>
        <li>弹框</li>
        <li>弹框</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lis = document.querySelectorAll('li');
        ul.addEventListener('click', function(e) {
            // alert('弹框');
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = '';
                e.target.style.backgroundColor = 'pink';
            }

        })
    </script>
</body>

</html>

七、常用的鼠标事件

7.1常用的鼠标事件
在这里插入图片描述

1.禁止鼠标右键菜单

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

document.addEventListener('contextmenu', function(e){
		e.preventDefault();
})

2.禁止鼠标选中（selectstart 开始选中）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    我是一段不愿意分享的文字
    <script>
        //1.contextmenu  我们可以禁用右键菜单
        document.addEventListener('contextmenu', function(e) {
                e.preventDefault();
            })
            //2.禁止选中文字
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>

</html>

7.2鼠标事件对象

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        //鼠标事件对象MouseEvent
        document.addEventListener('click', function(e) {
            //1.client  鼠标在可视区的x和y坐标
            console.log(e.clientX);
            console.log(e.clientY);
            console.log('……………………………………………………');

            //2.page  鼠标在页面文档的x和y坐标
            console.log(e.pageX);
            console.log(e.pageY);

        })
    </script>
</body>

</html>

图片跟随鼠标移动案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            top: 2px;
        }
    </style>
</head>

<body>
    <img src="angel.gif" alt="">
    <script>
        var pic = document.querySelector('img')
        document.addEventListener('mousemove', function(e) {
            //1.mousemove  只要我们鼠标移动1px  就会触发这个事件
            // console.log(1);
            var x = e.pageX;
            var y = e.pageY;
            console.log('X坐标是' + x, 'Y坐标是' + y);
            //不要忘记添加px 单位
            pic.style.left = x - 50 + 'px';
            pic.style.top = y - 40 + 'px';
        });
    </script>
</body>

</html>

八、常用的键盘事件

8.1常用键盘事件

事件除了使用鼠标触发，还可以使用键盘触发

在这里插入图片描述
注意：

1.如果使用addEventLiatener不需要加on

2.onkeypress 不识别功能键，比如左右箭头 shift等

3.三个事件的执行顺序：keydown > keypress >keyup

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>
        //1.keyup按键弹起的时候触发
        // document.onkeyup = function() {
        //         console.log('我弹起了');

        //     }
        //2.keydown  按键按下的时候触发
        // document.addEventListener('keydown', function() {
        //         console.log(1111);

        //     })
        //3.keypress 按键按下的时候触发  不能识别功能键
        document.addEventListener('keypress', function() {
                console.log(2222);

            })
            //4.三个事件的执行顺序  keydown >  keypress  >keyup
    </script>
</body>

</html>

8.2键盘事件对象

在这里插入图片描述
注意：onkeyup和onkeydown事件不区分字母大小写，onkeypress区分字母大小写
在我们实际开发中，我们更多使用keydown和keyup，它能识别所有的键（包括功能键）
keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值

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

<head>
    <meta charset="UTF-8">
    <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('up:' + e.keyCode);
            //我们可以利用keycode返回的ASCII码值来判断用户按下了哪个键
            if (e.keyCode === 65) {
                alert('你按下的a键');
            } else {
                alert('你没有按下a键');
            }


        })
        document.addEventListener('keypress', function(e) {
            // console.log(e);
            console.log('press:' + e.keyCode);


        })
    </script>
</body>

</html>

京东按键输入内容：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

        })
    </script>
</body>

</html>

模拟京东查询快递单号：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid rgb(0, 0, 0, .2);
            box-shadow: 0 2px 4px rgb(0, 0, 0, .2);
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入你的快递单号" class="jd">
    </div>
    <script>
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
            if (this.value == '') {
                con.style.display = 'none';
            } else {
                con.style.display = 'block';
                con.innerHTML = this.value;
            }
            //当我们失去焦点  隐藏con盒子   
            jd_input.addEventListener('blur', function() {
                    con.style.display = 'none';
                })
                //当我们获得焦点  显示con盒子   
            jd_input.addEventListener('focus', function() {
                if (this.value != 0) {
                    con.style.display = 'block';
                }
            })
        })
    </script>
</body>

</html>