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;
    };
})();

猜你喜欢