注册事件:
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);
}