3

我有一个以下代码，我试图将 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

4 回答 4

5

这段代码：

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

将调用 alert()的结果分配给 onfocus 属性。你的意思是：

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

这是使用 DOM Level 0 事件模型，其中每个事件只能有一个处理程序。如果您想要更灵活的东西同时仍然是跨平台的，那么您可以尝试一些库来为您抽象事件模型，就像 jQuery 所做的那样：

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

这样您就不必担心 IE 中的 attachEvent 与其他所有内容中的 addEventListener，但如果您只需要示例中的简单案例，那么 Level 0 模型非常好，并且适用于所有浏览器。

于 2011-02-19T06:43:09.793 回答
2

rsp 的回答是正确的，在我看来是一种更好的风格。为了更好地理解解决方案，将此语法与 rsp 进行比较。两者都达到相同的结果。

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

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

语法中要记住的关键是您包含函数名称，但不包含括号 ()。您想引用函数本身，而不是调用它。该事件将在引发时调用该函数。

于 2011-02-19T06:50:16.123 回答
0

您可以使用如下所示的 addeventlistener。

document.getElementById("foo").addEventListener("focus", function(){alert("foo")}, false);
于 2011-02-19T06:58:18.743 回答
0

这是添加事件处理程序的通用函数

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);
于 2011-02-19T07:44:01.303 回答