jQuery中onClick和click有何区别?jQuery中onClick和click的区别介绍

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于jQuery中onClick和click有何区别?jQuery中onClick和click的区别介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

状况之外

在之前的公司并没有遇到这个问题,也就没有深究。直到自己换了现在的公司,刚来第二天就开始写别人写到一半的项目,很无奈,不是原生就是jquery,由于项目急,已经来不及切换框架重新布局,只能继续了。

状况之中

到处都是列表,到处都是js创建的动态页面,好吧,那我也继续吧,突然,意外发生了。==我绑定的click事件无效==。

状况-解决呗

当时知道的原因是动态创建的元素在初始化的时候还没有,那我绑定的事件怎么可能绑定的上嘛(==当时还不知道onclick和click区别,也不知道onclick下面介绍的用法==)

<p>解决方法

$("#list").on('click',function(e){         var ev = e || window.event;         var target = ev.target || ev.srcElement;         if (target.nodeName.toLowerCase() == 'a' && target.className=='reset') {             msgconfirm('','是否确认重置密码?',function(){                 ajax('/user/reset?id='+target.type,'','get','json',null,function(data){                     var userObj=data.tUser;                     tipalert('',{                         data:'密码重置成功',                         username:userObj.account,                         password:userObj.passWord,                         uKey:userObj.key.replace(/,/img,'</br>')                     },'../../images/ok-ico.png',function(){                         window.location.reload();                     })                 })             })         }     })

jquery+原生,我也不想的,可是我又找不到别的解决方案,解决就OK了,虽然不好看,性能也不是太好,但是我也没有深究。

。。。。。。。。。。

状况之后的好久好久以后

那就是现在啦,看到别人的代码

$("body").on("keyup","#userId,#password",function(){         if(event.keyCode==13){             loginFunc();         }     });

我真的想对自己说“what are you 弄啥嘞”。

当时真的是没想那么多啊。在网上查了一下都说onclick适用于动态元素,click适用于静态元素。但是并没有说为什么。上面废话一大堆,下面我说一下我的理解吧。

先说一下js中的预解释

页面初始化

变量

graph LR
变量–>| 初始化 |初始化变量但是不会赋值
初始化变量但是不会赋值–>|初始化完成|变量赋值

函数

graph LR
函数–>|初始化|在当前作用域形成一个新的空间-作为存储当前函数
在当前作用域形成一个新的空间-作为存储当前函数–>|初始化完成|执行函数

看完预解释就说一下今天的主题吧

  1. onclick和click在初始化时的区别

    1. 绑定静态元素:元素存在,预解释OK,所以是没啥区别啦;

    2. 绑定动态元素:元素不存在,预解释,元素都找不到,咋预解释啊,所以不管是onclick还是click都没有办法;

    3. 绑定静态元素实现动态元素的事件绑定:

<html>      <div class="test">         <button class="new" id="newon">NewOn</button>          <button class="new" id="newclick">NewClick</button>         <ul class="li">              <li>原先的HTML元素on<button class="deleteon">Delete</button></li>              <li>原先的HTML元素click<button class="deleteclick">Delete</button></li>          </ul>      </div>     <script>         $("#newclick").click(function(){              $(".li").append('<li>动态添加的HTML元素click<button class="deleteclick">Delete</button></li>');          });         $("#newon").click(function(){              $(".li").append('<li>动态添加的HTML元素on<button class="deleteon">Delete</button></li>');          });         $(".delete").click(function(){              $(this).parent().remove();          });          //删除选中元素         $(".li").on('click', ".deleteon", function(){             $(this).parent().remove();          })         //看看,删除不了吧         $(".deleteclick").click(function(){              $(this).parent().remove();          });     </script>      </html>

onclick的用法(jquery、jquery+原生)

关于用法,上面已经介绍了,这个也是我今天才知道的,原来在绑定事件的时候就可以加入元素,而我竟然转到了原生,一看就很菜,小白啊小白。

状况总结

动态元素绑定用onclick,静态元素绑定两者都可以,为了代码的统一还是都用onclick吧,切记,onclick可以筛选元素哦!!

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » jQuery中onClick和click有何区别?jQuery中onClick和click的区别介绍