DOM事件

最新推荐文章于 2024-06-08 16:17:53 发布

原创最新推荐文章于 2024-06-08 16:17:53 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#DOM #js

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析DOM事件模型，包括事件级别、事件流、冒泡与捕获机制，以及Event对象的应用。探讨了DOM0到DOM3的事件处理方式，自定义事件的创建与触发，和事件委托的概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM事件类

DOM事件的级别
DOM事件模型（冒泡、捕获）
DOM事件流
DOM事件捕捉的具体流程
Event对象的常见应用
自定义事件

DOM事件类

DOM0 element.οnclick=function(){}
DOM1 制定时没有和事件相关的东西
DOM2 element.addEventListener(‘click’,function(){},false)
DOM3 element.addEventListener(‘keyup’,function(){},false)//增加了事件捕获的类型，默认false为冒泡

事件捕捉的具体流程

捕获
window→document→html(document.documentElement)→body→……→目标元素
冒泡与上面相反

Event对象的常见应用

event.preventDefault() //预防当前默认事件
event.stopPropagation() //阻止事件在DOM中继续传播
event.stopImmediatePropagation()//加入函数中可以阻止其他同的函数执行,但是之前执行的阻止不了。

事件委托
event.currentTarget 绑定当前的事件的元素
event.target 当前的目标元素

自定义事件

var eve = new Event('eventName')
element.addEventListener('eventName',function(){
	//todo
})
element.dispatchEvent(eve);

相关代码

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

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

<body>
    <div id="ev">
        <style>
            #ev {
                width: 300px;
                height: 100px;
                background: red;
                color: white;
                text-align: center;
                line-height: 100px;
            }
        </style>
        目标元素
    </div>
    <script>
        var ev = document.getElementById('ev');

        window.addEventListener('click', function () {
            console.log('window capture')
        }, true)

        document.addEventListener('click', function () {
            console.log('document capture')
        }, true)

        document.documentElement.addEventListener('click', function () {
            console.log('html capture before')
        }, true)

        document.documentElement.addEventListener('click', function () {
            // event.stopImmediatePropagation();
            console.log('html capture')
            // event.stopPropagation();
            event.preventDefault();
        }, true)
        document.documentElement.addEventListener('click', function () {
            console.log('html capture after')
        }, true)


        document.body.addEventListener('click', function () {
            console.log('body capture')
        }, true)

        ev.addEventListener('click', function () {
            console.log('ev capture')
        }, true)

        var eve = new Event('test');
        ev.addEventListener('test', function () {
            console.log('test dispatch')
        })

        ev.dispatchEvent(eve)
    </script>
</body>

</html>