监听函数，事件冒泡，阻止事件冒泡，JS事件绑定方法

最新推荐文章于 2022-08-31 16:39:02 发布

努力奔波的程序猿

最新推荐文章于 2022-08-31 16:39:02 发布

阅读量719

点赞数 1

分类专栏：面试题

本文链接：https://blog.csdn.net/zkl865748013/article/details/115100308

版权

面试题专栏收录该内容

18 篇文章 0 订阅

订阅专栏

监听函数

监听函数
浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。

JavaScript 有三种方法，可以为事件绑定监听函数。
HTML 的 on- 属性
HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。

<body onload="doSomething()">
<div onclick="console.log('触发事件')">

上面代码为body节点的load事件、div节点的click事件，指定了监听代码。一旦事件发生，就会执行这段代码。

元素的事件监听属性，都是on加上事件名，比如onload就是on + load，表示load事件的监听代码。
注意，这些属性的值是将会执行的代码，而不是一个函数。

<!-- 正确 -->
<body onload="doSomething()">
<!-- 错误 -->
<body onload="doSomething">

直接设置on-属性，与通过元素节点的setAttribute方法设置on-属性，效果是一样的。

el.setAttribute('onclick', 'doSomething()');
// 等同于
// <Element onclick="doSomething()">

事件冒泡

多个元素嵌套，这些元素都注册了相同的事件，如果里面的元素的事件触发了，外面的元素的该事件也自动触发了。

<div id="dv1">1
            <div id="dv2">2
                <div id="dv3">3</div>
            </div>
        </div>
        <script src="js/common.js"></script>
        <script type="text/javascript">
            my$('dv1').onclick=function(){
                console.log("点击dv1");
            };
            my$('dv2').onclick=function(){
                console.log("点击dv2");
            };
            my$('dv3').onclick=function(){
                console.log("点击dv3");
            };
        </script>

阻止事件冒泡
如何阻止事件冒泡：

window.event.cancelBubble=true;
IE特有的，火狐不支持，谷歌支持
e.stopProgation();
谷歌和火狐都支持，IE不支持
事件阶段
事件冒泡是从里岛外，事件有三个阶段：
1.事件捕获阶段：从外向内
2.事件目标阶段：最开始选择的
3.事件冒泡阶段：从里向外

addEventListener(“没有on的事件类型”,事件处理函数,控制事件阶段的)
事件触发的过程中，可能会出现事件冒泡的效果，为了阻止事件冒泡：

window.event.cancelBubble=true;谷歌，IE8都支持，火狐不支持
window.event就是一个对象，是IE中的标准
e.stopProgation()；阻止事件冒泡
window.event和e都是事件参数对象，一个是IE的标准，一个是火狐的标准，事件参数e在IE8的浏览器中不存在，此时用window.event来代替。

addEventListener()第三个参数是控制事件阶段的

事件阶段有三个：
通过e.eventPhase这个属性可以知道当前的事件是什么阶段
1—>捕获阶段
2—>目标阶段
3—>冒泡阶段

一般默认都是冒泡阶段，很少用捕获阶段
冒泡阶段：从里到外
捕获阶段：从外向内

原生JS事件绑定方法：

1、通过ＨＴＭＬ属性进行事件处理函数的绑定如：

   ＜a href="#" onclick="f()"＞

努力奔波的程序猿

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
监听函数，事件冒泡，阻止事件冒泡，JS事件绑定方法

监听函数监听函数浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。JavaScript 有三种方法，可以为事件绑定监听函数。HTML 的 on- 属性HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。<body onload="doSomething()"><div onclick="console.log('触发事件')
复制链接

扫一扫