Что не так с моим кодом для назначения события onfocus элементу? - PullRequest
Новая
       14

Что не так с моим кодом для назначения события onfocus элементу?

3 голосов
/ 19 февраля 2011

У меня есть следующий код, который я пытался назначить событию onfocus элементу, чтобы всякий раз, когда элемент фокусировался, вызывал alert.Тем не менее, предупреждение появляется только при загрузке страницы, и никогда после этого.

<html>
<head>
</head>
<body onload = "loadings();">
<div>   
    <form>  
        <input type="text" id="foo"/>
    </form>
</div>

<script type="text/javascript">
function loadings(){
    document.getElementById("foo").onfocus = alert("foo"); 
}
</script>
</body>
</html>

Обратите внимание, что я не могу сделать <input type="text" id="foo" onfocus="alert('foo')"/> для того, чего пытаюсь достичь.

Также это должно работать в Firefox, Chrome, IE, Safari.

Заранее спасибо!

Ответы [ 4 ]

5 голосов
/ 19 февраля 2011

Этот код: 

document.getElementById("foo").onfocus = alert("foo");

присваивает результат вызова alert () свойству onfocus.То, что вы имели в виду: 

document.getElementById("foo").onfocus = function(){ alert("foo"); };

Это использует модель событий DOM уровня 0, где вы можете иметь только один обработчик для каждого события.Если вы хотите что-то более гибкое, но все же кроссплатформенное, то вы можете попробовать какую-то библиотеку для абстрагирования модели событий для вас, как это делает jQuery: 

$('#foo').focus(function(){ alert("foo"); });

Таким образом, вам не нужно беспокоиться о attachEvent в IEпо сравнению с addEventListener во всем остальном, но если вам нужен только простой случай, как в вашем примере, тогда модель уровня 0 отлично работает и работает во всех браузерах.

2 голосов
/ 19 февраля 2011

rsp ответ правильный и, на мой взгляд, лучший стиль.Чтобы лучше понять решение, сравните этот синтаксис с rsp.Оба достигают одного и того же результата. 

function MyEventHandler ()
{
    alert("foo");
}

document.getElementById("foo").onfocus = MyEventHandler;

При синтаксисе следует помнить, что вы включаете имя функции, но не скобки ().Вы хотите обратиться к самой функции, а не вызывать ее.Событие вызовет функцию при ее возникновении.

0 голосов
/ 19 февраля 2011

Вот общая функция для добавления обработчика событий 

function addEvent( obj, type, fn ){
    if(!obj){
        return;
    }
    if (obj.addEventListener){
        obj.addEventListener( type, fn, false );
    }
    else{
        if (obj.attachEvent){
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent( "on"+type, obj[type+fn] );
        }
    }
}

тогда 

addEvent(document.getElementById('foo'),'focus',myEventhandler);
0 голосов
/ 19 февраля 2011

Вы можете использовать addeventlistener, как показано ниже. 

document.getElementById("foo").addEventListener("focus", function(){alert("foo")}, false);
...