Question

编辑时，几个人指出我混合了onchange和onclick ......

我昨天发布了this question，有人以解决我问题的方式回答，但我不明白为什么$("#selector").click方法有效，但onchange=(...)没有＆＃39;吨

所以，如果我有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()
});
}

在父元素点击事件之前触发的第二个方法对我有用，但两者之间的根本区别是什么？。

JsFiddle

Answer 1

在onchange逻辑中，您提供全局event对象，该对象并非在所有浏览器中都可用，也不是100％保证是您期望的点击事件。

出于这个原因，最好避免使用on*事件属性，并在本机JS或jQuery中使用不显眼的事件处理程序 - 正如您的第二个JS示例所做的那样。传递给处理函数的event对象保证是包含所需信息的相关事件。

另请注意，jQuery逻辑使用的是click事件处理程序，而不是change。您应该将.click()更改为.change()，以便事件处理程序仍适用于通过键盘导航网络的用户。

Answer 2

当元素失去焦点时，通常会触发

onChange 事件，因此将首先触发 Click 事件。

Answer 3

如果您要使用jQuery， 只需使用 。你为什么要混淆老派＆＃34; onxxxx＆＃34;用这个属性？

您的代码非常简单。只需这样做：

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

$（＆＃34; #selector＆＃34;）。click vs onchange

3 个答案: