<body>
<div>123</div>
<script>
let oDiv = document.querySelector('div');
// 方式一
oDiv.onclick = function(){
alert('a');
}
// 方式二
oDiv.addEventListener('click',function(){
alert('b');
})
// 方式三
oDiv.attachEvent('onclick',function(){
alert('c');
})
</script>
</body>
肯定有小伙伴急急忙忙的赋值到本地编辑,一看,居然报错了什么垃圾博客
哈哈哈先别急等下会讲到。
方式一:DOM.onxxx = function(){…}
这种方式由于是等号赋值的形式,所以后面覆盖前面,写多个的话只有最后有效
移除监听函数:DOM.onxxx = null
方式二:addEventListener
注意点:
1、第一个参数是事件类型,且不用加”on“,第二个参数是触发事件执行的函数
2、给同一个DOM添加多个事件,不会覆盖(因为不是等号赋值)
3、只支持IE9以上的浏览器
4、还有第三个参数,控制事件是否冒泡(false冒泡且为默认 / true不冒泡为捕获)
方式三:attachEvent
需要加”on“;不会后覆盖前;只支持低版本浏览器;
问题来了:因为上面代码只用一个版本浏览器打开,必然只能是高级/低级浏览器,所以addEventListener/attachEvent必然会有一个报错
解决:兼容写法:
<script>
let oDiv = document.querySelector('div');
function addEvent(e,name,fn){
if(e.attachEvent){
e.attachEvent('on'+name,fn);
}else{
e.addEventListener(name,fn);
}
}
addEvent(oDiv,'click',function(){
alert('b');
})
</script>
觉得有帮助的关注,点个赞~