CamilleZJ
CamilleZJ
采纳率0%
2018-06-25 02:45 阅读 7.3k

标签上直接添加onclick事件和jq绑定onclick事件有什么区别

5

功能描述:点击按钮实现复制之后跳转
1. 标签上直接添加onclick事件:

 <div class="btn watch-btn" onclick="handle()">查看TA的个人主页</div>
  1. jq绑定onclick事件
  <div class="btn watch-btn">查看TA的个人主页</div>
 <script>
$(document).on('click', '.watch-btn', function(){
        handle();  
});
</script>

现象: handle(); 方法中有个实例化对象,之后方法2jq绑定onclick事件需点击两次才能复制成功并跳转,而方法1只要点击就可以。

提问:请问这两个方式实现onclick事件有什么区别?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

12条回答 默认 最新

  • weixin_39633318 weixin_39633318 2018-06-25 06:33

    元素上绑定onclick属于dom 0级事件
    jquery on 方法绑定事件 属于dom 2级事件

    点赞 2 评论 复制链接分享
  • jslang 天际的海浪 2018-06-25 08:33

    这两个方法都是只需点击一次就可以的。方法2需要点击两次应该是其它原因引起的。

    两者的区别是
    方法一是直接在元素本身上绑定事件,如果有多个元素需要绑定事件。则每个元素都必须单独绑定,这样比较占用内存,也影响元素解析速度。而且这种方法同一事件只能绑定一个,当然一个事件中可以调用多个其它函数。

    方法二是委托式绑定事件。事件实际是绑定在 document上的,你每次点击时都会判断事件是否是从.watch-btn冒泡上来的,是才执行事件函数。这样可以设置一次对多个元素同时生效,即使是未来创建的元素也有效,比较不占用内存。对同一事件可以绑定多次。

    点赞 2 评论 复制链接分享
  • qq_27848369 hot2dog 2018-06-25 04:22

    第二种方式 更加好、代码显得优雅、效率、维护性更好。。。 本质利用了事件捕获、事件冒泡

    (1)只在document 元素上 绑定了 click 方法, 利用 事件捕获、事件冒泡,传递事件给 子元素, 有 .watch-btn 就响应。
    事实上,也是 document 元素 接收 点击事件,向下传递给子元素的,这个写法很好。。。
    现在 bootstrap 里面大量运用这种写法,,值得推荐。。
    (2)假如handle( )方法有变,只需改动一个地方。。更方便。。。

    点赞 1 评论 复制链接分享
  • sinat_23659721 华南仔 2018-06-25 04:57

    第一种是显示的进行绑定方法,从用户角度,可以直接就能看到你绑定的方法,然后寻到对应的方法,进行方法更改,然后触发,存在危险性。
    第二种方法较第一种,可以实现绑定操作,html里标签可观性加大。而且书写的方法自由度加大。

    点赞 1 评论 复制链接分享
  • a394149398 叮当你去哪了 2018-06-25 08:38

    第二种有点风险,当你的html元素还没加载完,js此时找不到要绑定的元素,会导致绑定失败

    点赞 1 评论 复制链接分享
  • qq_39463502 qq_39463502 2018-06-25 03:04

    很多后台人员喜欢在标签上直接添加onclick方法,前段人员则习惯绑定此方法,两者没有太大的区别,习惯问题吧

    点赞 评论 复制链接分享
  • Lei_Da_Gou Lei_Da_Gou 2018-06-25 03:12

    直接在标签上写onclick,用js动态生成标签,onclick方法也能执行。
    在js代码块中给某个标签绑定click,如果后面用js又动态生成对应标签那么click绑定的方法不会再执行

    点赞 评论 复制链接分享
  • Lei_Da_Gou Lei_Da_Gou 2018-06-25 03:13

    两者还是有区别的,可能我说的这种情况你没有遇见过而已

    点赞 评论 复制链接分享
  • hwen123954 路军兄弟 2018-06-25 04:18

    以个是写死的动作名称,一个是可以用变量来进行修改的!

    点赞 评论 复制链接分享
  • jianxisong jianxisong 2018-06-25 06:49

    第一种和第二种的效果是一样,可以附加多个事件处理函数,并不是只有使用jquery才能做到。 第三种方法不推荐使用,原则上HTML代码只能体现网页的结构,具体的行为应该使用javascript代码进行绑定。

    除非页面上绑定事件的元素超过上万个,否则响应速度的时候就不必纠结了,只做个事件绑定还是很快的。我测试了一下,使用addEventListener绑定3000次,耗时3-4毫秒。

    如果项目中统一使用jQuery的话,建议使用第一种做法,顺便还解决了IE的不兼容问题

    点赞 评论 复制链接分享
  • qq_35607905 夜晚De冷风 2018-06-25 07:14

    jquery on有JS文件版本限制
    建议使用第一种

    点赞 评论 复制链接分享
  • qq_35955916 程序员的键盘 2018-06-25 10:26
      <script>
        $(function(){
        $('.watch-btn').click(handle);
        });
    
    </script>
    
    点赞 评论 复制链接分享

相关推荐