zepto与jq的区别有四点不太理解，还希望老师举个例子讲解下
来源：4-8 事件委托或代理
迷失的小麦
2020-03-10 11:00:05
1回答
-
好帮手慕慕子
2020-03-10
同学你好， 对于你的问题解答如下：
1、Zepto官方解释： prop方法是读取或设置dom元素的属性值。它在读取属性值的情况下优先于 attr，因为这些属性值会因为用户的交互发生改变，如checked 和 selected，这个方法实际工作中几乎不会用到，同学不用去纠结，如果真的遇到了，按照Zepto官方推荐的使用prop方法操作don的属性值就可以了。
2、添加id时，jQuery不会生效，Zepto会生效。同学结合代码自己测试下，就可以看到效果。如下：
检查元素，效果如下：
3、事件触发的区别，结合代码测试下，可以很清楚的对比看到效果，如下。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script> <script> (function ($) { //事件触发，load不会执行 $(function () { var carryOutLoad = $('<script/>', { src: './main.js', id: 'insetjQueryId' }); carryOutLoad.appendTo($('body')); carryOutLoad.on('load', function () { console.log('jQ script loaded'); //未打印 }); }); })(window.jQuery); Zepto(function ($) { //事件触发，load会执行 $(function () { var carryOutLoad = $('<script/>', { src: './main2.js', id: 'insetZeptoId' }); carryOutLoad.appendTo($('body')); carryOutLoad.on('load', function () { console.log('zepto loaded'); }); }); }); </script>浏览器中打印结果如下：jQuery中load事件函数没有执行。
4、老师这里写了个简单的示例，代码如下：
jQuery中事件委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; border: 1px solid red; margin: 10px; } </style> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <div class="a">a</div> <div class="b">b</div> <script> //点击a时，弹出a事件，未弹出b事件 (function ($) { $(document).on('click', '.a', function () { alert('a事件'); $(this).removeClass('a').addClass('b'); }); $(document).on('click', '.b', function () { alert('b事件'); }); })(window.jQuery); </script> </body> </html>zepto中事件委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; border: 1px solid red; margin: 10px; } </style> </head> <body> <script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script> <div class="a">a</div> <div class="b">b</div> <script> //弹出a事件，接着弹出b事件 Zepto(function ($) { $(document).on('click', '.a', function () { alert('c事件'); $(this).removeClass('a').addClass('b'); }); $(document).on('click', '.b', function () { alert('d事件'); }); }) </script> </body> </html>在 Zepto 中，当 a 被点击后，依次弹出了内容为”a事件“和”b事件“的弹出框。说明虽然事件委托在.a上可是却也触发了.b上的委托。但是在 jQuery 中只会触发 .a 上面的委托。原因如下：
（1）在 Zepto 中代码解析的时候，document上所有的click委托事件都依次放入到一个队列中，点击的时候先看当前元素是不是.a，符合则执行，然后查看是不是.b，符合则执行。这样的话，就导致如果.a的事件在前面，会先执行.a事件，然后class更改成b，Zepto再查看当前元素是不是.b，以此类推。
（2）在 jQuery 中代码解析的时候，document上委托了2个click事件，点击后通过选择符进行匹配，执行相应元素的委托事件。这样就很好的避免了在 Zepto 中的发生的情况。
zepto在实际中应用的较少，课程中也标注了是选修可，同学可以结合示例代码，自己测试下，根据代码实现的效果，简单了解下即可，重点可以放在本阶段后面的webApp案例和小程序的相关学习上。
祝学习愉快~
0
相似问题