我给 div 绑定一个 click 事件,代码如下:
<div onclick="click()"></div>
<script>
function click() {
console.log('click')
}
</script>
单击触发 click 事件,运行结果如下:
我发现控制台没有任何的输出,第一时间我检查了一下代码,看上去好像没有任何问题呀。
突然想到, [难道 handle 函数的名字不能为 click ?] 我试着修改为 myclick,修改后代码如下:
<div onclick="myclick()"></div>
<script>
function myclick() {
console.log('click')
}
</script>
重新运行,结果如下:
居然真的可以,难道 handle 函数名不可以和事件名相同? js 中还有这样的规定? [心想,我 js 基础太差了吧]
我开始实验其他事件是不是也有相同的规定,所以我将 click 事件修改为 dblclick 事件,代码如下:
<div ondblclick="dblclick()"></div>
<script>
function dblclick() {
console.log('dblclick')
}
</script>
双击触发事件,结果如下:
居然可以 log 出来? [不是说好的 handle 函数名不能和事件名相同么?] 什么情况???
接下来我测试了 mousedown, mouseup, keyup, keydown, keypress 事件,都可以 log 出来,这就不上图了。
凭直觉, [应该只有 click 事件处理函数名不能为 click ] ,但这是为什么呢?
我加断点调试再次确定了没有执行 script 中的 click 处理函数。
我分析名为 click 的事件处理函数没有被调用的原因,难道是被覆盖了?
如果是这样的话,那么我应该可以 console.log(click)
,代码如下:
<div onclick="console.log(click)"></div>
运行结果如下:
显而易见这样写是不可以的:
<div onclick="myclick()"></div>
<script>
function myclick() {
console.log(click) //ReferenceError: click is not defined
}
</script>
[果然是本地函数 click 覆盖了名为 click 的处理函数] ,但是随意想想,什么情况?有全局 click 函数???
下面就是让我感到不解的地方。
第一:既然可以在 dom 元素中 onclick="console.log(click)" ,并且没有类似于 window.Array === Array //true 等本地函数,因为 window.click //undefinded。那么这个 click 究竟被谁引用着?或者说为什么只有内联 js 才可以 console.log(click) 。
第二:我测试了下面的代码:
<div onclick="console.log('click'); click()"></div>
运行结果如下:
难道执行了两次 onclick 中的代码?
试着再调用一次 click(),代码如下:
<div onclick="console.log('click'); click(); click()"></div>
看出来了规律:
但是怎么解释这个运行结果?这也没有递归啊,js 引擎是怎么执行这段代码的?
希望大家可以解决这个问题!
环境:win10 + chrome
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.