博客列表 >【JS】事件添加与删除

【JS】事件添加与删除

可乐随笔
可乐随笔原创
2022年12月03日 23:40:40515浏览

事件添加与删除

总结:

1.拿到元素(主体)
2.给主体添加事件
3.给主体添加事件监听(可以添加多个事件

4.事件删除
5.事件派发(先自定义事件,然后用dispatchEvent将自定义事件派发到主体)
6.定时器:setInterval

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>事件添加与删除</title>
  8. </head>
  9. <body>
  10. <!--
  11. * 事件三要素:
  12. * 1.名称:字符串,'click','keydown','scroll'
  13. * 2.主体 :元素,'<button>','<div>','<form>'
  14. * 3.方法:函数,''function(ev){},()=>{}'
  15. -->
  16. <div>
  17. <button>1.事件属性</button>
  18. <button>2.事件监听</button>
  19. <button>3.事件派发</button>
  20. </div>
  21. <script>
  22. const div = document.querySelector('div');
  23. // (一)事件属性
  24. const btn1 = div.firstElementChild;
  25. // 1. 事件添加
  26. btn1.onclick = function () {
  27. //this:事件主休(绑定)
  28. //this -> <button>
  29. console.log(this);
  30. };
  31. //箭头函数
  32. btn1.onclick = () => {
  33. // 箭头函数没有this
  34. // 它的this是执行上下文/环境/父级
  35. console.log(this);
  36. console.log(event.target);
  37. };
  38. // 2.事件删除
  39. btn1.onclick = null;
  40. // (二) 事件监听
  41. // 1,事件添加
  42. const btn2 = btn1.nextElementSibling;
  43. const fn1 = function () {
  44. console.log(this);
  45. };
  46. const fn2 = function () {
  47. console.log('这是第二个事件');
  48. };
  49. // btn2.addEventListener(事件名称,事件方法,事件方式)
  50. // false:表示事件在冒泡阶段触发,False是默认值
  51. btn2.addEventListener('click', fn1, false);
  52. btn2.addEventListener('click', fn2, false);
  53. // 在元素上面直接写 onclick只能添加一个事件,事件监听器可以写多个
  54. //----------------------------------------------
  55. // 2.事件删除
  56. //移除第二个事件
  57. btn2.removeEventListener('click', fn1, false);
  58. //匿名事件
  59. btn2.addEventListener(
  60. 'click',
  61. function () {
  62. console.log('hello');
  63. },
  64. false
  65. );
  66. // btn2.removeEventListener(
  67. // 'click',
  68. // function () {
  69. // console.log('hello');
  70. // },
  71. // false
  72. // );
  73. //匿名事件不能移除
  74. //----------------------------------------------
  75. // 3. 事件派发
  76. // 将自定义事件,指定到特定的元素上触发
  77. const btn3 = div.lastElementChild;
  78. let acc = 0;
  79. btn3.onclick = function () {
  80. acc += 5;
  81. console.log(`当前余额:${acc} 元`);
  82. };
  83. //事件自动派发,就要自定义事件,自动派发到这个按钮上
  84. //1.创建一个自定义事件
  85. const adsclick = new Event('click');
  86. //2. 将自定义的属性派发到按钮上
  87. //现在模拟用户点击(事件派发)
  88. // btn3.dispatchEvent(adsclick);
  89. // btn3.dispatchEvent(adsclick);
  90. // btn3.dispatchEvent(adsclick);
  91. // btn3.dispatchEvent(adsclick);
  92. //定时器
  93. //1.一次性(只执行一次)
  94. // set Timeout(callback,time)
  95. setTimeout(() => {
  96. btn3.dispatchEvent(adsclick);
  97. }, 2000);
  98. //2.间歇式(重复不断执行)
  99. let timer = setInterval(() => {
  100. btn3.dispatchEvent(adsclick);
  101. //设定一个
  102. if(acc>=100){
  103. clearInterval(timer)
  104. console.log('今天已经赚了:',acc,'元')
  105. }
  106. }, 1000);
  107. </script>
  108. </body>
  109. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议