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);
}