事件绑定(DOM0级事件绑定和DOM2级事件绑定)

最新推荐文章于 2023-03-14 15:47:50 发布

weixin_33805557

最新推荐文章于 2023-03-14 15:47:50 发布

阅读量994

点赞数

原文链接：https://juejin.im/post/5c7b44846fb9a049b5078828

版权

DOM0级事件绑定

box.onclick=function(){}
元素.事件行为=函数
box.onclick=function(){}
相当于给一个元素的属性赋值,只能赋一个值,后面如果再赋值就会覆盖前面的值,所以说DOM0级事件只可以绑定一次,如果绑定多次,后面的会把前面的给覆盖了,因为是一个赋值的过程,一个属性只能赋一个值
复制代码

DOM0级事件移除

元素.事件行为=null;// 元素的事件行为,本身默认值就是null,把null这个值赋值回去就可以了
DOM0级事件都是在冒泡阶段发生的
复制代码

DOM0级事件兼容任何浏览器

DOM2级事件绑定

addEventListener,是类EventEventTarget原型下的公有方法
box.addEventListener('事件类型去掉on的',函数,第三个参数是true或者是false)
false:默认 冒泡阶段发生
true:捕获阶段发生

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">点我</div>
<script>
var box=document.getElementById('box');
box.addEventListener('click',function(){
    console.log(1)
})
box.addEventListener('click',function(){
    console.log(2)
})

//点击的时候,1和2一起输出了
</script>
</body>
</html>

DOM2级事件可以绑定多个函数,按照你绑定的先后顺序执行
复制代码

DOM2级事件移除

注意:为了移除事件好操作一般绑定事件的时候使用一个函数名来代替这个函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">点我</div>
<script>
var box=document.getElementById('box');
function fn(){
    console.log(1);
}
box.addEventListener('click',fn);
box.addEventListener('click',function(){
    console.log(2)
})
box.removeEventListener('click',fn);//romoveEventListener有两个参数
//点击的时候,1和2都输出了
</script>
</body>
</html>
复制代码

DOM2级事件有兼容性(attachEvent),现在微软已经放弃IE8及以下了,所以一般我们很少对它做处理了,但是个别的要进行处理,所以我们要进行判断一下,window下如果有addEventListener我们就用addEventListener,如果没有我们就不用addEventListener

在低版本IE浏览器下,没有addEventListener,然后再低版本IE浏览器下使用attachEvent
绑定:attachEvent()
移除:detachEvent()
复制代码

DOM2级事件同一个事件行为可以绑定多个函数,按照你绑定的先后顺序执行

DOM2级事件移除box.removeEventListener('click',fn,布尔值)

weixin_33805557

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
事件绑定(DOM0级事件绑定和DOM2级事件绑定)

DOM0级事件绑定box.onclick=function(){}元素.事件行为=函数box.onclick=function(){}相当于给一个元素的属性赋值,只能赋一个值,后面如果再赋值就会覆盖前面的值,所以说DOM0级事件只可以绑定一次,如果绑定多次,后面的会把前面的给覆盖了,因为是一个赋值的过程,一个属性只能赋一个值复制代码DOM0级事件移除元素.事件行为=null;// 元素...
复制链接

扫一扫