Внеочередные вложенных событий

Question

Рассмотрим этот фрагмент:

<div onkeypress="console.log('parent');"> 
    <input type="text" onkeypress="console.log('child');"> 
</div> 

Два вложенных элементов как с OnKeyPress -Event. Когда я ставлю курсор в результате ввода и нажмите клавишу на клавиатуре я

child 
parent 

вошел в консоль в таком порядке. Мой вопрос в том, могу ли я рассчитывать на это ВСЕГДА стрелять в этом порядке. То есть что самый внутренний элемент всегда будет стрелять первым?

Answer 1

Да, вы можете, как было отмечено на MDN и W3 вы можете рассчитывать на внутреннем большинстве случае стрелять первым и, как действие пузыри вверх, последующие события будут срабатывать. Существует разница в том, какие браузеры считают событием нажатия клавиши.

От QuirksMode: (Захват огня снаружи внутрь, то есть стрелка вниз и пузыриющиеся огни внутри снаружи, то есть стрелка вверх).

 Capturing-> | |/\ <-Bubbling 
-----------------| |--| |----------------- 
| element1  | | | |    | 
| -------------| |--| |-----------  | 
| |element2 \/| |   |  | 
| --------------------------------  | 
|  W3C event model     | 
------------------------------------------ 

Используя прослушиватель событий, вы можете диктовать захват против барботирования третьим параметром.

element1.addEventListener('keypress',myScript,true) // Capture element1.addEventListener('keypress',myScript,false) // Bubble*default

object.addEventListener("keypress", myScript, false); == <div onkeypress="myScript()">

Одна вещь, чтобы отметить, IE не следовать той же модели, но вы все равно можете рассчитывать на бульканье, т.е. наизнанку.

Answer 2

Это зависит от браузера. Однако вы можете решить порядок выполнения, поместив addEventListener() в элемент.

Это руководство объясняет это deepth: http://www.quirksmode.org/js/events_order.html

Answer 3

Да, это будет. Независимо от того, добавлен ли обработчик событий в html (например, в вашем примере) или в файл js. И независимо от порядка вы регистрируете обработчики событий в файлах javascript, потому что, как объясняется Rob & Vinny, событие «пузыри» от элемента. Событие keypress начинается с ввода элемента dom, затем пузырьки его родителя и родителя его родителя и так далее. Поэтому обработчики событий будут запускаться в том же порядке.

Все, что вам нужно знать? Если у вас есть конкретный прецедент для этих двух отдельных обработчиков, вы можете объяснить, что это такое, и я могу попытаться запрограммировать решение, потому что в вашем примере я не вижу, как может быть полезно иметь 2 действия для одного и того же события на тот же элемент.

EDIT: тогда почему бы не использовать глобальный прослушиватель документа с проверкой, является ли элемент фокуса входным?

Example on JSFiddle:

document.addEventListener('keypress', function(e){ 
    var key = String.fromCharCode(e.which), 
     targetElt = e.target; 

    if (key === 'a'){ 
    console.log('-- Action when "a" is pressed') 
    if (targetElt.nodeName === 'INPUT') { 
     console.log('-- Action when "a" is pressed and the focus is on an input'); 
    } 
    } 
}, false); 

Если нажать «а» только первый console.log называется, если нажать «а», когда input ориентирован, как console.log называются.

Если у вас есть несколько ключей, я бы рекомендовал использовать switch заявление вместо того, if/else if/else

Благодаря