不是很明白为啥在
在 html
中调用 onclick
方法时, 需要写成 onclick="showMsg()"
, 而不是 onclick="showMsg"
在 js
中调用 onclick 时, 需写成 msg2.onclick = showMsg
, 而不是 msg2.onclick = showMsg()
源码:
<p id="row">
<!--right-->
<p id="msg1" onclick="showMsg()">click me</p>
<!--error-->
<!--<p id="msg1" onclick="showMsg">click me</p>-->
<p id="msg2">click me too</p>
</p>
js:
var row = document.getElementById('row');
var msg1 = document.getElementById('msg1')
var msg2 = document.getElementById('msg2')
// right
msg2.onclick = showMsg
// error
msg2.onclick = showMsg()
function showMsg (e) {
if (e && e.target) {
console.log(e.target)
} else {
console.log('click msg1');
}
}
在html中定义的onclick的值是字符串,而onclick浏览器会尝试把它当函数,于是会使用类似eval的方式去执行这段字符串。为啥不是指向方法就是因为从字符串是没法得到同名函数的,除非你知道函数属于哪个对象,然后通过中括号的方式得到函数。所以html里面不能写成函数名的字符串。
而js中你用ele.onclick = showMsg();这个的含义是把showMsg()的调用值赋值给onclick,得到的结果当然不和预期,onclick的值只能是函数或可执行的代码。
()代表执行的意思,一个函数去执行,并定产生动作和结果。而系统事件click,是要去执行动作的,如果这个时候你加了
onclick={ show()}
那么这样就先去执行show函数。也就是加了()就是立即执行,当你在产生点击事件的时候,后面{}里面的只有结果,并没有动作,所以浏览器什么也不会发生