jQuery 学习笔记事件委派

事件委派允许我们将事件绑定到一个元素包括它匹配的子元素（无论存在的还是不存在的）。

我们通过一个例子来感受一下事件委派

<div id="container"><ul id="list"><li><a href="http://domain1.com">Item #1</a></li><li><a href="eventDemo.html">Item #2</a></li><li><a href="nothispath.html">Item #3</a></li><li><a href="http://domain4.com">Item #4</a></li></ul></div>

然后我们将click事件直接绑定到a元素

$( "#list a" ).on( "click", function( event ) {event.preventDefault();console.log( $( this ).text() );
});

现在一切都运行良好，但是我们添加一个元素后

$("#list").append(' <li><a href="http://domain1.com">Item #5</a></li>');

然后再点击新添加的元素，会执行默认的行为（跳到另一个链接）。

如果我们也想要匹配新增的元素该怎么办？这里就用到了事件委派，事件委派主要的原理就是利用了事件传播

事件传播

什么是事件传播？

如上面的例子，当我们点击a元素后，事件会沿着<a> <li> <ul #list> <div #container> <body><html>传到document root，

当点击到绑定事件的元素后，就相当于点击了整个页面，这就叫做event bubbling 或者event propagation.

要实现上面的功能只需将a元素移到on里面就可以了

$( "#list" ).on( "click", "a", function( event ) {event.preventDefault();console.log( $( this ).text() );
});

这就是所谓的event delegation，利用事件委派的最佳实践就是将事件绑定到将来可能产生的元素。

转载于:https://www.cnblogs.com/xviubu/p/3463953.html

jQuery 学习笔记事件委派相关推荐

jquery学习之事件委派
一.定义事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素. 二.版本从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函 ...
jQuery学习笔记——事件
何为事件就是你的鼠标,键盘等对网页元素进行的操作. 常见事件鼠标事件键盘事件表单事件文档/窗口事件 click keypress submit load dblclick keydown c ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...
jQuery学习笔记--目录
jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...
jQuery学习笔记：Ajax(二)
接上篇"jQuery学习笔记:Ajax(一)". 3.jQuery.get(url,[data],[callback],[type])通过远程 HTTP GET 请求载入信息. 这 ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
javaweb（03） jQuery学习笔记
javaweb(03) jQuery学习笔记 jQuery介绍什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...
jQuery学习笔记开篇
开始学习人见人爱花见花开的jQuery. jQuery是一个轻量级,快速简洁的javascript框架.它的官方网址是(http://jquery.com/).jQuery的优点是它容量小巧,简洁和简 ...
jquery学习笔记及常用函数封装
二.JQuery 学习笔记及常用函数封装 https://download.csdn.net/download/weixin_42530002/13087988 1.JQuery入门 (1).css选 ...

jQuery 学习笔记事件委派

事件传播

jQuery 学习笔记事件委派相关推荐

最新文章

热门文章

jQuery 学习笔记 事件委派

事件传播

jQuery 学习笔记 事件委派相关推荐

最新文章

热门文章

jQuery 学习笔记事件委派

jQuery 学习笔记事件委派相关推荐