博客列表 >JS事件添加、传递以及事件代理的研究

JS事件添加、传递以及事件代理的研究

叮叮咚咚丶
叮叮咚咚丶原创
2020年11月09日 11:28:45629浏览

一、事件添加

1.使用多种方式为元素添加事件

(1)通过事件属性为元素添加事件
事件属性:通过属性为元素添加事件,这个属性即事件属性。语法:on+事件,如onclick,onclick即为一个事件属性。

  1. <!-- 通过事件属性添加事件 按钮1234-->
  2. <div>
  3. <button onclick="console.log((document.querySelector('button')).innerText);">按钮1</button>
  4. <button onclick="BtnClick2()">按钮2</button>
  5. <button onclick="BtnClick3(this)">按钮3</button>
  6. <!--传递当前事件对象 -->
  7. <button onclick="BtnClick4(event)">按钮4</button>
  8. </div>
  9. <script>
  10. function BtnClick2() {
  11. console.log(document.querySelector("button:nth-of-type(2)").innerText);
  12. }
  13. function BtnClick3(ev) {
  14. console.log(ev.innerText);
  15. }
  16. function BtnClick4(ev) {
  17. console.log(ev.target); //event对象代表对事务的状态 属性target返回触发事件的元素
  18. }
  19. </script>


(2)通过脚本为元素添加事件(给元素对象添加事件)

  1. <!-- 通过脚本添加事件 不需要添加事件属性 -->
  2. <div class="btn">
  3. <button class="btn5">按钮5</button>
  4. <button class="btn6">按钮6</button>
  5. <button class="btn_ad">广告按钮</button>
  6. </div>
  7. <script>
  8. const btn5 = document.querySelector(".btn5");
  9. btn5.onclick = (ev) => console.log(ev.target); //传入元素event对象 event.type为事件名称
  10. //onclick只能添加一个事件 使用事件监听器可以添加多个事件
  11. //addEventListener(事件名称,回调方法,传递机制:捕获/冒泡)
  12. //false:冒泡 true:捕获
  13. const btn6 = document.querySelector(".btn6");
  14. btn6.addEventListener(
  15. "click",
  16. (ev) => console.log(ev.target.innerText),
  17. false
  18. );
  19. // btn6.addEventListener("mouseover", () => console.log("移入"), false);
  20. // btn6.addEventListener("mouseout", () => console.log("移出"), false);
  21. //使用事件派发器自动执行某个工作
  22. const btn_ad = document.querySelector(".btn_ad");
  23. btn_ad.addEventListener(
  24. "click",
  25. (ev) => console.log("广告已经点击"),
  26. false
  27. );
  28. //创建一个点击事件的实例
  29. const ev = new Event("click");
  30. //btn_ad.dispatchEvent(ev);
  31. setInterval(() => btn5.dispatchEvent(ev), 1000); //dispatchEvent() 方法给节点分派一个合成事件。
  32. </script>

dispatchEvent() 方法给节点派发一个事件。(自定义事件)
setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval(fn/string,毫秒)

二、事件传递机制

1.捕获 true

  1. const grandpa = document.querySelector(".grandpa");
  2. const father = document.querySelector(".father");
  3. const son = document.querySelector(".son");
  4. grandpa.addEventListener(
  5. "click",
  6. (ev) =>
  7. console.log(
  8. " grandpa 触发元素:%s,绑定元素:%s",
  9. ev.target.classList.item(0), //classList.item[index]返回元素中索引值对应的类名,索引从0开始
  10. ev.currentTarget.classList.item(0) //currentTarget返回其监听器触发事件的节点
  11. ),
  12. true
  13. );
  14. father.addEventListener(
  15. "click",
  16. (ev) =>
  17. console.log(
  18. " father 触发元素:%s,绑定元素:%s",
  19. ev.target.classList.item(0),
  20. ev.currentTarget.classList.item(0)
  21. ),
  22. true
  23. );
  24. son.addEventListener(
  25. "click",
  26. (ev) =>
  27. console.log(
  28. " son 触发元素:%s,绑定元素:%s",
  29. ev.target.classList.item(0),
  30. ev.currentTarget.classList.item(0)
  31. ),
  32. true
  33. );

2.冒泡 flase

阻止事件冒泡:stopPropagation()和window.event.cancelBubble = true
阻止默认行为:preventDefault()和return false

三、事件代理

根据冒泡原理 子元素的同名事件会向上冒泡父级元素的同名事件。 所以直接将事件添加给父元素就可以,可以极大的简化代码和业务逻辑。轮播图和选项卡中运用会多点。

  1. <ul>
  2. <li>1</li>
  3. <li>2</li>
  4. <li>3</li>
  5. <li>4</li>
  6. </ul>
  7. <script>
  8. const ul = document.querySelector("ul");
  9. ul.addEventListener("click", (ev) =>
  10. console.log("第%s个列", ev.target.innerText)
  11. );//给父元素ul添加点击事件
  12. </script>

四、总结

想了很久才明白冒泡和捕获的区别,事件代理的意思也好理解。但是让我有点沮丧的是,可能是前面有些地方学的没到位,学到这里自己想着写个轮播图或者选项卡还是有点困难,还是要看后面老师讲的案例再去背和写了。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议