Создать наблюдатель событий для фокуса?

Возможно ли иметь пузырь событий фокуса в прототипе?

Я пытаюсь предотвратить назначение наблюдателя для каждого элемента ввода.

<script language="javascript" type="text/javascript">
document.observe('dom:loaded', function() {

    // Doesn't work
    $('editForm').observe('focus', function(evnt){
        console.log('FOCUS!');
    });

    // Works
    $('editForm').select('INPUT').each(function(elem) {
        elem.observe('focus', function(evnt){
            console.log('FOCUS!');
        });
    });

}); 
</script>

<form method="post" name="editForm" id="editForm" action="">
<input type="text" name="foobar" />
</form>

javascript prototypejs
person Louis W    schedule 21.05.2009    source источник

Ответы (2)


arrow_upward
40
arrow_downward

события фокуса и размытия не всплывают.

Вы можете запустить обработчик событий на этапе захвата. При использовании стандартных методов DOM вы должны написать

document.addEventListener('focus',function(e){/*some code */}, true);

«истинное» значение здесь наиболее важно.

Проблема в том, что IE не поддерживает захват фазы распространения события, но для IE вы можете использовать события focusin и focusout, которые, в отличие от событий focus и blur, всплывают. Я рекомендую прочитать статью на эту тему, написанную Питером Полом Кохом. . Другие браузеры (Firefox, Opera, Safari), вероятно (я не проверял), поддерживают такие события, как DOMFocusIn, DOMFocusOut, которые эквивалентны событиям focusin и focusout IE.

person Rafael    schedule 21.05.2009
comment
if (_is_ie) { // Только IE прослушиватели событий фокуса/размывания f.observe('focusin', this.onFocus.bind(this)); f.observe('focusout', this.onBlur.bind(this)); } else { // Firefox и Safari прослушиватели событий фокуса/размытия f.addEventListener('focus', this.onFocus.bind(this), true); f.addEventListener('blur', this.onBlur.bind(this), true); } Затем внутри onBlur и onFocus я получаю элемент (Event.element) и проверяю его nodeName, чтобы узнать, нужно ли что-то делать. - person Louis W; 21.05.2009

arrow_upward
8
arrow_downward

Вы можете использовать это:

function focusInHandler(event){
    Event.element(event).fire("focus:in");
}
function focusOutHandler(event){
    Event.element(event).fire("focus:out");
}

if (document.addEventListener){
    document.addEventListener("focus", focusInHandler, true);
    document.addEventListener("blur", focusOutHandler, true);
} else {
    document.observe("focusin", focusInHandler);
    document.observe("focusout", focusOutHandler);
}

document.observe('focus:in', function(event) {
    // Your code
});

Мой jsFiddle: http://jsfiddle.net/EpokK/k7RPE/3/

person EpokK    schedule 13.05.2013