JavaScript冒泡事件、捕获事件、事件委托的概念区别于应用，默认事件的处理
程序员文章站
2022-05-06 09:11:07
...
目录
-
概述
冒泡事件、捕获事件、事件委托的概念与认识
在原先的时候有的浏览器支持冒泡事件有的浏览器支持冒泡事件，后来W3C要统一标准就形成了现在的对两种事件都支持，这也是现在浏览器的一个现状。冒泡事件与捕获事件是现代浏览器执行事件的两个不同阶段，事件的代理又是借助冒泡事件的原理实现的。
由于子元素的时间会传到 父元素的同类时间，所以我们利用这个特性，子元素不做事件处理，然事件传递到父元素再做统一的处理，由于子元素的事件是由父元素代为处理的，所以我们称之为事件代理或是说事件委托。事件委托在我们的项目中应有有着它诸多的优势：
Element事件认认识：
用来获取事件的详细信息：鼠标位置、键盘按键。下面是我们event对象的一个基本使用情况：
<script>
//在实验的时候发现在新版本的浏览器中，好像不存在这个兼容性问题
document.onclick=function(e){
// 支持IE但是不支持火狐
alert("X: "+event.clientX+" Y:"+event.clientY);
// 支持火狐但是不支持IE
alert("X: "+e.clientX+" Y:"+e.clientY);
// 对于多数浏览器的一个兼容性写法
eEvent = e||event;
alert("X: "+eEvent.clientX+" Y:"+eEvent.clientY)
}
</script>-
冒泡事件案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#bigBox{
width: 300px;height: 300px;border: 3px solid red;margin: 50px auto;
}
#smallBox{
width: 150px;height: 150px;border: 3px solid blue;margin: 50px auto;
}
</style>
</head>
<body id="bodyBox">
<div id="bigBox">
<div id="smallBox"></div>
</div>
<script>
var bigBox = document.getElementById('bigBox');
var smallBox = document.getElementById("smallBox");
var bodyBox = document.getElementById('bodyBox');
bigBox.onclick = function(e){
//兼容性设置
eEvent = e||event;
//非IE浏览器下
eEvent.stopPropagation();
//IE浏览器下
eEvent.cancelBubble=true;
alert("大盒子");
}
smallBox.onclick= function(){
alert("小盒子");
}
bodyBox.onclick = function(){
alert("body盒子")
}
document.onclick = function(){
alert("document盒子")
}
</script>
</body>
</html>
在样例中我们组织事件从大盒子往外冒，其中浏览器兼容的问题，可能是只在老版本中存在，在我的本机中可能是浏览器新的缘故，在各个浏览器上管是那种组织冒泡的方式都是可用的
-
捕获事件案例
捕获事件的绑定主要是借助于addEventListener,捕获事件的阻止实现与冒泡事件阻止的实现相似
<script>
var bigBox = document.getElementById('bigBox');
var smallBox = document.getElementById("smallBox");
var bodyBox = document.getElementById('bodyBox');
bigBox.addEventListener("click",function(){alert("大盒子");event.stopPropagation()},true);
smallBox.addEventListener("click",function(){alert("小盒子")},true)
bodyBox.addEventListener("click",function(){alert("body盒子")},true)
</script>addEventListener函数的三个参数分别代表的是事件名称、事件绑定的行为，布尔值（true:捕获事件；false：冒泡事件）
-
事件委托案例
采用事件委托实现的一个简单案例，：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
li{
background-color: #0000FF;
width: 50%;
line-height: 28px;
margin: 5px 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<ul id="ulbox" style="background-color: aquamarine;">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script>
//传统的处理方式
// window.onload = function(){
// var ulbox = document.getElementById('ulbox');
// var ulibox = ulbox.getElementsByTagName('li');
// for(var i=0;i<ulibox.length;i++){
// ulibox[i].onclick = function(){
// alert("我是li，点击事件");
// }
// }
// }
window.onload = function() {
var ulbox = document.getElementById("ulbox");
ulbox.onclick = function(e) {
var eEvent = e || event;
var target = eEvent.target || eEvent.srcElement;
if (target.nodeName.toLowerCase() == 'li') {
alert("我是li,点击事件" + target.innerHTML);
}
}
}
</script>
</body>
</html>
在上面我们每个li的操作都是一样的，我们也可以通过给每个子元素设置不同的特征标记（例如设置id）在通过target来获取子元素的标记信息，在函数的处理中根据这些不同的特征采取不同的操作。
更多有关事件委托的概念可以参考：https://www.cnblogs.com/liugang-vip/p/5616484.html#!comments
默认行为的理解与处理方式：
默认行为就是浏览器自身就带有的不需要我们通过代码来实现的，例如我们创建一个什么都没有的额html文件，但是打开这个文件在我们的浏览器中右击还是可以看到一个弹出框的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
我们可以通过给相应的时间添加return flase来阻止这个默认的事件：
<script>
document.oncontextmenu = function(){
return false;
}
</script>我们实现上述的右击弹出，选项框，选项框根据鼠标移动，点击页面上的其他位置是，我们的选项框就会消失：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding:0px;margin: 0;list-style: none;
}
#menu{
width: 100px;height: 200px;background-color: aqua;
line-height: 40px;border:1px #0000FF solid ;display: none;
position: absolute;
}
</style>
</head>
<body>
<ul id="menu">
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
<script>
document.oncontextmenu = function(e){
eEvent = e||event;
var menu = document.getElementById("menu");
menu.style.display="block";
menu.style.left = (eEvent.clientX+10)+"px";
menu.style.top = (eEvent.clientY+10)+"px";
return false;
}
document.onclick= function(){
var menu = document.getElementById("menu");
menu.style.display="none";
}
</script>
</body>
</html>