js 注册事件机制问题

Question

js 注册事件机制问题

不是很明白为啥在

1. 在 html 中调用 onclick 方法时, 需要写成 onclick="showMsg()", 而不是 onclick="showMsg"

2. 在 js 中调用 onclick 时, 需写成 msg2.onclick = showMsg, 而不是 msg2.onclick = showMsg()

源码:

  <div 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>
  </div>

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

Answer 1

在html中定义的onclick的值是字符串，而onclick浏览器会尝试把它当函数，于是会使用类似eval的方式去执行这段字符串。为啥不是指向方法就是因为从字符串是没法得到同名函数的，除非你知道函数属于哪个对象，然后通过中括号的方式得到函数。所以html里面不能写成函数名的字符串。而js中你用ele.onclick = showMsg();这个的含义是把showMsg()的调用值赋值给onclick，得到的结果当然不和预期，onclick的值只能是函数或可执行的代码。