UDN-企业互联网技术人气社区

板块导航

浏览  : 363
回复  : 2

[jQuery] 朋友,请别用onclick了

[复制链接]
泡泡兔的头像 楼主
发表于 2017-1-4 14:56:48 | 显示全部楼层 |阅读模式
  JS里的事件处理程序中我们常用的有两种,一种是onclick,一种是addEventListener,下面我们来了解下两者的区别,相信你了解之后就理解我标题的意思了。

  onclick这种方法是DOM0级,也就是最早用的,而addEventListener是DOM2级的,除此之外,DOM2级为了兼容IE,还新增加一个attachEvent方法。我在此强烈建议大家使用addEventListener,为什么,理由很简单,因为是后来出的呗,那肯定是在之前基础上优化的(会心一笑)。

  首先一个区别,onclick只能绑定一个事件,你之后再给绑定另一个事件的话,就会覆盖之前那一个。而addEventListener就不同,它可以绑定多个事件,而且可以是同一事件类型,不同效果叠加,先后执行,这样你就不必有其他的顾虑了。具体例子如下:
  1. <p id="ppp">我们都是好孩子</p>
  2. /*
  3. document.getElementById("ppp").onclick=function(){alert(1);}
  4. document.getElementById("ppp").onclick=function(){alert(2);}
  5. */
  6. **最后只弹出2,后1个把前面覆盖**
  7. --------------------------------------------------
  8. document.getElementById("ppp").addEventListener("click",function(){alert(1);})
  9. document.getElementById("ppp").addEventListener("click",function(){alert(2);})
复制代码

  或者
  1. $("#ppp").on("click",function(){alert(1);})
  2. $("#ppp").on("click",function(){alert(2);})
  3. **不仅不会覆盖,点击后先后弹出1和2。**
复制代码

  另外一个区别就是代码的可维护性了,你想想,如果用内联事件在好几个标签上都写了onclick,那要修改方法名的时候肯定得一个个修改,而addEventListener就不用担心这个问题,因为它可以把一些想要的dom节点选出来再绑定事件。

  总结一句,如果你还需要兼容IE8及以下的,那还是老老实实用onclick或者把attachEvent与addEventListener做个封装函数,或者干脆用jquery这种库。如果是移动端的项目,addEventListener是不二之选。

  在如今IE快被淘汰的时代,移动端根本不用考虑过多的兼容问题,至于PC端网页,好像有90%以上的公司都在用jquery,所以写原生JS时我不假思索的选择用addEventListener。

相关帖子

发表于 2017-1-4 14:57:19 | 显示全部楼层
js框架越来越火了, 不过本人还是喜欢原生的好, 自己写类库, 自己来封装,用着方便。。。。
使用道具 举报

回复

发表于 2017-1-4 15:12:26 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部