您的位置：首页 > Web前端 > JavaScript

原生JS如何利用冒泡减少事件的触发，只代理给共有的父元素。

2017-02-15 12:12 453 查看

相信很多人都知道事件代理这个方法,因为在JQuery里面，已经封装好了。

$(父元素).on('click','父元素下的子元素标签名',function(){...})

但是如果用原生JS来写呢？相信有部分都会懵逼了….因为我曾经也是懵逼的一员

elem.addEventListener(“事件名”,callback,false/true）;

为elem元素的指定”事件”，绑定callback回调函数

第三个参数: 设置是否在捕获阶段触发

如果你绑定了一个事件名，类似’click’、’mouseover’….等等一些事件

例如，如果你给某个绑定了click事件,那么当你点击该元素时，首先会从document开始捕获，一直捕获到你点击的目标元素，然后按照捕获阶段反向的顺序，依次执行各级父元素上的事件处理函数

整理下来就是：

2个阶段:

1. 捕获:由外向内，依次记录各级元素绑定的事件处理函数

捕获阶段只到目标元素截止

2. 冒泡: 按照捕获阶段反向的顺序，依次执行各级父元素上的事件处理函数

下面是代码的栗子

<!DOCTYPE HTML>
<html>
<head>
<title>取消与利用冒泡</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/3.css"/>
</head>
<body>
<div id="keys">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button><br>
<button>C</button>
<button>+</button>
<button>-</button>
<button>=</button>
</div>
<textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>
<script>
//为id为keys的元素绑定单击事件为:
keys.addEventListener("click",
function(e){
//获得目标元素，保存在target中
var target=e.target;
//如果target是button
if(target.nodeName=="BUTTON"){
//判断target的内容
switch(target.innerHTML){
case "C"://如果是C
//清除id为sc的内容
sc.value="";
break;
case "="://如果是=
try{//错误处理
//将id为sc的内容，放入eval中，将结果再保存回id为sc的内容中
sc.value=eval(sc.value)
}catch(err){//一旦出错
//将错误对象转为字符串，放入id为sc的内容中
sc.value=String(err);
}
break;
default://其他
//将target的内容追加到id为sc的内容中
sc.value+=
target.innerHTML;
}
}
}
);
</script>
<a id="a1" href="#">click me</a>
</body>
</html>

其实冒泡也可以取消。

取消冒泡: 执行完当前元素的事件处理函数后，阻止冒泡向上执行。

e.stopPropagation();

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航