DOM - DOM事件高级

最新推荐文章于 2024-07-01 16:22:16 发布

友人A ㅤ

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量1k

点赞数

分类专栏： # JavaScript

本文链接：https://blog.csdn.net/qq_46025031/article/details/106332054

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1. 注册事件（绑定事件）

给元素添加事件，称为注册事件或绑定事件。

有两种方式：传统方式和方法监听注册方式

1.1 传统方式注册

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

    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        //唯一性原则，只会弹出1，不会弹出hi~
        btns[0].onclick = function() {
            alert('hi~');
        }
        btns[0].onclick = function() {
            alert('1'); 
        }
    </script>

1.2 方法监听注册方式

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

1）`addEventListener` 事件监听方式（IE9以上）

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

将指定的监听器注册到evevtTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

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

	<button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <script>
        var btns = document.querySelectorAll('button');
        //1. 传统方式注册事件
        //唯一性原则，只会弹出1，不会弹出hi~
        btns[0].onclick = function() {
            alert('hi~');
        }
        btns[0].onclick = function() {
            alert('1');
        }

        //2. 事件侦听注册事件 里面的事件类型是字符串，必须加引号，而且不带on
        //先弹出22，再弹出33
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
            alert(33);
        })
    </script>

2）`attachEvent` 事件监听方式（非标准）

eventTarget.attachEvent(evevtNameWithOn, callback)

将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收的两个参数：

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

2. 删除事件（解绑事件）

1. 传统注册方式

eventTarget.onclick = null;

2. 方法监听注册方式

eventTarget.removeEventListener(type, listener[ , useCaption]);
eventTarget.datachEvent(eventNameWithOn, callback);

	<div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            //1. 传统方式删除事件
            divs[0].onclick = null;
        }

        //2. removeEventListener 删除事件
        divs[1].addEventListener('click', fn)

        function fn() {
            alert(22);
            divs[1].removeEventListener('click', fn);
        }

        //3. eventTarget.datachEvent(eventNameWithOn, callback);
        divs[2].attachEvent('onclick', fn1);

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

3. DOM事件流

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

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

DOM事件流分为三个阶段：

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

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

注意：

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

	<style>
        .father {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            background-color: pink;
            text-align: center;
        }
        
        .son {
            width: 200px;
            height: 200px;
            margin: 50px;
            background-color: purple;
            line-height: 200px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        //dom事件流 三个阶段

        //捕获阶段
        //第三个参数是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');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);

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

4. 事件对象

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

        div.addEventListener('click', function(e) {
            console.log(e);

        })
    </script>

在这里插入图片描述

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

事件对象属性方法	说明	是否标准
e.target	返回触发事件的对象	标准
e.srcElement	返回触发事件的对象	非标注
e.type	返回事件的类型，比如 click、mouseover 不带on
e.cancelBubble	返回事件的类型	非标注 ie678使用
e.returnValue	该属性阻止默认事件（默认行为）	非标准，比如不让链接跳转
e.preventDefault()	该方法阻止默认事件（默认行为）	标准，比如不让链接跳转
e.stopPropagation()	阻止冒泡	标准

5. 阻止事件冒泡

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

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

阻止事件冒泡

标准写法：利用事件对象里面的 stopPropagation() 方法
e.stopPropagation()
非标准写法：IE6-8利用事件对象cancelBubble属性

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

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

6. 事件委托（代理、委派）

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

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

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

作用：
只操作了一次DOM，提高了程序的性能。

<body>
    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        // 事件委托的核心原理： 给父节点添加侦听器，利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // alert('123');
            // e.target可以得到点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

7. 常用的鼠标事件

7.1 常用的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1. 禁止鼠标右键菜单

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

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

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

document.addEventListener('selectstart', function(e) {
	e.preventDefaule();
})

7.2 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。

现阶段主要用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

8. 常用键盘事件

8.1 常用键盘事件

键盘事件	触发条件
onkeyup	某个键盘按键被松开时触发
onkeydown	某个键盘按键被按下时触发
onkeypress	某个键盘按键被按下时触发。但是它不识别功能键，如 ctrl、shift、箭头等

注意：

如果使用addEventListener不需要加on
onkeypress 不识别功能键，如 ctrl、shift、箭头等
三个事件的执行顺序：keydown – keypress – keyup

8.2 键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII值

注意：
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

实际开发中更多使用onkeydown 和 onkeyup ，因为它们可以识别所有键。

友人A ㅤ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
DOM - DOM事件高级

1. 注册事件（绑定事件）给元素添加事件，称为注册事件或绑定事件。有两种方式：传统方式和方法监听注册方式传统方式注册利用on开头的事件 onlick<button onclick = "alert(1)"></button>btn.onclick = function() {}特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 <button>传统注册事件</button>
复制链接

扫一扫