jQuery-事件委派

妖狐艹你老母 2022-12-02 15:04 56阅读 0赞

事件委派（委托）：  
将多个子元素的事件监听委托给父元素处理，监听回调是在加了父辈元素上，当操作子元素时，事件会冒泡到父元素上  
父元素不会直接处理事件，而是根据event.target得到发生事件的子元素，通过该子元素来处理事件  
使用事件委托的好处  
1.添加新的子元素，自动有事件相应处理  
2.减少事件监听的数量  
jQuery的事件委托API  
设置事件委托： ( p a r e n t S e l e c t o r ) . d e l e g a t e ( c h i l d r e n S e l e c t o r , e v e n t N a m e , c a l l b a c k ) ; 取 消 事 件 委 托 ： (parentSelector).delegate(childrenSelector,eventName,callback); 取消事件委托： (parentSelector).delegate(childrenSelector,eventName,callback);取消事件委托：(parentSelector).undelegate(eventName);  
具体用法：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>事件委派</title>
    		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){ 
    //				$("ul>li").click(function(){//是有这种方式绑定，新添加的li也要进行重新绑定才可以有效果
    //					$(this).css("background-color","red");
    //				});
    				$("#btn").click(function(){
    					$("ul").append("<li>新添加的li...</li>")
    				});
    				$("ul").delegate("li","click",function(){
    					$(this).css("background-color","red");
    				});
    				$("#btn1").click(function(){
    					$("ul").undelegate("click");
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<ul>
    			<li>1111</li>
    			<li>2222</li>
    			<li>3333</li>
    			<li>4444</li>
    			<li>5555</li>
    		</ul>
    		<li>wwww</li>
    		<br />
    		<button id="btn">添加新的li</button>
    		<button id="btn1">取消事件委派</button>
    		<bu
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，56人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery：事件

目录 1、鼠标事件 2、键盘事件 3、单个事件 4、绑定事件 5、复合事件 6、解绑事件 7、自动触发事件 8、jQuery 对象拷贝 9、常见问题概述 1

左手的ㄟ右手/ 2024年04月03日 09:53/ 0 赞/ 51 阅读

相关 jQuery事件

文章目录 1.jQuery 事件注册单个事件注册 2.jQuery 事件处理 2.1 事件处理 on(

本是古典何须时尚/ 2024年03月22日 21:35/ 0 赞/ 47 阅读

相关 JQuery 事件

`JQuery`事件是对`Javascript`事件的函数封装。 Javascript 写法 document.getElementsByClassName('co

比眉伴天荒/ 2023年07月25日 06:14/ 0 赞/ 107 阅读

相关 jQuery-事件委派

事件委派（委托）：将多个子元素的事件监听委托给父元素处理，监听回调是在加了父辈元素上，当操作子元素时，事件会冒泡到父元素上父元素不会直接处理事件，而是根据event

妖狐艹你老母/ 2022年12月02日 15:04/ 0 赞/ 57 阅读

相关 jQuery事件

学习要点： 1.模拟操作 2.命名空间 3.事件委托 4.on、off 和 one jQuery 不但封装了大量常用的事件处理，还提供了不少高级事件方便开发者使用。比

Love The Way You Lie/ 2022年08月18日 15:13/ 0 赞/ 165 阅读

相关 Jquery 事件

$(document).ready(function () { $('food-0').on('click', function () {

骑猪看日落/ 2022年08月02日 04:39/ 0 赞/ 164 阅读

相关 jquery事件

处理简单的事件按钮的点击事件是最常见的了，如下, 通过3个按钮想改变测试div的颜色 <div class="mydiv" style="width: 12

秒速五厘米/ 2022年05月26日 23:10/ 0 赞/ 188 阅读

相关事件的委派（委托）

一、什么是事件的委派？事件的委派也叫事件代理，简单理解就是：原本是某个元素需要绑定的事件，现在将这个事件交给别的元素去做，正常我们把它交给父级元素，比如：原

刺骨的言语ヽ痛彻心扉/ 2022年05月26日 13:20/ 0 赞/ 119 阅读

相关 jQuery事件

JQuery事件：查看jQuery的API文档，可以看到jQuery的事件有： ![这里写图片描述][70] 常用事件： blur: 失去焦点触发 cha

清疚/ 2022年05月22日 12:42/ 0 赞/ 166 阅读

相关 Jquery事件

<body> <button id="btn">按钮</button> <div class="block"> <button class="btn">按钮1</butt

超、凢脫俗/ 2022年03月16日 01:50/ 0 赞/ 241 阅读