JS中的事件流程以及DOM2级事件绑定与DOM0级事件绑定

最新推荐文章于 2023-05-12 21:28:28 发布

小白张幺幺

最新推荐文章于 2023-05-12 21:28:28 发布

阅读量1.6k

点赞数 3

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zzh1251994430/article/details/108699110

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

JS中的事件流程以及DOM2级事件绑定与DOM0级事件绑定

事件流程

事件流程分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

捕获阶段：事件从最顶层元素开始执行，一层层往下，直到精确元素。

目标阶段：事件在精确元素上执行。

冒泡阶段：事件从精确元素开始执行，一层层往上，直到顶层元素（注：高级浏览器的顶层元素是window，ie8以下的浏览器顶层元素是document）

DOM0级事件的绑定

语法：

box.onclick = function(){}
//元素.事件行为=函数

相当于给一个元素的属性赋值,只能赋一个值,后面如果再赋值就会覆盖前面的值,所以说DOM0级事件只可以绑定一次,如果绑定多次,后面的会把前面的给覆盖了,因为是一个赋值的过程,一个属性只能赋一个值。

DOM0级事件的移除

语法：

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

注：DOM0级事件兼容任何浏览器

DOM2级事件的绑定

关键词：addEventListener
语法：


box.addEventListener('事件类型去掉on的',函数,第三个参数是true或者是false)

false:默认冒泡阶段发生。
true:捕获阶段发生。

例：

<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>

注：DOM2级事件可以绑定多个函数,按照你绑定的先后顺序执行。

DOM2级事件移除

关键词：removeEventListener。
语法：

box.removeEventListener('click',fn,布尔值)

例：

<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有两个参数
</script>
</body>

注：为了移除事件好操作一般绑定事件的时候使用一个函数名来代替这个函数

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

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

小白张幺幺

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS中的事件流程以及DOM2级事件绑定与DOM0级事件绑定

JS中的事件流程以及DOM2级事件绑定与DOM0级事件绑定事件流程事件流程分为三个阶段：捕获阶段、目标阶段、冒泡阶段。捕获阶段：事件从最顶层元素开始执行，一层层往下，直到精确元素。目标阶段：事件在精确元素上执行。冒泡阶段：事件从精确元素开始执行，一层层往上，直到顶层元素（注：高级浏览器的顶层元素是window，ie8以下的浏览器顶层元素是document）DOM0级事件的绑定语法：box.onclick = function(){}//元素.事件行为=函数相当于给一个元素的属性赋值,只
复制链接

扫一扫

专栏目录