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

功能描述:点击按钮实现复制之后跳转
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个回答

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

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

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

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

jslang
天际的海浪 回复CamilleZJ: 所以不需要你来绑定click事件,只要在页面解析完毕时执行handle();就可以了。 $(function(){ handle(); });
一年多之前 回复
jslang
天际的海浪 回复CamilleZJ: 它是在 Clipboard()函数内部绑定的事件
一年多之前 回复
CamilleZJ
CamilleZJ 回复jslang: handle()方法就是实现了复制,复制成功之后跳转,并没有给其父元素也绑定click事件
一年多之前 回复
CamilleZJ
CamilleZJ 回复jslang: function handle() { var clipboard = new Clipboard('.watch-btn', { text: function() { return "link="+link; } }); clipboard.on('success', function(e) {....}); }
一年多之前 回复
jslang
天际的海浪 回复CamilleZJ: 可能是你实例化的对象中为.watch-btn的某一父元素(如body元素)也绑定了click事件。 这样在.watch-btn的事件触发(为父元素绑定事件)之后,会因为事件冒泡,直接冒泡到这个父元素上触发父元素的事件。 但是方法二是委托式绑定事件。事件实际是绑定在 document上的,document是最顶层元素,不会冒泡到别的元素上。这样只有下次点击才能触发实例化的对象绑定的事件
一年多之前 回复
CamilleZJ
CamilleZJ 可能我描述的不太清楚,这个问题主要在于绑定的方法中我实例化了一个对象,主要完成复制功能,就是这个实例化方法二第一次点击的时候只实例化了对象,第二次才调用这个对象的复制方法,但是方法一点击就可以。我主要是想知道为什么方法一正常,方法二需要第二次才可以
一年多之前 回复

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

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

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

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

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

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

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

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

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

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

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

共12条数据 1 尾页
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jsp中使用java的out.print打印的复选框无法绑定事件
-
onload直接执行导致onclick事件无法绑定
-
客户端可以绑定几个事件 除了onclick 还有什么通过点击击发的事件吗?
-
Chrome插件popup.js的onclick无效
-
extjs <a>标签不支持onclick事件吗
-
在table中tr标签中有一个onclick()事件,
-
为iframe添加onclick和onmousemove事件
-
jstl表达式下onclick事件失效
-
onClick没有定义,有大佬知道怎么办吗,卡了好几天了
-
React使用antd的TabBar后onClick事件为什么无法绑定?
-
js onclick 事件获得的值只显示一瞬间就消失了
-
ajax里success的内容不执行,前面的执行,网上的方法试了不行2 。
-
原型链里的方法怎么在onclick事件里调用
-
html中a标签的onclick事件
-
bootstrap3 modal 事件监听多次 关闭事件绑定未解除
-
bootstrap3 modal 事件监听多次 关闭事件绑定未解除?
-
submit按钮同时有onclick事件,如何让onclick的方法实行在表单提交之后
-
各位大佬帮忙看看,为什么不能翻页,只显示5个数据?
-
Android关于Onclick事件与OnTouch事件冲突问题
-
程序员实用工具网站
目录 1、搜索引擎 2、PPT 3、图片操作 4、文件共享 5、应届生招聘 6、程序员面试题库 7、办公、开发软件 8、高清图片、视频素材网站 9、项目开源 10、在线工具宝典大全 程序员开发需要具备良好的信息检索能力,为了备忘(收藏夹真是满了),将开发过程中常用的网站进行整理。 1、搜索引擎 1.1、秘迹搜索 一款无敌有良心、无敌安全的搜索引擎,不会收集私人信息,保...
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
别再翻了,面试二叉树看这 11 个就够了~
写在前边 数据结构与算法: 不知道你有没有这种困惑,虽然刷了很多算法题,当我去面试的时候,面试官让你手写一个算法,可能你对此算法很熟悉,知道实现思路,但是总是不知道该在什么地方写,而且很多边界条件想不全面,一紧张,代码写的乱七八糟。如果遇到没有做过的算法题,思路也不知道从何寻找。面试吃了亏之后,我就慢慢的做出总结,开始分类的把数据结构所有的题型和解题思路每周刷题做出的系统性总结写在了 Github...
Java泛型 通配符详解
对于<? super 类型>,编译器将只允许写操作,不允许读操作。即只可以设值(比如set操作),不可以取值(比如get操作)。 对于<? extends 类型>,编译器将只允许读操作,不允许写操作。即只可以取值,不可以设值。 以上两点都是针对于源码里涉及到了类型参数的函数而言的。比如对于List而言,不允许的写操作有add函数,因为它的函数签名是boolean add(E e);,此时这个形参E就变成了一个涉及了通配符的类型;而不允许的读操作有get函数,因为它的函数签名是E get(int index)
代码整洁 vs 代码肮脏
写出整洁的代码,是每个程序员的追求。《clean code》指出,要想写出好的代码,首先得知道什么是肮脏代码、什么是整洁代码;然后通过大量的刻意练习,才能真正写出整洁的代码。 WTF/min是衡量代码质量的唯一标准,Uncle Bob在书中称糟糕的代码为沼泽(wading),这只突出了我们是糟糕代码的受害者。国内有一个更适合的词汇:屎山,虽然不是很文雅但是更加客观,程序员既是受害者也是加害者。 对...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
接私活必备的 10 个开源项目!
点击蓝色“GitHubDaily”关注我加个“星标”,每天下午 18:35,带你逛 GitHub!作者 | SevDot来源 | http://1t.click/VE8W...
阿里资深工程师教你如何优化 Java 代码!
作者 | 王超 责编 | 伍杏玲 明代王阳明先生在《传习录》谈为学之道时说: 私欲日生,如地上尘,一日不扫,便又有一层。着实用功,便见道无终穷,愈探愈深,必使精白无一毫不彻方可。 代码中的"坏味道",如"私欲"如"灰尘",每天都在增加,一日不去清除,便会越累越多。如果用功去清除这些"坏味道",不仅能提高自己的编码水平,也能使代码变得"精白无一毫不彻"。这里,整理了日常工作中的一...
周杰伦新歌《说好不哭》上线,程序员哭了......
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 前些天,场主的朋友圈被一首歌刷屏了。 数据有多牛逼?除了揽获各大新闻头条,新歌发售3小时,数字专辑就在QQ音乐卖了360万张。以单价3元计算,一首《说好不哭》已狂揽千万...
GitHub开源的10个超棒后台管理面板
目录 1、AdminLTE 2、vue-Element-Admin 3、tabler 4、Gentelella 5、ng2-admin 6、ant-design-pro 7、blur-admin 8、iview-admin 9、material-dashboard 10、layui 项目开发中后台管理平台必不可少,但是从零搭建一套多样化后台管理并不容易,目前有许多开源、免费、...
Java中创建对象的5种方法
将会列举5种方法去创建 Java 对象,以及他们如何与构造函数交互,并且会有介绍如何去使用这些方法的示例。 作为一个 Java 开发人员,我们每天都会创建大量的 Java 对象,但是我们通常会使用依赖管理系统去创建这些对象,例如 Spring 。然而,我们可以有更多的方式去创建对象,让我们一起在文章中去学习这些方法吧。 这里列举在 Java 中创建对象的五种方式,下面将介绍它们的示例,以及创建对象...
100 个网络基础知识普及,看完成半个网络高手
欢迎添加华为云小助手微信(微信号:HWCloud002或HWCloud003),输入关键字“加群”,加入华为云线上技术讨论群;输入关键字“最新活动”,获取华为云最新特惠促销。华为云诸多技术大咖、特惠活动等你来撩! 1)什么是链接? 链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。 2)OSI 参考模型的层次是什么? 有 7 个 OSI 层:物理...
动画:面试如何轻松手写链表?
写在前边 暑假参加的第一个公司的就让我手写一个双向链表,并完成插入数据和删除数据的操作。当时我很蒙蔽,懵逼的不是思路,而是手写,虽然写出来了,但是很多边界条件和代码规范自我感觉不好,所以有了这些细心的总结。那么今天的主题就是徒手写链表,应聘者该如何下手? 我们通常写链表准备应聘的时候,通常背加上理解,但是过了几天又让你写。就会陌生了,虽然有点思路。还是模模糊糊,小鹿也有这个记性的“毛病”,“有毛病...
栈和队列:面试题(Java)
两个队列实现一个栈 使用两个队列完成栈的功能, 思路: 如上图,入队顺序为:1 2 3 4 5,如果要模拟栈的功能,那么就要上5先弹出来,因为是队列,所以只能从1开始出,把1 2 3 4存到另外一个队列中,这样就可以把5弹出来了: 这样就完成了一次出栈,这下上面的队列为空,所有的数据存储在下面这个队列中: 如果要继续出栈,那么就把1 2 3 挪到空的队列中,弹出4,到这里已经明白了如何模拟出...
Google离开我们快十年了
2010年1月13日,Google离开中国。掐指算来,Google已经离开我们快十年了。2010年是个特殊的年份,这一年还发生了3Q大战。为什么诸多大事都发生在2010年...
中国最顶级的一批程序员,从首富到首负!
过去的20年是程序员快意恩仇的江湖时代通过代码,实现梦想和财富有人痴迷于技术,做出一夜成名的产品有人将技术变现,创办企业成功上市这些早一代的程序员们创造的奇迹引发了一浪高...
为什么面向对象糟透了?
又是周末,编程语言“三巨头”Java, Lisp 和C语言在Hello World咖啡馆聚会。服务员送来咖啡的同时还带来了一张今天的报纸, 三人寒暄了几句, C语言翻开了...
分享靠写代码赚钱的一些门路
作者 mezod,译者 josephchang10如今,通过自己的代码去赚钱变得越来越简单,不过对很多人来说依然还是很难,因为他们不知道有哪些门路。今天给大家分享一个精彩...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
程序员该如何把 Windows 系统打造的跟 Mac 一样牛逼?
起因:之前一直用Mac开发,换了家公司,只许用Windows下开发,说实话,一开始我是拒绝的,可自从看到了这几个工具以后......1、终端工具:item2 VS Cmd...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
相关热词 c# 应用r包 c# excel格式刷 c# 监控word保存 c#中字符串排序 c# 打印方向 c# 获取根目录 c#语言文档 c#设置开机自启动 c# cpu id 主板 c# timer越来越卡

相似问题