$（「＃選擇」）。單擊與平變化

Question

編輯爲幾個人指出，我會平變化混合的onclick ...

我this question昨天，這人的方式，固定親切回答我的貼問題，但我不明白爲什麼$("#selector").click methon可行，但onchange=(...)不行。

所以，如果我有HTML，在父元素的DataTable cloumn頭，其中頭部的任何點擊觸發的DataTable排序過程：

<div> 
    <input type="checkbox" id="select_all" onchange="SelectAll(event)"> 
    SELECT ALL 
</div> 

//This is hit only AFTER the sort routine from the parent element is fired. 
function SelectAll(event) { 
    event.stopPropagation(); 

    var boxes = document.querySelectorAll("[name*=\"include_\"]"); //All checkboxes prefixed "include_".  
    var chk = document.getElementById('select_all').checked; 

    for (var i = 0; i < boxes.length; i++) { 
     if(!boxes[i].disabled) { 
      boxes[i].checked = chk; 
     } 
    } 
} 

//This is hit BEFORE the sort routine from the parent element is fired. 
$("#select_all").click(function(event){ 
    event.stopPropagation() 
}); 
} 

第二種方法，父元素的click事件之前發射，作品對我而言，但兩者之間的根本區別是什麼？

JsFiddle

Answer 1

在onchange邏輯您所提供的全球event對象，這是不是在所有的瀏覽器，而且也不能100％保證是你所期望的單擊事件。

由於這個原因，最好避免使用on*事件屬性，並在原生JS或jQuery中使用不引人注目的事件處理程序 - 正如第二個JS示例所做的那樣。傳遞給處理函數的event對象保證是包含所需信息的相關事件。

另請注意，jQuery邏輯使用的是click事件處理程序，而不是change。您應該將.click()更改爲.change()，以便事件處理程序仍適用於通過鍵盤瀏覽網頁的人員。當元素失去焦點

Answer 2

的onChange事件通常解僱，所以點擊事件會先啓用。

Answer 3

如果你打算使用jQuery，只是使用它。你爲什麼要把老派的「onxxxx」屬性與這個混在一起？

您的代碼非常簡單。只需做到這一點：

<div> 
    <input type="checkbox" id="select_all"> 
    SELECT ALL 
</div> 

function SelectAll(event) { 
    event.stopPropagation(); 

    var chk = $('#select_all')[0].checked; 
    $("[name*=\"include_\"]").each(i, element) { 
     if(! element.disabled) { 
      element.checked = chk; 
     } 
    } 
} 

$("#select_all").click(SelectAll);