【JS】事件添加与删除 - PHP前端

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

博主信息

博文 94

粉丝 0

访问量 89381

专题推荐

更多>

事件添加与删除

总结:

1.拿到元素（主体）
2.给主体添加事件
3.给主体添加事件监听（可以添加多个事件
）
4.事件删除
5.事件派发（先自定义事件，然后用dispatchEvent将自定义事件派发到主体）
6.定时器：setInterval

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>事件添加与删除</title>
  </head>
  <body>
    <!--
        * 事件三要素：
        * 1.名称：字符串,'click','keydown','scroll'
        * 2.主体 ：元素，'<button>','<div>','<form>'
        * 3.方法：函数，''function(ev){},()=>{}'
    -->
    <div>
      <button>1.事件属性</button>
      <button>2.事件监听</button>
      <button>3.事件派发</button>
    </div>
    <script>
      const div = document.querySelector('div');
      // (一)事件属性
      const btn1 = div.firstElementChild;
      // 1. 事件添加
      btn1.onclick = function () {
        //this：事件主休（绑定）
        //this -> <button>
        console.log(this);
      };
      //箭头函数
      btn1.onclick = () => {
        // 箭头函数没有this
        // 它的this是执行上下文/环境/父级
        console.log(this);
        console.log(event.target);
      };
      // 2.事件删除
      btn1.onclick = null;
      // (二) 事件监听
      // 1，事件添加
      const btn2 = btn1.nextElementSibling;
      const fn1 = function () {
        console.log(this);
      };
      const fn2 = function () {
        console.log('这是第二个事件');
      };
      // btn2.addEventListener(事件名称，事件方法，事件方式)
      // false:表示事件在冒泡阶段触发，False是默认值
      btn2.addEventListener('click', fn1, false);
      btn2.addEventListener('click', fn2, false);
      // 在元素上面直接写 onclick只能添加一个事件，事件监听器可以写多个
      //----------------------------------------------
      // 2.事件删除
      //移除第二个事件
      btn2.removeEventListener('click', fn1, false);
      //匿名事件
      btn2.addEventListener(
        'click',
        function () {
          console.log('hello');
        },
        false
      );
      //   btn2.removeEventListener(
      //     'click',
      //     function () {
      //       console.log('hello');
      //     },
      //     false
      //   );
      //匿名事件不能移除
      //----------------------------------------------
      // 3. 事件派发
      // 将自定义事件，指定到特定的元素上触发
      const btn3 = div.lastElementChild;
      let acc = 0;
      btn3.onclick = function () {
        acc += 5;
        console.log(`当前余额：${acc} 元`);
      };
      //事件自动派发，就要自定义事件，自动派发到这个按钮上
      //1.创建一个自定义事件
      const adsclick = new Event('click');
      //2. 将自定义的属性派发到按钮上
      //现在模拟用户点击（事件派发）
      //   btn3.dispatchEvent(adsclick);
      //   btn3.dispatchEvent(adsclick);
      //   btn3.dispatchEvent(adsclick);
      //   btn3.dispatchEvent(adsclick);
      //定时器
      //1.一次性（只执行一次）
      // set Timeout(callback,time)
      setTimeout(() => {
        btn3.dispatchEvent(adsclick);
      }, 2000);
      //2.间歇式（重复不断执行）
      let timer = setInterval(() => {
        btn3.dispatchEvent(adsclick);
        //设定一个
        if(acc>=100){
            clearInterval(timer)
            console.log('今天已经赚了:',acc,'元')
        }
      }, 1000);
    </script>
  </body>
</html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

【HTML】文档结构与元素，标签，属性的类型

2022-11-27 20:51:59

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

事件添加与删除

总结: