JavaScript - 事件的冒泡、事件的委派和事件的绑定前言事件的冒泡一、取消冒泡事件的委派一. 将事件绑定到元素的共同祖先元素事件的绑定一. addEventListener()

75 阅读 0 评论 50 点赞

我是靠谱客的博主如意导师，最近开发中收集的这篇文章主要介绍JavaScript - 事件的冒泡、事件的委派和事件的绑定前言事件的冒泡一、取消冒泡事件的委派一. 将事件绑定到元素的共同祖先元素事件的绑定一. addEventListener()，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

前言
事件的冒泡
一、取消冒泡
事件的委派
一. 将事件绑定到元素的共同祖先元素
事件的绑定
一. addEventListener()

前言

所谓的冒泡指的就是事件的向上传导, 当后代元素行的事件被触发时, 其祖先元素的相同事件也会被触发

事件的冒泡

一、取消冒泡

如果不希望发生事件冒泡, 可以通过事件对象来取消冒泡
将事件的对象cancelBubbl设置为True

event.cancelBubbl = True

事件的委派

事件的委派, 指将事件统一绑定给元素共同的祖先元素, 这样当后代元素上的事件触发时, 会一直冒泡到祖先元素

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var u1 = document.getElementById("u1");
// 新建超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;'>新建的超链接</a>";
u1.appendChild(li)
};
// 为每个超链接绑定单击事件
var allA = document.getElementsByTagName("a");
for(i=0; i<allA.length; i++){
allA[i].onclick = function(){
alert("hello");
};
}
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1">
<li><a href="javascript:;">超链接1</a></li>
<li><a href="javascript:;">超链接2</a></li>
<li><a href="javascript:;">超链接3</a></li>
</ul>
</body>
</html>

新建的超链接没有绑定事件, 我们希望, 只绑定一次事件, 即可应用到已有的元素上.

一. 将事件绑定到元素的共同祖先元素

<script type="text/javascript">
window.onload = function(){
var u1 = document.getElementById("u1");
// 新建超链接
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;'>新建的超链接</a>";
u1.appendChild(li)
};
// 为每个超链接绑定单击事件
u1.onclick = function(){
alert("hello");
}
};
</script>

事件的绑定

使用对象.事件 = 函数的形式绑定响应函数
它只能同时为一个元素的一个事件绑定一个响应函数
不能绑定多个, 如果绑定了多个, 则后边会覆盖掉前面的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1")
btn1.onclick = function(){
alert("点我1")
};
btn1.onclick = function(){
alert("点我2")
};
}
</script>
</head>
<body>
<button id="btn1">按钮</button>
</body>
</html>

一. addEventListener()

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数, 这样当事件被触发时, 响应函数将会按照函数的绑定顺序执行.

通过这个方法也可以为元素绑定响应函数
参数 :
1. 事件的字符串
2. 回调函数
3. 是否在捕获阶段触发事件, 需要一个布尔值, 一般都传false

<script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1")
// btn1.onclick = function(){
//
alert("点我1")
// };
// btn1.onclick = function(){
//
alert("点我2")
// };
btn1.addEventListener("click", function(){
alert("点我1");
}, false);
btn1.addEventListener("click", function(){
alert("点我2");
}, false);
}
</script>