$ ("# 선택"). 클릭 대 onchange를

Question

여러 사람들이 내가 친절하게 고정하는 방식으로 응답 사람 this question 어제, 게시

내가 ... 온 클릭 onchange를 혼합했던 지적 편집 내 문제는 아니지만 나는 왜 $("#selector").click 메톤이 작동하는지 알지 못하지만 onchange=(...)은 그렇지 않습니다.

그래서 HTML 헤더에있는 클릭 일상 DataTable의 종류 화재 부모 요소 DataTable을 cloumn 헤더에있는 경우 :

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

두 번째 방법, 부모 요소의 클릭 이벤트 전에 해고를, 작품을 나를위한, 그러나 2의 기본적인 차이점은 무엇입니까? onchange 논리에서

JsFiddle

Answer 1

당신은 모든 브라우저에서 사용할 수 없습니다 또한 당신이 기대하는 클릭 이벤트 보장 100 % 인 글로벌 event 객체를 제공하고 있습니다.

이러한 이유 때문에 on* 이벤트 속성을 사용하지 말고 네이티브 JS 또는 jQuery에서 눈에 잘 띄지 않는 이벤트 핸들러를 사용하는 것이 가장 좋습니다. 핸들러 함수로 전달 된 event 객체는 필요한 정보가 포함 된 관련 이벤트로 보장됩니다.

또한 jQuery 논리가 change이 아닌 click 이벤트 핸들러를 사용하고 있습니다. .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);