注册事件(事件处理）

最新推荐文章于 2024-05-07 08:00:17 发布

httpkaidi

最新推荐文章于 2024-05-07 08:00:17 发布

阅读量542

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121617477

版权

javascript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

注册事件
给元素添加事件，称为注册事件或者绑定事件
注册事件有两种方式：传统方式、方法监听注册方式

传统注册方式

利用on开头的事件 onclick
<button onclick = "alert('hi~')" ></button>
btn.onclick = function () { }
特点：注册事件的唯一性：同一个元素同一个事件只能设置一个函数，最后注册的处理函数会覆盖前面的处理函数
方法监听注册事件

W3C标准推荐方式
addEventListener（）它是一个方法
IE9之前的IE不支持此方法，可使用attachEvent()代替
addEventListener事件监听方式

eventTarget.addEventListener(type,listener[,useCapture])事件监听方式
eventTarget.addEventListener（）方法将指定的监听器注册到eventTarget(目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。
同一个元素，同一个事件可以添加多个侦听器（事件处理程序）

该方法接收三个参数：

type：事件类型字符串，比如click、mouseover（注意这里不带on）
listener:事件处理函数，事件发生时，会调用该监听函数
useCapture:可选参数，是一个布尔值，一般默认为false

  <body>
    <button>传统注册方式</button>
    <button>方法监听事件注册方式</button>
    <script>
      var btns = document.querySelectorAll("button");
      //1.传统注册方式
      btns[0].onclick = function () {
        alert("hi");
      };
      //2.方法监听事件注册方式
      btns[1].addEventListener("click", function () {
        alert(22);
      });
      btns[1].addEventListener("click", function () {
        alert(33);  //先弹出22 再弹出33 不会覆盖
      });
    </script>
  </body>

attachEvent事件监听方式（ie9以前的版本支持）
eventTarget.attachEvent(eventNameWithOn , callback)
eventTarget.attachEvent()方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行

该方法接受两个参数：

eventNameWithOn ：事件类型字符串，比如onclick,onmouseover,在这里要带on
callback：事件处理函数，当目标触发事件时回调函数被调用

 //3. attachEvent ie9以前的版本支持
      btn[2].attachEvent('onclick',function(){
          alert(11); //ie9以前的版本才会执行，goole不支持
      })

httpkaidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
注册事件(事件处理）

注册事件给元素添加事件，称为注册事件或者绑定事件注册事件有两种方式：传统方式、方法监听注册方式传统注册方式利用on开头的事件 onclick<button onclick = "alert('hi~')" ></button>btn.onclick = function () { }特点：注册事件的唯一性：同一个元素同一个事件只能设置一个函数，最后注册的处理函数会覆盖前面的处理函数方法监听注册事件W3C标准推荐方式addEventListener（）它是一
复制链接

扫一扫

专栏目录