DOM事件模型

源守望
450 阅读2分钟

DOM事件模型

事件流是一个事件沿着特定数据结构传播的过程。冒泡和捕获是事件流在DOM中两种不同的传播方法 事件流有三个阶段
• 事件捕获阶段
• 处于目标阶段
• 事件冒泡阶段
一、事件捕获 • 从外向内找监听函数的叫事件捕获 • 捕获先调用爸爸的监听函数 • 事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件.
二、事件冒泡
• 从内向外找监听函数的叫事件冒泡
• 冒泡先调用子的监听函数
• 与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点

三、W3C事件模型

  1. 先捕获（先父级=>子级）再冒泡？（先子级=>父级）
  2. e对象被传给所有监听函数，事件结束后，e对象就不存在了
  3. 特殊例子： a. 背景： 只有一个div被监听（不考虑父子同时被监听，fn分别再捕获阶段和冒泡阶段监听click事件，用户点击的元素就是开发者监听的 b. 谁先监听谁先执行
  4. 取消冒泡 a. 捕获不可取消，但冒泡可以
ⅰ. e.stopPropagation()可中断冒泡，浏览器不再向上走
level4.addEventListener("click", (e) => {
  //阻止冒泡
  e.stopPropagation();
  addX(e);
});

5.不可取消冒泡(有的事件不支持取消）
• scroll event
• Bubbles:该事件是否冒泡
• Cancelable：开发者是否可以取消冒泡 • 如何阻止滚动 • 用css隐藏滚动条
• 在阻止wheel和thouchstat默认动作

::-webkit-scrollbar {
  width: 0 !important;
}
//阻止scrollbar
 x.addEventListener("wheel", (e) => {
   //wheel滚动
   e.preventDefault(); //取消默认事件
 });
 x.addEventListener("touchstart", (e) => {
   e.preventDefault(); //取消手机上的滚动
 });

四、自定义事件

<div id = "div1">
  <button id ='btn1'>点击触发自定义事件</button>
</div>
btn1.addEventListener("click", () => {
  const event = new CustomEvent("rong", {
    detail: {
      name: "rong",
      age: 18,
    },
  });
  btn1.dispatchEvent(event);
});
btn1.addEventListener("rong", (e) => {
  console.log(e.detail);
});

总结不会的知识点：

  1. e是什么 a. 一个形参，一个事件对象，里面有很多属性，试试自己console.log出来看看（比如里面有坐标，有target等等） b. 可以通过(e)=> 把参数传到执行函数中
level1.addEventListener(
  "click",
  (e) => {
    //e事件 e只存在点击的时候 在事件结束就消亡 
    const t = e.currentTarget;
    //用一个变量记录下来
    setTimeout(() => {
      t.classList.remove("x");
    }, n * 1000);
    n += 1;
  },
  true
);

2.target VS currentTarget 的区别
• e.target 用户操作的元素
• e.currentTarget 程序员监听的元素
• 举例：

<div>
  <span>点我</span>
</div>
用户点击文字
e.target就是span  
e.currentTarget就是div  
3.wheel滚轮事件      
4.preventDefault():取消事件的默认动作
avatar
文章
阅读
粉丝