我们看一个简单的例子
效果图如下
这里面有一个ul里面套着4个li，还有一个独立的li
代码实例:
需求
1.点击li，背景就会变成红色
2.点击btn，就会添加一个li
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul><li>222</li><button id="btn">添加一个li</button><script src="/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">//1.点击li，背景就会变成红色$('ul>li').click(function() {//第一种写法this.style.background = 'red';//第二种写法$(this).css('background','red');});//2.点击btn，就会添加一个li$('#btn').click(function() {$('ul').append('<li>222</li>');});</script></body></html>
效果如下:
我们会发现，添加之后的li点击了没有变化，说明添加之后的li并没有绑定点击监听
解决方法一(普通方法):
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css"></style></head><body><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul><li>222</li><button id="btn">添加一个li</button><script src="/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">//1.点击li，背景就会变成红色$('ul>li').click(function() {//第一种写法this.style.background = 'red';//第二种写法$(this).css('background','red');});//2.点击btn，就会添加一个li$('#btn').click(function() {$('ul').append('<li>222</li>')//这里我们会发现，当我们添加了一个li之后，点击它背景颜色并不会改变.children('li')//找到ul的孩子li.click(function() {//添加点击事件this.style.background = 'red';});});</script></body></html>
方法二(事件委托):
1.简单讲解
(1)事件委托(代理/委派)：
->将多个子元素(li)的事件监听委托给父辈元素(ul)处理
->监听回调是加在了父辈元素上
->当操作任何一个子元素(li)时，事件会冒泡到父辈元素(ul)
->父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素(li),通过这个子元素调用事件回调函数
(2)事件委托的双方
->委托方: 业主li
->被委托方: 中介ul
(3)使用事件委托的好处
->添加新的子元素，自动有事件响应处理
->减少事件监听的数量
(4)jQuery事件委托API
->设置事件委托:$(parentSelector).delegate(childrenSelector,eventName,callback)
->移出事件委托:$(parentSelector).undelegate(eventName)
2.代码实例
<html><head><base href="<%=basePath%>"><title>My JSP 'practice_02.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><style type="text/css"></style></head><body><ul><li>111</li><li>222</li><li>333</li><li>444</li></ul><li>222</li><button id="btn">添加一个li</button><script src="/jquery/1.12.4/jquery.min.js"></script><script type="text/javascript">//1.点击li，背景就会变成红色$('ul>li').click(function() {//第一种写法this.style.background = 'red';//第二种写法$(this).css('background','red');});//2.点击btn，就会添加一个li$('#btn').click(function() {$('ul').append('<li>222</li>');});//事件委托$('ul').delegate('li','click',function() {this.style.background = 'red';});</script></body></html>
3.效果
请读者复制代码自行测试
