js 事件委托阻止事件冒泡---

最新推荐文章于 2023-05-05 18:33:37 发布

ataUFO

最新推荐文章于 2023-05-05 18:33:37 发布

阅读量412

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js事件委托</title>
</head>
<body>
<input type="button" id="btn" value="事件委托"/>
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
<dic> </dic>
<input type="button" id="stopbtn" value="阻止事件冒泡"/>
<div id="outside" οnclick="outsideEvent(this,event);" style="width:100px; height:100px; background:#000; padding:50px">
<div id="inside" οnclick="insideEvent(this,event);" style="width:100px; height:100px; background:#CCC"></div>
</div>

</body>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
//事件委托
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
if(target.style.background=="red"){
target.style.background = "yellow";
}else{
target.style.background = "red";
}
}
console.log(target.id+"---");
}

oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}
</script>

<script type="text/javascript">
function outsideEvent(obj,e){
console.log(obj.id);
}
function insideEvent(obj,e){
console.log(obj.id);
stopBubble(e);
}
//阻止事件冒泡函数
function stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
</script>
</html>