javascript – Der Unterschied zwischen dem direkten Schreiben von ask() und dem Aufruf beim Klicken auf das onclick-Ereignis

Question

window.onload=init;
function init(){
    var x=document.getElementsByTagName('a');
    for(var i in x){
        x[i].onclick=function(){
            return confirm('are you sure?');
        }
    }
}

Kann erfolgreich ausgeführt werden

Aber das Schreiben im folgenden Formular funktioniert nicht richtig. Wenn auf „Abbrechen“ geklickt wird, springt der Link immer noch.

Die Funktion ist wie folgt:

window.onload=init;
function init(){
    var x=document.getElementsByTagName('a');
    for(var i in x){
        x[i].onclick=function(){
        ask();
        }
    }
}
function ask(){
    return confirm('are you sure?');
}

Geschrieben in der folgenden Form kann korrekt ausgeführt werden:

window.onload=init;
function init(){
    var x=document.getElementsByTagName('a');
    for(var i in x){
        x[i].onclick=ask;
    }
}
function ask(){
    return confirm('are you sure?');
}

Bitte erklären Sie mir den Unterschied zwischen den drei Schreibmethoden

Answer 1

首先题主先要知道 confirm('are you sure?') 点确定会返回true,点返回会返回false;

然后再说三种写法并没有实质上的区别，只是变着花样返回值而已：
1.你懂
2.ask() 改为 return ask();
3.三种中最好的写法

另外

• 看题主在研究事件绑定，如果是给一堆有规则的元素，如列表li绑定事件，最好的办法叫事件委托:

<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }
}

• 再搞懂js的事件机制，捕获和冒泡的话，就差不多了。

• 最后兼容性什么的IE：attachEvent，标准：addEventListener

Answer 2

第二种你是没有return

window.onload=init;
function init(){
    var x=document.getElementsByTagName('a');
    for(var i in x){
        x[i].onclick=function(){
        return ask();
        }
    }
}
function ask(){
    return confirm('are you sure?');
}