`
sangei
  • 浏览: 336420 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

click和onclick

阅读更多




$(function(){
$("#btn4").click(function(){
$("#btn3").click();
});
});
function change(){
alert("onclick");
}
dd
ee
区别:

1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么。
click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件。如上诉代码所示,当点击'ee'按钮时,会触发'dd'的onclick事件(正常来说得按'dd'按钮才触发'dd'的onclick事件),原因就是因为
$("#btn4").click(function(){
$("#btn3").click();

2.click()方法的主要作用是触发调用click方法元素onclick事件。此外,如果在click方法定义了如下代码

$("#btn3").click(function(){
alert("*****");

click方法中的function代码会在onclick事件执行完后执行,此时click方法起到追加事件的作用。实例如下:

$(function(){
$("#btn3").click(function(){
alert("aa");
});
});
function change(){
alert("bb");
}
dd


至于为什么文档里(body标签里)要加括号,而js代码里却不用,大概原因有两种解释:
第一种:


一、javascript代码中添加事件监听实际上是执行了一段JavaScript逻辑,如下代码:
document.body.onclick = fun;
将函数fun附加到body节点的click事件监听,待到点击body后才执行fun函数。如果写成下面的形式,就会将函数fun的运行结果附加为click事件监听:
document.body.onclick = fun();
当然,上面的叙述大家都知道了,之所以写出来是为了说明javascript代码中添加事件监听实际上是执行了一段JavaScript逻辑这句话,第二种写法实际上是先执行了等号右边的逻辑
二、下面讨论一下行内添加事件监听的情况。
onclick=”fun()”
这样写,我们都知道在点击之后才执行fun函数,与
document.body.onclick = fun();
的执行顺序不同,也就是说,onclick="fun()"这段代码在为onclick附加监听时并没有执行fun函数,个人理解为:行内添加监听时,并不解析等号右边的代码,当点击之后再进行解析。换句话说,在点击之前,浏览器并不知道等号右边的代码是一个函数,或者仅仅是一段无意义的字符串。
下面用实验证明上面的结论:
1. 代码一的运行结果是:点击后弹出框“1”
<div style="width:500px;height:500px;background: red;" onclick="alert('1')")></div>
2. 代码二的运行结果与一相同(Chrome):点击后弹出框“1”
<div style="width:500px;height:500px;background: red;" onclick=eval("alert('1')")></div>
3. 代码三的运行结果:无报错
<div style="width:500px;height:500px;background: red;" onclick="1")></div>
大家注意到,代码二中用了eval()函数,代码二与代码一的运行结果相同,可以说明:在点击之前并不解析等号右边的代码。代码三无报错说明:添加事件监听并不一定是函数,而是将等号右边的代码将onclick属性赋值,待到点击后再解析等号右边的内容,如果是函数就执行,不是函数则无结果。
 
第二种:

你说的那两个严格说并不是等价的。
<tag onclick="func();">
其实等价于
ele.onclick=function(){func();};
(这里说的“等价”不细致讨论上层变量作用域;以及火狐下自带一个event首参)

另外,
ele.onclick=func;
这种写法在低版本IE浏览器中是不支持的。

——
至于ele.onclick=func();,这真的已经不是写法的区别了,意思都差远了。这时的ele.onclick等于什么,完全取决于func执行时return的结果。

——解释括号里的话之火狐event——
在火狐中,event不是window.event,而是function的第一个参数;此时,
<tag onclick="func();">
其实等价于
ele.onclick=function(event){func();};
((其实具体使用上仍不完全等价。比如为了兼容这两类浏览器,可以写:
<tag onclick="event.preventDefault();">
但是放到js上下文里就必须:
ele.onclick=function(event){
    (event||window.event).preventDefault();
};
))

——解释括号里的话之上层变量作用域——
<tag onclick="open(title);">
其中出现的变量会先查找这个tag.open、tag.title是否存在,
否则上溯document.open、document.title是否存在(据说部分浏览器会不断上溯查找上级父元素中的部分特殊元素,然后才上溯到document),
然后才上溯到window.open、window.title是否存在,
再不存在就报错。
自从学习了with语法,我才明白这种诡异的上溯究竟是怎么回事。
而在js上下文里,function中的变量是谁决定于定义function的位置外面一层层的function包裹,进行上溯。比如:
var top;
(function(){
    var parent;
    ele.onclick=function(){
        var self;
    };
})();
 
 
分享到:
评论

相关推荐

    JavaScript中click和onclick本质区别与用法分析

    本文实例讲述了JavaScript中click和onclick本质区别与用法。分享给大家供大家参考,具体如下: 原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击。...

    关于 onclick 与 bind ‘click’ 的讨论

    总之,`onclick`和`bind('click')`是处理点击事件的两种不同策略,前者适合快速原型和简单场景,后者更适合大型项目和复杂交互。理解它们的工作原理和优缺点,有助于我们做出更合适的技术选择,提高代码质量和可维护...

    js动态添加onclick事件可传参数与不传参数

    总结来说,在JavaScript中动态添加onclick事件并传递参数,可以通过匿名函数、闭包或者jQuery的`.click()`方法来实现。这些方法允许我们在不同的场景下灵活地处理参数传递的问题,从而更好地控制元素的行为。在实际...

    $(“”).click与onclick的区别示例介绍

    [removed] $(function(){ $("#btn4").click(function(){ $("#btn3").click(); }); });...function change(){ ..."onclick"&#41;...button id="btn3" onclick="change()"&gt;...click本身是方法作用是触发onclick事件

    input按钮onclick事件大全

    ### Input按钮Onclick事件详解 在Web开发中,`&lt;input&gt;`标签是HTML文档中最常用的元素之一,常用于创建各种交互式按钮、输入框等。`onclick`属性则允许我们在用户点击这些元素时执行特定的JavaScript代码。下面将...

    onclick与ontouch和scroll监听冲突的解决方法

    在Android开发中,我们经常会遇到各种事件监听器的冲突问题,特别是`onclick`、`ontouch`和`scroll`监听器。这些事件在用户交互时可能会同时触发,导致不期望的行为,例如,当用户尝试滚动页面时,点击事件却意外...

    jquery A标签onclick事件

    ### jQuery 下 A 标签 onclick 事件处理 在前端开发中,经常需要为页面中的元素绑定事件处理函数,其中 `onclick` 事件是最常见的交互方式之一。jQuery 是一个流行的 JavaScript 库,它提供了简单易用的方法来处理...

    jsp的onclick页面事件

    jsp的onclick页面事件 包含打开保存 跳转 关闭等

    Spring boot + thymeleaf 后端直接给onclick函数赋值的实现代码

    "Spring Boot + Thymeleaf 实现后端直接给 onclick 函数...同时,本篇文章还介绍了 Thymeleaf 模板引擎、Spring Boot 中的 Thymeleaf 配置、使用 Thymeleaf 生成动态 HTML 内容、onclick 事件处理和 JS 函数等知识点。

    android悬浮框的onTouch和onClick事件同时存在

    在实现悬浮窗时,我们经常需要处理用户的触摸交互,包括单击(onClick)和滑动(onTouch)事件。标题提到的“android悬浮框的onTouch和onClick事件同时存在”是指在悬浮窗上,既能够响应用户的点击操作,又能够正确...

    $("").click与onclick的区别示例介绍

    在JavaScript和jQuery中,`onclick` 和 `click()` 都是用来处理用户点击事件的,但它们之间存在着一些关键的区别。 `onclick` 是一个HTML属性,它用于在元素上直接绑定事件处理函数。当你在HTML元素中设置 `onclick...

    HTML_Button[1].onclick_事件汇总

    例如:&lt;input onclick="alert('Hello World!')" type="button" value="点击我"&gt; 在上面的示例中,当用户点击 Button 时,将弹出一个提示框,显示“Hello World!”。 HTML Button 的 onclick 事件汇总可以分为以下...

    jquery绑定click事件传递参数

    在JavaScript的世界里,jQuery库以其简洁的API和强大的功能深受开发者喜爱。在处理用户交互时,经常需要绑定点击(click)事件来响应用户的操作。本文将深入探讨如何使用jQuery来绑定click事件,并传递参数。 首先...

    A标签触发onclick事件而不跳转的多种解决方法

    一个标签仅仅是要触发onclick行为; 2.表现上要有鼠标的pointer指针显示,或者其他类似a标签的视觉效果。 比如执行删除操作时,为了避免误操作,我们要弹出对话框让用户确定是否删除。因此我们经常会用链接&lt;a&gt;&lt;/a&gt;...

    Firefox不支持click方法的解决

    在 IE8 浏览器中,对于 input type=file 的文件上传控件,执行 click 方法只能触发 onclick 事件绑定的代码执行,而不能弹出文件选择对话框。这是因为 IE8 浏览器对文件上传控件的限制。 initEvent 方法用于初始化...

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    在标准模式下,IE8及以下版本不支持通过`setAttribute`直接为元素添加事件监听器,这与现代浏览器如Chrome和Firefox存在差异。为了确保兼容性,通常推荐使用`addEventListener`方法为元素添加事件监听器,但由于IE8...

    onclick锚点定位

    这种技术主要基于HTML的锚点(Anchor)元素和JavaScript的onclick事件,结合CSS来实现页面右侧浮动锚点的功能。下面将详细介绍这个主题的各个方面。 首先,HTML锚点是通过`&lt;a&gt;`标签的`href`属性与`#`符号结合使用的...

    给flash加onclick事件

    了解并掌握以上知识点,你就能成功地为Flash对象添加onclick事件,从而提升其交互性和用户体验。在实际应用中,你可能还需要考虑兼容性、性能优化以及安全性等问题,这些都是开发交互式Flash内容时的重要考量因素。

    A标签中通过href和onclick传递的this对象实现思路

    当涉及到在`&lt;a&gt;`标签上同时使用`href`属性和`onclick`事件时,`this`对象的行为可能会变得复杂,特别是在想要传递当前元素引用给一个处理函数时。本文将详细解释这个问题,并提供解决思路。 首先,`this`关键字在...

Global site tag (gtag.js) - Google Analytics