javascript - onclick 事件點選將ask()直接寫入和呼叫的區別

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

可以直接運行成功

但是將其寫成以下形式不能正確運行，return false 沒有被捕獲，當點擊取消時，鏈接仍然跳轉 ，這是為什麼？

函數如下：

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

寫成如下形式可以正確運作：

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

求教三種寫法的差別

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