DOM事件模型

EVA
538 阅读2分钟

DOM事件模型分为两种事件

捕获事件：事件从window对象自上而下向目标节点传播的阶段 冒泡事件：事件从目标节点自下而上向window对象传播的阶段 事例：

image.png w3c权衡了两种点击时触发的事件，从爷爷-->爸爸-->孙子的调用顺序叫做捕获，孙子-->爸爸-->爷爷的顺序叫做冒泡 代码实例：

html代码部分：
<body>
    <div class="level1 x">
        <div class="level2 x">
            <div class="level3 x">
                <div class="level4 x">
                    <div class="level5 x">
                        <div class="level6 x">
                            <div class="level7 x"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    js代码部分：
    const level1 =document.querySelector('.level1')
const level2 =document.querySelector('.level2')
const level3 =document.querySelector('.level3')
const level4 =document.querySelector('.level4')
const level5 =document.querySelector('.level5')
const level6 =document.querySelector('.level6')
const level7 =document.querySelector('.level7')

let n =1
const removeX = (e)=>{
    const t = e.currentTarget
    setTimeout(() => {
        t.classList.remove('x')
    }, n*1000);
    n += 1
}
const addX = (e)=>{
    const t = e.currentTarget
    setTimeout(() => {
        t.classList.add('x')
    }, n*1000);
    n += 1
}

level1.addEventListener('click',removeX,true)
level1.addEventListener('click',addX)
level2.addEventListener('click',removeX,true)
level2.addEventListener('click',addX)
level3.addEventListener('click',removeX,true)
level3.addEventListener('click',addX)
level4.addEventListener('click',removeX,true)
level4.addEventListener('click',addX)
level5.addEventListener('click',removeX,true)
level5.addEventListener('click',addX)
level6.addEventListener('click',removeX,true)
level6.addEventListener('click',addX)
level7.addEventListener('click',removeX,true)
level7.addEventListener('click',addX)
    css代码部分：
    
    * {
  box-sizing: border-box;
}
div[class^="level"] {
  border: 1px solid;
  border-radius: 50%;
  display: inline-flex;
}
.level1 {
  padding: 10px;
  background: purple;
}
.level2 {
  padding: 10px;
  background: blue;
}
.level3 {
  padding: 10px;
  background: cyan;
}
.level4 {
  padding: 10px;
  background: green;
}
.level5 {
  padding: 10px;
  background: yellow;
}
.level6 {
  padding: 10px;
  background: orange;
}
.level7 {
  width: 50px;
  height: 50px;
  border: 1px solid;
  background: red;
  border-radius: 50%;
}
.x {
  background: transparent;
  /* 透明 */
}

哈哈哈，这里有点长了，希望帮助理解哦

捕获和冒泡的示意图：

image.png

addEventListener

事件绑定API

  • IE 5*: baba.attachEvent('onclick', fn)//冒泡
  • 网景:baba.addEventListener('click',fn)//捕获
  • W3C: baba.addEventListener('click', fn, bool)
·如果bool不传或为falsy

就让fn走冒泡，即当浏览器在冒泡阶段发现baba有fn 监听函数，就会调用fn，并提供事件信息

·如果bool为true

就让 fn走捕获，即当浏览器在捕获阶段发现baba有fn监听函数，就会调用fn,并提供事件信息

target v.s. currentTarget·区别

  • e.target-用户操作的元素
  • e.currentTarget-程序员监听的元素
  • this是e.currentTarget，我个人不推荐使用它

.举例

  • div > span{文字}，用户点击文字
  • e.target就是span
  • e.currentTarget就是div

image.png

取消冒泡

  • 捕获不可取消，但冒泡可以
  • e.stopPropagation()可中断冒泡，浏览器不再向上走通俗来说:有人打我，我自己解决，别告诉我老子一般用于封装某些独立的组件

不可阻止默认动作

·有些事件不能阻止默认动作
  • MDN搜索scroll event，看到Bubbles和Cancelable
  • Bubbles的意思是该事件是否冒泡，所有冒泡都可取消
  • Cancelable的意思是开发者是否可以阻止默认事件
  • Cancelable与冒泡无关
  • 推荐看MDN英文版，中文版内容不全
avatar
文章
阅读
粉丝