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

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

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

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

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>
上一篇:Logstash-5.0同步.json文件到ElasticSearch-5.0配置文件


下一篇:CentOS6.5下如何正确下载、安装Intellij IDEA、Scala、Scala-intellij-bin插件、Scala IDE for Eclipse助推大数据开发(图文详解)