<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
li{
background-color:red;
}
ul div{
width:100%;
height:20px;
background-color:red;
}
</style>
</head>
<body>
<ul>
<li></li>
<li class="li1"></li>
<li class="li1"></li>
<li></li>
<li class="li1"></li>
<li class="li1"></li>
</ul>
<button>添加li</button>
<script>
var oUl=document.querySelector("ul");
var oBtn=document.querySelector("button");
// var aLi=document.querySelectorAll("li");//获取li元素(里面有动态创建的li元素时),但也无法使相信创建的li背景颜色变绿。
var aLi=oUl.getElementsByTagName("li");
// 动态创建li元素
oBtn.onclick=function(){
// 动态创建li元素
var oLi=document.createElement("li");
// 动态创建div元素
// var oLi=document.createElement("div");
oUl.appendChild(oLi);
}
//1. 用原来的方法给li元素绑定点击事件
// for(var i=0;i<aLi.length;i++){
// aLi[i].οnclick=function(){
// this.style.backgroundColor="green";
// }
// }
// 原来的方法(以上代码)的第一个问题:遍历出多少个,就绑定多少事件函数,浪费资源;第二个问题:新创建的元素没有事件函数。
// 但事件委托可以解决这两个问题
//2. 给父元素点击事件,此时点击子元素背景颜色也会变化(会冒泡到父元素)
// oUl.οnclick=function(){
// event.target.style.backgroundColor="green";
// 下面的写法是可以区分动态创建什么元素,如果动态创建的是li元素,点击它时就让它的背景颜色变成绿色;如果动态创建的是其它元素(例如div),则背景颜色不变化
// console.log(event.target.tagName); //是大写的LI
// if(event.target.tagName.toLowerCase()=="li"){
// event.target.style.backgroundColor="green"; //event.target是不能换成this的,如果换成了this,就指向了oUl。所以下面在封装函数的时候要注意this的指向
// }
// if(event.target.className=="li1"){
// event.target.style.backgroundColor="green";
// }
// }
// 3.事件委托的封装(下面是区分是tagName还是className)。
// 这种封装只能执行一个事件函数
// function weituo(parent,attr,fn,name){ //li .li
// parent[attr]=function(){ //事件是一种特殊的属性
// if(name[0]=="."){ //判断字符串的第一位
// if(event.target.className==name.substring(1)){
// fn.call(event.target);
// }
// }else{
// if(event.target.tagName.toLowerCase()==name){
// fn.call(event.target);
// }
// }
// }
// weituo(oUl,"onclick",function(){
// alert(123);
// },"li");
// 4.事件委托的进一步封装,可以让所有事件函数同时执行
function weituo(parent,attr,fn,name){
parent.addEventListener(attr,function(){
if(name[0]=="."){ //判断字符串的第一位
if(event.target.className==name.substring(1)){
fn.call(event.target); //加call方法,是为了让this指向目标源
}
}else{
if(event.target.tagName.toLowerCase()==name){
fn.call(event.target);
}
}
},false);
}
weituo(oUl,"click",function(){ //委托(delegation)
alert(123);
},".li1")
weituo(oUl,"click",function(){
this.style.backgroundColor="blue";
},"li")
</script>
</body>
</html>
事件委托的封装过程
最新推荐文章于 2022-01-23 16:52:17 发布