DOM事件

时间：2018-04-14 16:21:07 阅读：232 评论：0 收藏：0 [点我收藏+]

标签：on() html 鼠标默认结果技术 var style UNC

基本概念：DOM事件的级别

DOM0 element.onclick=function(){}

DOM2 element.addEventListener(‘click",function(),false) IE是attachEvent

DOM3 element.addEventListener(‘keyup‘,function(),false)

没有DOM1，因为DOM1标注没有制定与事件相关的内容

DOM3与DOM2的绑定方式一样，只是增加了与键盘和鼠标相关的事件

DOM事件的模型

技术分享图片

事件捕获与冒泡的具体流程

技术分享图片

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DOMEvent</title>
</head>
<body>
<div id="parent">
    <p id="child" style="cursor: pointer">点击响应事件</p>
</div>
</body>
<script>
    window.addEventListener("click",
        function (ev) {
        console.log("window 捕获"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },true);
    document.addEventListener("click",
        function (ev) {
        console.log("document 捕获"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },true);
    document.getElementById("parent").addEventListener("click",
        function (ev) {
        console.log("parent 捕获"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },true);
    document.getElementById("child").addEventListener("click",
        function (ev) {
        console.log("child 捕获"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },true);


    window.addEventListener("click",
        function (ev) {
        console.log("window 冒泡"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },false);
    document.addEventListener("click",
        function (ev) {
        console.log("document 冒泡"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },false);
    document.getElementById("parent").addEventListener("click",
        function (ev) {
        console.log("parent 冒泡"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },false);
    document.getElementById("child").addEventListener("click",
        function (ev) {
        console.log("child 冒泡"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },false);
</script>
</html>

技术分享图片

从结果可以看出事件捕获和冒泡的顺序相反，记住第一个是window对象，ev.currentTarget指的是当前事件发生在哪个元素上，ev.target指的是响应事件的目标元素，也就是真正发生事件的元素，如上面代码的是p标签

DOM事件流

技术分享图片

在DOM兼容浏览器中，事件流分为3个阶段：

（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

（2）目标阶段：真正的目标节点正在处理事件的阶段；

（3）冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段

Event对象的常见应用

event.preventDefault()

阻止默认事件，比如一个a标签，用js代码给其绑定了一个事件，在响应函数中如果设置改属性就不会响应a的链接了

event.stopPropagation()

阻止冒泡

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>DOMEvent</title>
</head>
<body>
<div id="parent">
    <p id="child" style="cursor: pointer">点击响应事件</p>
</div>
</body>
<script>
    window.addEventListener("click",
        function (ev) {
        console.log("window 捕获"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },true);
    document.addEventListener("click",
        function (ev) {
        console.log("document 捕获"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },true);
    document.getElementById("parent").addEventListener("click",
        function (ev) {
        console.log("parent 捕获"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },true);
    document.getElementById("child").addEventListener("click",
        function (ev) {
        console.log("child 捕获"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },true);


    window.addEventListener("click",
        function (ev) {
        console.log("window 冒泡"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },false);
    document.addEventListener("click",
        function (ev) {
        console.log("document 冒泡"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        ev.stopPropagation();
        },false);
    document.getElementById("parent").addEventListener("click",
        function (ev) {
        console.log("parent 冒泡"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },false);
    document.getElementById("child").addEventListener("click",
        function (ev) {
        console.log("child 冒泡"+"target:"+ev.target+"currentTarget:"+ev.currentTarget);
        },false);
</script>
</html>

技术分享图片

可以看出我们在document元素的点击事件中加了ev.stopPropagetion()后后面的冒泡没有响应

event.stopImmediatePropagation()

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="a" style="cursor: pointer">点击这里</p>
</body>
<script>
    document.getElementById("a").addEventListener("click",function (ev) {
        console.log("这是先绑定的事件");
    });
    document.getElementById("a").addEventListener("click",function (ev) {
        console.log("这是后绑定的事件");
    });
</script>
</html>

技术分享图片

我们为一个元素添加了2个事件，这2个事件都会响应，谁先注册谁先响应

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="a" style="cursor: pointer">点击这里</p>
</body>
<script>
    document.getElementById("a").addEventListener("click",function (ev) {
        console.log("这是先绑定的事件");
        ev.stopImmediatePropagation();
    });
    document.getElementById("a").addEventListener("click",function (ev) {
        console.log("这是后绑定的事件");
    });
</script>
</html>

技术分享图片

如果加入event.stopImmediatePropagation()后，后面绑定的事件被阻止了

event.currentTarget 当前事件发生在哪个元素上

event.target 响应事件的目标元素

自定义事件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>CustomEvent</title>
</head>
<body>
<p id="a">自定义事件,点击这里</p>
</body>
<script>
    var eve=new Event(‘myEvent‘);
    document.getElementById("a").addEventListener(‘myEvent‘,
    function () {
        console.log("myEvent");
    })
    document.getElementById("a").addEventListener(‘click‘,
        function () {
            console.log("响应点击事件");
            this.dispatchEvent(eve)
        })
</script>
</html>

技术分享图片

用Element.dispatchEvent(eve)来执行自定义事件eve变量为你new Event("myEvent")

自定义事件的好处：让模块解耦

DOM事件

标签：on() html 鼠标默认结果技术 var style UNC

原文地址：https://www.cnblogs.com/dengcun/p/8832121.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行