Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在jquery使用onclick调用函数时使用.click()

在jquery使用onclick调用函数时使用.click()
EN

Stack Overflow用户
提问于 2015-04-13 14:06:25
回答 5查看 3.7K关注 0票数 1

我对jQuery相当陌生,但我想知道,当按钮做一些事情时,最佳实践是什么。

我应该使用.click()吗?

代码语言:javascript
运行
AI代码解释
复制
<button id="submit" class="btn btn-default">Submit</button>

JS

代码语言:javascript
运行
AI代码解释
复制
$('#submit').click(function(){
    //DO SOMETHING
});

或者调用一个函数

代码语言:javascript
运行
AI代码解释
复制
<button class="btn btn-default" onclick="Submit();">Submit</button>

JS

代码语言:javascript
运行
AI代码解释
复制
function Submit() {
    //DO SOMETHING
}

我的问题是,这两种方法的行为方式是相同的吗?如果不是,的优点是什么?

*我试过了,似乎也是这样做的,但作为jQuery新手,我想确定一下。

EN

回答 5

Stack Overflow用户

发布于 2015-04-13 14:14:54

他们的行为(内部)不一样。

使用onClick可以直接将click事件绑定到性能更好的函数上。

JQuerys .click()添加了一个事件侦听器,它有几个优点(除了更具可读性)。

  • 它允许为一个事件添加多个处理程序。这对于需要很好地工作的DHTML库或Mozilla扩展特别有用,即使使用了其他库/扩展。
  • 它为您提供了更细粒度的控制,当侦听器被激活时(捕获和冒泡)
  • 它适用于任何DOM元素,而不仅仅是HTML元素。

有关更深入的信息,请参见此答案:jQuery.click() vs onClick

票数 2
EN

Stack Overflow用户

发布于 2015-04-13 14:13:49

这是我最喜欢的两种选择。

在jQuery中使用jQuery应该做与onClick相同的事情(尽管它们在技术上的工作方式不同),所以我认为没有理由选择onClick而不是click()。另一件事是,如果你曾经构建一个Chrome扩展onClick是不允许的。

示例:

代码语言:javascript
运行
AI代码解释
复制
$(element).click(function(){
   ...
});

另一个选项是使用on()函数。与监视特定元素的click()不同,on()将监视事件的一切(在您定义的上下文中)。如果您的动态元素具有相同的类,这是非常有用的。

代码语言:javascript
运行
AI代码解释
复制
$(element).on('click', function(){
   ...
});

这两种功能都很有用,这取决于具体情况。要回答您最初的问题:不,我认为没有理由在click()上使用click()

希望这不是太离题,但我知道的信息,当我开始。

票数 1
EN

Stack Overflow用户

发布于 2015-04-13 14:18:42

为了保持可维护性和可读性,您应该将HTML和JavaScript分开。onclick="Submit();"的问题是JavaScript片段Submit()被嵌入到HTML中。在概念上,这类似于另一种应该避免的技术,内联样式,其中HTML和CSS是混合的。

实行语言分离可以使将来的更改变得更容易。举个例子,假设您从以下几个方面开始:

代码语言:javascript
运行
AI代码解释
复制
$('#submit').click(function(){
    //DO SOMETHING
});

它将功能附加到表单按钮提交。

但是,沿着这条路走下去,您会意识到,在文本输入上按回车/返回也会提交一个HTML表单。要处理这个问题,您所需要做的就是更改一行JavaScript:

代码语言:javascript
运行
AI代码解释
复制
$('#myform').on("submit", function(){
    //DO SOMETHING
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29615891

复制
相关文章
jQuery函数的使用
上述代码将从Google的CDN中加载jQuery库。确保将其放在<head>标签或页面内容的顶部。
堕落飞鸟
2023/05/18
1.6K0
jquery 绑定click事件
有时候需要获得匹配元素相对于其同胞元素的索引位置,此时可以用index()方法获取
Devops海洋的渔夫
2019/05/30
4.6K0
使用jQuery封装实用函数
一、引言 项目开发中,前端会有一个辅助工具类的js文件,比如cookie的操作,团队成员自己封装的方法。大多数时候,我们开发人员自己都是写一个全局函数,不考虑后期维护人员也会写相同的代码,然后造成代码之间的冲突。之前维护的一段代码如下: var g=function(id){ return document.getElementById(id); }; var $$=function(id){ return document.getElementById(id); }; g("testdi
八哥
2018/01/18
1.4K0
jQuery点击click()事件
<p>这是一个段落。</p> <button onclick="active()">切换</button> <script> $(document).ready(function(){ $("button").click(function(){ $("p").slideToggle(); }); function active(){ $("p").slideToggle(); } }); </script>
明知山
2020/09/03
10.3K0
jQuery 双击事件(dblclick)时,不触发单击事件(click)
在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click)。 先看一下点击事件的执行顺序:
飞奔去旅行
2019/06/13
5.7K0
js用户注册表单验证_onclick调用js函数
<p> <button type=”button” onclick=”myFunction()”>点击这里</button> </p>
全栈程序员站长
2022/09/20
9.4K0
怎么在layuiAdmin中使用jQuery?
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用
沈唁
2018/10/26
3.6K0
怎么在layuiAdmin中使用jQuery?
Functrace:使用DynamoRIO追踪函数调用
Functrace是一款使用DynamoRIO(http://dynamorio.org/)通过动态检测分析二进制文件的工具。
FB客服
2019/07/09
1.8K0
Functrace:使用DynamoRIO追踪函数调用
oracle函数的调用应使用execute命令_matlab函数调用
之前一直使用的MySQL数据库,第一次接触Oracle就用到了函数和存储过程,今天跟大家分享一下使用过程.
全栈程序员站长
2022/10/04
2.4K0
oracle函数的调用应使用execute命令_matlab函数调用
jquery on绑定click事件执行多次
用$(document).on('click','#XX',function(){...})为元素添加点击事件 结果导致事件会执行多次 。 出现这种情况是因为每点击一下document就会绑定一遍事件,click事件进行了累加绑定,每调用一次,便增加一次绑定,所以导致触发多次事件。
似水的流年
2020/09/11
4.5K0
在vue项目中使用jquery和jquery插件
Vue之所以受欢迎,主要就在于它的轻量和灵活,我们可以用vue做SPA,也可以用它做多页应用,一个页面对应一个VUE实例。而且因为他的轻量,低侵入性,所以我们可以很方便地和其他框架或者库搭配使用,那么我们怎么在基于vue的SPA应用中搭配jquery使用呢?
fastmock
2022/07/13
1.7K0
在 jQuery Mobile 中使用 UI 组件
jQuery Mobile JavaScript 库是一种强大的方式,允许用户通过 Web 浏览器直接连接到触摸友好的应用程序,从而让移动和平板设备可以访问移动应用程序。
用户7293182
2020/07/20
8.6K0
jquery跨js文件调用函数示例
1 var common_func; (function() { 2 common_func = { 3 load_hot_data: function(AreaCode)
指尖改变世界
2019/10/21
5.4K0
使用jQuery
jQuery概述 Write Less Do More(用更少的代码来完成更多的工作) 使用CSS选择器来查找元素(更简单更方便) 使用jQuery方法来操作元素(解决浏览器兼容性问题、应用于所有元素并施加多个方法) 引入jQuery 下载jQuery的开发版和压缩版 从CDN加载jQuery <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> window.jQuery ||
用户8442333
2021/05/20
1.1K0
在模板中使用函数
系统自带的函数,一般在functions.php中 // C函数,获取配置名称 <title>{:C('WEB_SITE_TITLE')}</title> // U函数,获取URL地址 <a class="brand" href="{:U('index/index')}">OneThink</a>
PM吃瓜
2019/08/12
1.3K0
在模板中使用函数
在 vue 中使用 axios 调用数据
如何在 vue 中完成一次接口的调用?首选就是 axios,方便快捷又好用,支持各种 api ,封装也很方便。
子舒
2022/06/09
7400
JS中onclick函数自动执行问题
第一种写法是每次加载时,先调用clickCon方法,然后将执行结果赋给onclick,每次都会执行
西柚dzh
2022/06/09
6K0
使用Python在Windows下调用W
import os import time source='C:\\Linda\\Test\\Python\\source' target_dir='C:\\Linda\\Test\\Python\\backup\\' target=target_dir + time.strftime('%Y%m%d%H%M%S')+'.rar' print(target) rar_command = "winrar a %s %s"%(target,source) print (ra
py3study
2020/01/09
5570
点击加载更多

相似问题

jQuery.click()在onClick之后调用

13

使用onClick调用jquery函数

42

使用jquery .click函数调用fancybox

50

使用onclick调用函数更好,还是使用.click绑定事件更好?

32

使用click()调用jQuery中的函数

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档