DOM事件模型

题目如图

html中点击哪个按钮可以打印出 hi ?
那如果是JS呢？哪个可以打印出hi？

答案是按钮B,C 还有id为X的函数。
看起来确实很像，但是html和javascript是两种不同的语言。

先说onclick
onclick="要执行的代码"
一旦用户点击，浏览器就会发生 eval("要执行的代码"）要立即执行print就需要有（）

控制台输出

eval只负责把print存进去，没有进行其他的操作

X.onclick=print ///类型为函数对象
Y.onclick=print()///undefined
Z.onclick=print.call()///undefined

一旦用户点击，那么浏览器就执行X.onclick.call(X,{ })

结论：在HTML里onclick要的是代码，不是一个函数，在JS中，要的是一个函数，不能现在就执行

onclick和addEventListener

xxx.onclick=function(){
  console.log(2)
  }
xxx.onclick=function(){
  console.log(3)
  }
///输出为3
}

onclick 是JS中的一个属性，具有唯一性，以最后一次调用结果为准，其余结果会被覆盖.

xxx.addEventListener（‘click’,function(){
  console.log(1)
}）
xxx.addEventListener（‘click’,function(){
  console.log(2)
}）///输出结果为 1 2 每次输出结果都是 1 2 可以输出多次

addEventListener是一个队列。xxx.addEventListener=xxx拥有一个队列eventlistener

.one

函数触发事件一次就把他移走，相当于自动添加了个xxx.removeEventListener('click',f1),

JS传递顺序.png

W3C官网给出的答案是：都可以
其实在addEventListener里有第三个参数，默认是Undefined,

如果修改第三个参数，为真值，答案就是爷爷爸爸儿子

第三个参数为真值.png

修改为假，顺序就是儿子爸爸爷爷

第三个参数为假.png

捕获冒泡

捕获冒泡机制

如果儿子身上既有冒泡阶段，又有捕获阶段。
那么捕获先执行。
如果是自己身上，触发的是同一个元素，最后一个节点，那么节点谁先写谁先执行

那我们来做一个关于DOM模型的小demo
做一个button，点击时候有浮层出现，浮层里有一个checkbox，点击浮层之外的地方可以让浮层消失，浮层里的checkbox可被选中

效果图.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css.css">
</head>
<body>
    <div id="wrapper" class="wrapper">
        <button id="checkMe">点我</button>
    <div id="popover" class="popover">
        <input type="checkbox">
        浮层
    </div>

    </div>
</body>
<script>
    checkMe.addEventListener('click',function(){
        popover.style.display='block'
    })
    wrapper.addEventListener('click',function(e){
        e.stopPropagation()
    })
    document.addEventListener('click',function(){
        popover.style.display='none'
    })
    
</script>
</html>

此时document被监听，每一个popover都要去监听document，每一个监听都有内存的，如果有很多个popover，那document就会被监听很多次，这样非常占内存，所以我选择用JQ来写。

    $(checkMe).on('click',function(){
        $(popover).show()
        $(document).one('click',function(){
        $(popover).hide()
    })
})
    $(wrapper).on('click',function(e){
        e.stopPropagation()
    })

此时document没有事件监听，只有checkMe被监听了。还只是一次（因为有one）

最后编辑于：2020.09.09 18:45:32