JavaScript原生事件委託以及JQuery事件委託on()的程式碼片段
阿新 • • 發佈：2019-02-10
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container{
width:100%;
display:-webkit-box;
display: -moz-box;
display:-webkit-flex;
display: flex;
}
.left {
-webkit-flex:1;
-ms-flex:1;
-webkit-box-flex:1;
-moz-flex:1;
flex:1;
width:100%;
}
.main{
width:200px;
}
.right{
width:300px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="新增"/>
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<script type="text/javascript">
// 不用事件委託的方式，動態新增的li不會改變背景顏色
// window.onload = function(){
// var oUl = document.getElementById("ul");
// var aLi = oUl.getElementsByTagName("li");
// var oBtn = document.getElementById("btn");
// var iNow = 4;
// for(var i=0; i<aLi.length; i++){
// aLi[i].onmouseover = function(){
// this.style.background = "red";
// }
// aLi[i].onmouseout = function(){
// this.style.background = "";
// }
// }
// oBtn.onclick = function(){
// iNow ++;
// var oLi = document.createElement("li");
// oLi.innerHTML = 1111 *iNow;
// oUl.appendChild(oLi);
// }
// }
//事件委託
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}
</script>
</body>
</html>
<html>
<head>
<title></title>
<style type="text/css">
.container{
width:100%;
display:-webkit-box;
display: -moz-box;
display:-webkit-flex;
display: flex;
}
.left {
-webkit-flex:1;
-ms-flex:1;
-webkit-box-flex:1;
-moz-flex:1;
flex:1;
width:100%;
}
.main{
width:200px;
}
.right{
width:300px;
}
</style>
</head>
<body>
<input type="button" id="btn" value="新增"/>
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<script type="text/javascript">
// 不用事件委託的方式，動態新增的li不會改變背景顏色
// window.onload = function(){
// var oUl = document.getElementById("ul");
// var aLi = oUl.getElementsByTagName("li");
// var oBtn = document.getElementById("btn");
// var iNow = 4;
// for(var i=0; i<aLi.length; i++){
// aLi[i].onmouseover = function(){
// this.style.background = "red";
// }
// aLi[i].onmouseout = function(){
// this.style.background = "";
// }
// }
// oBtn.onclick = function(){
// iNow ++;
// var oLi = document.createElement("li");
// oLi.innerHTML = 1111 *iNow;
// oUl.appendChild(oLi);
// }
// }
//事件委託
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
var oBtn = document.getElementById("btn");
var iNow = 4;
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
oBtn.onclick = function(){
iNow ++;
var oLi = document.createElement("li");
oLi.innerHTML = 1111 *iNow;
oUl.appendChild(oLi);
}
}
</script>
</body>
</html>