js世家委托详解
事件原理
通过div0.addElementListener来调用：
用法：div0.addElementListener(事件类型，事件回调函数，是否捕获时执行){}。
1、事件类型(type)：必须是字符串，可以设置为任意字符串，但是部分字符串系统事件类型
2、事件回调函数(onclick) :指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数
3、是捕获时执行(e):默认值是false，在冒泡时执行，捕获时不执行，如果设置为true，在捕获时执行
4、注意：stopPProgetion():是停止冒泡， IE8以下是不支持的
cancelBubble(): 停止冒泡 IE8以下是支持的
例子：
效果图
当我们点击div2时就会打印出div0、div1、div2,如我们只想打印div0，在其他的两个子元素中添加stoppropagetion().
事件委托：
是将元素的侦听事件全部委托给最外层的元素,也就是我们把子元素要做的事件全部委托给父元素来做。
事件触发：
就是当我们点击元素时，不管我们的子元素有没有点击事件，只要父元素有点击事件，就可以触发子元素的点击事件。
例子:
效果图：
触发条件：target:被点击的目标元素。和this一样，当我们添加一个触发点击元素时，点击那个元素，target就是这个元素。
委托：概念上是我们要做的事情委托给被人来做，这样不仅可以减少内存，还可以将大大减少dom的操作。
<style>
ul{
transition: all 0.5s;
}
</style>
<body>
<ul class="menu">
<li>北京
<ul>
<li>海淀</li>
<li>昌平
<ul>
<li>沙河</li>
<li>回龙观</li>
<li>龙泽</li>
<li>天庭</li>
<li>傻喵</li>
</ul>
</li>
</ul>
</li>
<li>河北</li>
<li>陕西</li>
<li>>河南</li>
<li>北京</li>
</ul>
<script>
/*
1、先设置ul的样式
2、获取ul的列表
3、给每个列表添加点击事件
4、给要显示的单独列表设置样式，显示或掩藏
*/
var list;//设置列表变量
init();//设置初始化函数
function init(){//执行初始化函数
var menu=document.querySelector(".menu");//获取文档中.menu并赋值给menu;
menu.addEventListener("click",clickHandler)//给menn添加点击事件，并执行clickHandler函数
}
function clickHandler(e){//执行clickHandler函数
e.stopPropagation();//到达什么样的条件是停止显示
if(e.target.nodeName!=="LI") return;//如e.target等于所有的列表时执行下一语句；
////如上述条件成立，执行下一个子元素
if(e.target.firstElementChild){
if(!e.target.bool){//如为真时，则隐藏，否显示
e.target.firstElementChild.style.display="none";
}else{
e.target.firstElementChild.style.display="block";
}
e.target.bool=!e.target.bool;//获取所想要的效果
}
}
/* var list;
init();
function init(){
var menu=document.querySelector(".menu");
menu.addEventListener("click",clickHandler)
}
function clickHandler(e){
// console.log(this,e.target);//this在事件函数中是被点击的对象(暂时),
// 实际上this是侦听事件的对象,也就是外面执行addEventListener方法的对象menu
// e.target 事件的目标 真实点击到最终得目标对象
// e.currentTarget 和this相同,都是事件侦听的对象
e.stopPropagation();
// this 是被点击的元素
if(e.target.nodeName!=="LI") return;
if(e.target.firstElementChild){
if(!e.target.bool){
e.target.firstElementChild.style.display="none";
}else{
e.target.firstElementChild.style.display="block";
}
e.target.bool=!e.target.bool;
}
} */
</script>
</body>
效果图：
如上述的ul中有多个li,我们只要通过一个ul来触发点击事件，但我们点击Li是，就会触发点击事件。我们点击北京时，北京下的子元素就折叠起来，点击昌平时，昌平下的子元素会折叠
以上仅为日常的分享，如有更好的建议，多多发表喔！！！！！
浙公网安备 33010602011771号