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

javascript 冒泡和事件源形成的事件委托

2016-03-22 14:06 686 查看

冒泡：即使通过子级元素的事件来触发父级的事件，通过阻止冒泡可以防止冒泡发生。

事件源：首先这个东西是有兼容行问题的,当然解决也很简单。

两者结合使用，形成的事件委托有两个优势：

1.减少性能消耗；

2.新添加的事件，也可以绑定时间，因为使用的是事件源而不是直接通过前面的程序来绑定。

以下例子，功能是通过事件冒泡的原理，将li的点击事件来触发ul的点击事件，在this指向确定的情况下，通过事件源的原理来确定当前点击的li，并获取li的内容。另外通过button的按钮可以添加li，而且这个li也可以有点击事件。

html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<input type="button" value="添加">
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
</html>

js：

<script type="text/javascript">
window.onload = function(){
var oUl= document.getElementById('ul1');
var iNow = 4;
oUl.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'ul'){
return false;
}
alert(target.innerHTML)

}
var button = document.getElementsByTagName('input')[0];
button.onclick = function(){
iNow++
var oLi = document.createElement('li');
oLi.innerHTML = '111' * iNow;
oUl.appendChild(oLi)
}
}
</script>

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

标签：

相关文章推荐

新的分享

章节导航

javascript 冒泡和事件源 形成的事件委托

javascript 冒泡和事件源形成的事件委托