发表于： 2021-11-27 21:06:30
0 844
今天完成的事情：
在师兄的指导下完成了法官日志页面。
明天计划的事情：
继续完成任务页面。
遇到的问题：
jquery框架问题继续搞
收获
jquery中的bind(),live(),delegate(),on()有什么区别？
（1）背景介绍：
在学习和实践jquery框架的过程中，由于开始，只是使用的《锋利的Jquery》中绑定事件的方法，只认识到了bind()的方法。而该书是基于jquery1.7.1编写的，目前最新的版本已经到了3.2。对于绑定事件的方法做了调整。后来发现还有live()、delegate()、on()的方法，它们之间有什么样的区别呢？我们来学习讨论一下。
（2）知识剖析：
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。它是在1.7版本中被提出来的，提供绑定事件处理程序所需的所有功能。用于替换 bind()、delegate()和 live()。
（3）常见问题：
bind(),live(),delegate(),on()的特点？
（4）解决方案：
直接绑定在已经存在的元素上，但是对在它执行完后动态添加的那些元素上不起作用。因为直接绑定在具体的元素上，响应事件及时，它是出现最早的一种绑定事件的方法。这种方法很浪费资源，引起性能问题，因为它要匹配选择器中的每一项并且挨个设置相同的事件处理程序。如果在页面加载前要处理添加事件的话，会影响加载效率的。在jquery1.7版本以前比较受推崇。在jquery1.7版本之后，官方推荐使用on()方法代替。在jquery3.0版本之后，已经删除该方法。
与bind()的实现原理却不同。live()方法附加事件处理程序在document上通过冒泡来关联匹配到相应的元素和事件信息。对新添加的元素依然有效。不需要在每个元素上去绑定事件，而只在document上绑定一次就可以了。可以在document ready之前就可以绑定那些需要的事件。但是jquery1.9版本之后，已经被弃用了。
更精确的小范围使用事件代理，性能优于live()。它可以自由选择附加的选择器和事件信息的位置，把事件绑定到具体元素的上一级较稳定（不会动态地添加或者删除、变化）的元素上，缩短了事件冒泡的路径。同样对新添加的元素依然有效。在jquery3.0版本之后，已经删除该方法。
是以上三种方法的统一。可以使用一个方法，设置不同参数值来实现上述三种方法的功能。简化了jQuery代码库，并删除一个界别的重定向。
（5）编码实战：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被点击了。");
});
});
</script>
</head>
<body>
<p>点击这个段落。</p>
</body>
（6）更多讨论：
Q1：提问人：1.这四种方法的区别
A1：张新（可以是分享人，也可以是其他学员）：
.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制
Q2：提问人：2，如今live（）方法是否还适合使用?
A2：张新（可以是分享人，也可以是其他学员）：
建议停止使用.live()方法，因为它已经被弃用了，由于他有很多的问题
Q3：提问人：3，为什么更推荐使用on()方法
A3：张新（可以是分享人，也可以是其他学员）：
新的.on()方法主要是可以实现.bind() .live() 甚至 .delegate()的功能
返回列表
评论