Javascript: Понимание обработки делегирования событий

Question

Я пытаюсь использовать делегирование событий для разных форм на одной странице. Тем не менее, я получаю интересную проблему, пытаясь представить формы.

Я попытался «щелкнуть» по одной форме (предназначенной для кнопки отправки), зная, что событие делегирует по умолчанию «щелчок» по всей форме.

Однако проблема связана с тем фактом, что событие «щелчок» на самом деле задано на всей странице, а не только на форме или на элементе кнопки. Поэтому, когда я нажимаю на страницу, запускается событие «click» для формы. И это происходит для всех браузеров.

То же самое происходит для события «change». Когда я устанавливаю событие «change» в форме, он запускается как для дочерних полей формы, так и для других полей вне конкретного узла формы.

Так что, хотя я знаю, что были questions, прошу о делегировании событий раньше, они действительно не отвечают на эту проблему. Это даже проблема? Может быть, именно так должно работать мероприятие? Но если это так, то разве это не пустая трата памяти для событий, которые будут инициированы для всего документа? Каково решение?

Кроме того, существует ли кросс-браузерный способ прекратить распространение в чистом Javascript? Лучшее, что я нашел, было на Quirksmode.org:

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

Я знаю, что могу фильтровать события по типу, когда срабатывает, но в том, что единственное, что можно сделать? Пожалуйста, помогите мне понять это!

Edit:

Конкретный вопрос, является ли делегирование события в форму для обработки событий на своих конкретных областях будет/может также вызвать события на остальной части документа? Если да, то как справиться с этим? И если это не предполагаемое поведение делегирования событий, то что может быть причиной этого?

Answer 1

Событие будет пузыриться, хотя его предки. Если у вас есть структура HTML;

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

... и нажал на входной элемент, вы увидите кнопку события происходят на input элемент, то пузыриться его предков (span, h2, div, body, document). Это не будет пожара на strong, потому что это не предок. См http://jsfiddle.net/2QQFS/ для примера (посмотрите на консоли при нажатии на одну из <input /> коробок.

Ваших <form /> с не должен быть вложенным. Если вы прикрепление обработчика событий на каждый <form /> элементе, и видя события на триггерные события другой формы на других формах, я бы подтвердить свой HTML (http://validator.w3.org), чтобы убедиться, что вы не пропустили закрывающий тег где-то, или что-то.

чтобы узнать, какой элемент событие возникло из , вы можете использовать e.target и e.srcElement (IE < 8).

Answer 2

Вы не показываете фактический код, регистрирующий прослушиватель событий.

У вас есть this fiddle играть с preventDefault и stopPropagation.

Надеюсь, это понятно. Если хотите, приготовьте скрипку.

Обратите внимание, что в form2.input нет прослушивателя событий, а события переходят в внешнийDive.

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