1.jQuery事件委托
- 什么是事件委托
请别人帮忙做事情,然后将做完的结果返回给我们,具体来说事件委托就是元素目标自身不处理的事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素(document)
- 为什么要用事件委托
比如给一个ul里面的几个li添加额事件,但是如果动态又生成了li则刚刚生成的li就不具备事件,这时就需要用到事件委托
- 事件委托原理
事件委托就是利用事件冒泡原理实现的!
复习一下什么是事件冒泡:就是事件从最深姐弟啊开始,然后逐步向上传播事件
例如:页面上有一个节点树:div > ul > li > a
比如给最里面的a加一个click事件,那么事件就会一层一层的往外执行,执行顺序a > li > ul > div 有这样一个机制,当我们给最外层的div添加点击事件,那么里面的ul li a 做点击事件的时候,都会冒泡到最外层的div上,所以都会被触发。点他爸爸,儿子就出来了嘛
- 程序代码段解释
$("ul").delegate("li","click",function(){
console.log($(this).html());
})
打住:现在就会有小友问了为什么这个地方的this拿到的是li呢,你不是用ul来监听的这个click事件嘛?为什么能拿到li呢?
哈哈哈 很简单哦 事件冒泡嘛,你点击li,li没有click事件,事件冒泡向上传递,向上传递传递给ul,ul有click事件,ul一有响应了click事件,相应这个事件为什么能拿到this,因为它就是从你点的那个传下来的,this就是你点的那个。
2.多说太枯燥,看代码理解
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件委托</title>
<script src="js/Jquery.js"></script>
<script type="text/javascript">
$(function(){
/*
* 1.什么是事件委托:请别人帮忙做事情,然后将做完的结果返回给我们
*
* */
$("button").click(function(){
$("ul").append("<li>我是新增的li</li>");
});
//在jQuery中,如果通过核心函数找到的元素不止一个,那么在添加事件的时候呢
//jQuery回遍历所有找到的元素,给所有找到的元素添加事件
// $("ul>li").click(function(){
// console.log($(this).html());
// });
$("ul").delegate("li","click",function(){
//打住:现在就会有小友问了为什么这个地方的this拿到的是li呢,你不是用ul来监听的这个click事件嘛?为什么能拿到li呢?
//哈哈哈 很简单哦 事件冒泡嘛,你点击li,li没有click事件,事件冒泡向上传递,向上传递传递给ul,ul有click事件,ul一有响应了click事件,相应这个事件为什么能拿到this,因为它就是从你点的那个传下来的,this就是你点的那个。
console.log($(this).html());
})
});
</script>
</head>
<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ul>
<button>新增一个li</button>
</body>
</html>