Javascript : 이벤트 위임 처리 이해

Question

동일한 페이지의 다른 양식에 대해 이벤트 위임을 사용하려고합니다. 그러나 양식을 제출하는 동안 흥미로운 문제가 발생합니다.

이벤트 위임이 본질적으로 전체 양식에서 '클릭'을 설정한다는 것을 잘 알고있는 하나의 양식 (제출 버튼 용)에서 '클릭'을 시도했습니다.

그러나 문제는 '클릭'이벤트가 실제로 양식 또는 버튼 요소뿐만 아니라 전체 페이지에 설정된다는 사실에서 비롯됩니다. 따라서 페이지를 클릭 할 때마다 양식의 '클릭'이벤트가 트리거됩니다. 그리고 이것은 모든 브라우저에서 발생합니다.

'change'이벤트에서도 동일한 문제가 발생합니다. 양식에서 'change'이벤트를 설정하면 양식의 하위 필드와 특정 양식 노드 외부의 다른 필드 모두에 대해 트리거됩니다.

그래서 이전에 이벤트 위임에 대해 묻는 질문이 questions 이었지만 실제로는이 문제에 대답하지 않았습니다. 그것은 심지어 문제입니까? 아마도 이것이 이벤트 위임이 작동하는 방법 일 것입니다. 그렇다면 전체 문서에 대해 이벤트가 트리거되도록 메모리를 낭비하지 않아도됩니까? 해결 방안은 무엇인가?

또한, 순수한 자바 스크립트에서 전파를 막기위한 브라우저 간 방법이 있습니까? 트리거 될 때 나는 유형별로 이벤트를 필터링 할 수 있습니다 알고

function doSomething(e) 
{  
    if (!e) var e = window.event; 
    e.cancelBubble = true; 
    if (e.stopPropagation) e.stopPropagation(); 
} 

하지만 유일한 것은 사람이 할 수 있다는 것입니다 : 내가 찾은 최고의 Quirksmode.org에 있었다? 제발 이해해주세요!

편집 :

구체적인 질문/또한 문서의 나머지 부분에 대한 이벤트를 트리거 할 수있는 것입니다 자사의 특정 필드의 이벤트를 처리하기위한 형태에 이벤트를 위임 여부? 그렇다면 어떻게 처리할까요? 이것이 이벤트 위임의 의도 된 동작이 아니라면 무엇이 원인 일 수 있습니까?

Answer 1

이벤트가 조상을 통해 거품을 일으 킵니다. HTML 구조가 있다면;

<div> 
    <h2> 
     <span> 
      <input /> 
     </span> 
     <strong> 
      Blah 
     </strong> 

... 그리고 당신은 입력 요소를 클릭하면 이벤트가 input 요소에 발생한 클릭 볼 것, 다음 버블의 조상 ( span, h2, div, body, document). 은 strong에의 화재가 발생하지 않습니다. 이는 조상이 아니기 때문입니다. 당신이 <input /> 상자 중 하나를 클릭하면 콘솔에서 보면 (예는 http://jsfiddle.net/2QQFS/를 참조하십시오.

귀하의 <form />의

중첩 할 수 없습니다. 당신이 이벤트를 각 <form /> 요소에 이벤트 처리기를 부착하고,보고하는 경우 다른 형태의 다른 형태의 트리거 이벤트는, 나는 당신이 어딘가에 닫는 태그를 놓친, 또는 뭔가하지 않았는지 확인하기 위해 HTML ( http://validator.w3.org를) 확인할 것.

을 행사 부터을 개시 한 요소를 확인하려면 , e.target 및 012를 사용할 수 있습니다.(IE <8).

Answer 2

이벤트 수신기를 등록하는 실제 코드가 표시되지 않습니다.

preventDefault 및 stopPropagation으로 재생하려면 this fiddle이 필요합니다.

나는 자명하다. 네가 좋아하면 바이올린을 포크.

form2.input에 이벤트 수신기가없고 이벤트가 outerDiv에 맞춰져 나오는 것을주의하십시오.

form1은 관련 사용자 컨트롤에 따라 중지 및 방지를 수행하는 것입니다.

출력 영역에 무슨 일이 일어나는지 분명히해야합니다.

HTML

<div id="outerDiv"> 
<div> 
    <input id="pd" value="1" type="checkbox">Prevent Default in form1 keydown</input> 
</div> 
<div> 
    <input id="sp" value="1" type="checkbox">Stop Propagation in form1 keydown</input> 
</div> 
<div> 
    <button id="clear">Clear Output</button> 
</div> 
<form id="form1" action=""> 
    <div> 
     <label>input of form1 
      <input type="text" /> 
     </label> 
    </div> 
</form> 
<form id="form2" action=""> 
    <div> 
     <label>input of form2 
      <input type="text" /> 
     </label> 
    </div> 
</form> <pre id="output"> 
    watch this spot 
</pre> 
</div> 

JS

window.addEventListener('DOMContentLoaded', function (event) { 
// console.log("DOMContentLoaded event handler ..."); 
var form1 = document.getElementById('form1'); 
var form2 = document.getElementById('form2'); 
var output = document.getElementById('output'); 
var div = document.getElementById('outerDiv'); 
var clear = document.getElementById('clear'); 
clear.addEventListener('click', function (event) { 
    output.textContent = ('\n' + clear.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' clears output'); 
}, false); 
console.dir(output); 
div.addEventListener('keydown', function (event) { 
    output.textContent += ('\n' + div.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices \'' + event.srcElement.value + '\''); 
}, false); 
form1.addEventListener('keydown', function (event) { 
    output.textContent += ('\n' + form1.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices \'' + event.srcElement.value + '\''); 
    // prevents default of generating an input event 
    if (document.getElementById('pd').checked) { 
     event.preventDefault(); 
     output.textContent += ('\n\t' + form1.localName + '\'s ' + event.type + ' event handler does preventDefault'); 
    } 
    // stops propagation up to div 
    if (document.getElementById('sp').checked) { 
     event.stopPropagation(); 
     output.textContent += ('\n\t\t' + form1.localName + '\'s ' + event.type + ' event handler does stopPropagation'); 
    } 
}, false); 
form1.addEventListener('input', function (event) { 
    output.textContent += ('\n' + form1.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices \'' + event.srcElement.value + '\''); 
}, false); 
}, false);