登录  /  注册
博主信息
博文 28
粉丝 0
评论 0
访问量 28560
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
事件添加/代理和事件派发委托细说
G
原创
699人浏览过

事件的添加方式

  1. 事件属性:通过属性来添加 => on + 事件名称onclick
    <button onclick="let a = 'admin';console.log(this.innerText, a)">按钮1</button>
  2. 通过脚本的方式来添加
  1. <button onclick="show(this)">按钮2</button>
  2. <script>
  3. // 事件对应的函数
  4. function show(ele) {
  5. console.log(ele.innerText);
  6. }
  7. </script>
  1. 给对象添加属性的方式
  1. const btn3 = document.querySelector("button:nth-of-type(3)");
  2. // ev.target: 表示当前按钮,其实就是事件的触发者
  3. btn3.onclick = (ev) => console.log(ev.target);
  1. 事件监听器

    语法:.addEventListener(事件名称,回调函数,传递机制【捕获/冒泡】)
    通过addEventListener可以同时给一个属性添加多个时间,如鼠标移入或鼠标移出可以同时存在。
    捕获和冒泡的区别:捕获是从上到下,既从父元素到子元素蔓延传递,是将事件按照一定的顺序开始执行,找到条件符合的时候就执行,捕获是从父元素到子元素的捕获过程,而冒泡是从下到上蔓延传递,类似在水里的气泡一样,而冒泡是从子元素开始往父元素蔓延,或按照从子元素开始到父元素的顺序执行事件。
    捕获 阶段:在事件对象到达事件目标之前,事件对象必须从 window 经过目标的祖先节点传播到事件目标。 这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。
    目标 阶段:事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标,该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。
    冒泡 阶段: 事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到 window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。
    这里可以参考一下查阅到的可以方便同学们阅读的资料:https://www.jianshu.com/p/3f0ee1f6ec30 >

btn4.addEventListener("click", (ev) => console.log(ev.target.innerText), false);

  • 细说事件的捕获和冒泡
  1. // 事件的捕获和冒泡
  2. const first = document.querySelector(".first");
  3. const second = document.querySelector(".second");
  4. const three = document.querySelector(".three");
  5. // true: 捕获阶段, false: 冒泡阶段
  6. // addEventListener(evName, callback, true);
  7. // ev.target: 事件的触发者, ev.currentTarget: 事件的绑定者
  8. // ev.target.classList.item(0): 获取类名称
  9. first.addEventListener(
  10. "click",
  11. (ev) => console.log("捕获:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
  12. true
  13. );
  14. second.addEventListener(
  15. "click",
  16. (ev) => console.log("捕获:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
  17. true
  18. );
  19. three.addEventListener(
  20. "click",
  21. (ev) => console.log("捕获:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
  22. true
  23. );
  24. // false: 冒泡阶段
  25. first.addEventListener(
  26. "click",
  27. (ev) => console.log("冒泡:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
  28. false
  29. );
  30. second.addEventListener(
  31. "click",
  32. (ev) => console.log("冒泡:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
  33. false
  34. );
  35. three.addEventListener(
  36. "click",
  37. (ev) => console.log("冒泡:触发 %s, 绑定 %s", ev.target.classList.item(0), ev.currentTarget.classList.item(0)),
  38. false
  39. );

  1. 事件派出器

事件派出器有什么作用:自动执行某个动作。new Event来创建事件实例,最后通过派发dispatchEvent实现自动实现。
原理/步骤:

  • 创建一个事件实例
    const ev = new Event("click")
  • 在需要自动执行的地方引用(开始派发)
    btn5.dispatchEvent;
  1. const btn5 = document.querySelector("button:last-of-type");
  2. btn5.addEventListener("click", (ev) => console.log("点击了广告"), false);
  3. const ev = new Event("click");
  4. btn5.dispatchEvent(ev);
  1. 冒泡实现事件委托 / 事件代理

    通过冒泡的原理可以得到,我们想给一个父元素下的所有子元素添加一个事件,子元素的同名事件会向上冒泡到父级元素的同名事件上,所以直接将这个事件干脆添加给它的父元素就可以。

  1. document
  2. .querySelector("ul")
  3. .addEventListener("click", (ev) => console.log("触发 %s, 绑定 %s", ev.target, ev.currentTarget), false);

ul下的所有li都会有一个点击事件。

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:不论是哪一种事件机制, 都没错,都是对 同一事物的不同角度的解读, 火狐认为捕获合理,而微软认为冒泡才对, w3c一看神仙打架惹不起, 就来当和事佬,认为事件有二过程 ,先捕获,再冒泡, 于是这个事件安静了,交选择权交给了用户
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学