登录
原创

javascript-注册/删除事件

发布于 2021-07-15 阅读 116
  • 前端
  • JavaScript
原创

注册事件:

1. 元素对象.事件类型- - -传统注册事件方式。

注意:
这里的时间类型有前缀-on

eg:

btns[0].onclick = function() {
     \\\事件处理程序
}

2. 元素对象.addEventListener(‘事件类型’, fn)。

注意:
①这里的时间类型没有前缀-on
②该方法有兼容性,对ie浏览器来说,ie9以上才支持

eg:

btns[1].addEventListener('click', function() {
    \\\事件处理程序
});

3. 元素对象.attachEvent(‘事件类型’, fn)

注意:
①这里的时间类型有前缀-on
②该方法有兼容性,对ie浏览器来说,ie9以下才支持

eg:

btns[1].attachEvent('onclick', function() {
    \\\事件处理程序
});

一般使用传统方法1,和方法2,来注册事件

方法1 和 方法2 区别:
方法1给同一元素对象注册相同类型事件会覆盖,后面的覆盖前面的,
方法2可以给同一个元素对象添加多个相同类型事件,不会覆盖

删除事件:

注册事件方法1(传统方法)- 删除事件:

元素对象.onclick = null;

eg:点击后只弹出一次提示框,再点击不弹出

btns[0].onclick = function() {
     alert('我是传统注册事件方法');
     // 传统方式解绑(删除事件)
     btns[0].onclick = null;
}

注册事件方法2- 删除事件:

元素对象.removeEventListener(‘click’, fn);

注意:
该方法删除事件的话,绑定事件时不能再用匿名函数

eg: 点击后,弹出一次222,后面再点击不弹

btns[1].addEventListener('click', fn);

function fn() {
     alert('222');
     // 删除事件
     btns[1].removeEventListener('click', fn);
}

注册事件方法3- 删除事件:

元素对象.detachEvent(‘onclick’, fn);

注意:
该方法删除事件的话,绑定事件时不能再用匿名函数

eg: 点击后只弹一次,再点击不弹

btns[2].attachEvent('onclick', fn2);

function fn2() {
    alert(333);
    // 删除事件
    btns[2].detachEvent('onclick', fn2);
} 

评论区

零00
4粉丝

时光荏苒,我自清欢

0

0

0

举报