<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>jquery Complete Event Delegation (on ()) </title>
<script src= "Https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
<script>
$ (function () {
$ ("#box"). On ("click", "Div,p,li,span", function (event) {
if (event.target.nodeName.toLowerCase () = = "div") {//nodename element node name
if (event.target.id== "Div1") {
$ (this). css ({"Background-color": "Orange"});
}
else if (event.target.id== "Div2") {
$ (this). css ({"Background-color": "Yellow"});
}
else if (event.target.id== "Div3") {
$ (this). css ({"Background-color": "Blue"});
}
else if (event.target.id== "Div4") {
$ (this). css ({"Background-color": "Pink"});
}
}
if (event.target.nodeName.toLowerCase () = = "Li") {
$ (this). css ({"Background-color": "Red"});
}
if (event.target.nodeName.toLowerCase () = = "P") {
$ (this). css ({"Background-color": "Black"})
}
if (event.target.nodeName.toLowerCase () = = "Span") {
$ (this). css ({"Background-color": "Green"})
}
})
})
</script>
<style>
div{width:200px;height:200px;border:1px solid black; }
p{width:200px;height:100px;border:1px solid black; Color:white}
SPAN{WIDTH:400PX;HEIGHT:100PX;BORDER:1PX solid black; }
LI{WIDTH:200PX;HEIGHT:100PX;BORDER:1PX solid black; }
</style>
<body>
<div id= "box" >
<div id= "Div1" > I am div1</div>
<div id= "Div2" > I am div2</div>
<div id= "Div3" > I am div3</div>
<div id= "Div4" > I am div4</div>
<p> I'm p</p>.
<li> I'm li</li>.
<span> I'm span</span>.
</div>
</body>
jquery Complete Event delegate (on ())