我将 onfocus 事件分配给元素的代码有什么问题？

发布于 2024-10-17 22:01:09 字数 604 浏览 8 评论 0原文

我有以下代码，我尝试将 onfocus 事件分配给元素，以便每当元素获得焦点时，调用警报。但是，警报仅在页面加载时出现，之后就不再出现。

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

请注意，我无法为我想要实现的目标执行。

这也应该适用于 Firefox、Chrome、IE、Safari。

提前致谢！

原文

I have a following code which I tried to assign onfocus event to the element, so that whenever the element gets focused, call alert.
However, alert only appears when the page loaded, and never after that.

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

Please note that I can't do <input type="text" id="foo" onfocus="alert('foo')"/> for the thing I am trying to achieve.

Also this should work in Firefox, Chrome, IE, Safari.

Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

饮湿 2024-10-24 22:01:09

此代码：

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 的问题，但是如果您只需要像示例中那样的简单情况，那么 0 级模型就非常好并且适用于所有浏览器。

This code:

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

assigns the result of calling alert() to the onfocus property.
What you meant is:

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

This is using the DOM Level 0 event model where you can only have one handler per event. If you want something more flexible while still cross-platform then you may try some library to abstract the event model for you like jQuery does:

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

That way you don't have to worry about attachEvent in IE vs. addEventListener in everything else, but if you only need the simple case like in your example then the Level 0 model is perfectly fine and works across all browsers.

回复收藏 0 原文

著墨染雨君画夕 2024-10-24 22:01:09

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

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

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

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

rsp's answer is correct, and is in my opinion a better style. To better understand the solution compare this syntax with rsp's. Both achieve the same result.

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

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

The key thing to remember with the syntax is you include the function name, but not the parentheses (). You want to refer to the function itself, not invoke it. The event will invoke the function when it is raised.

回复收藏 0 原文

清浅ˋ旧时光 2024-10-24 22:01:09

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

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

You could use the addeventlistener like below.

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

回复收藏 0 原文

橘虞初梦 2024-10-24 22:01:09

这是一个添加事件处理程序的通用

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

Here's a generic function to add an event handler

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

then

addEvent(document.getElementById('foo'),'focus',myEventhandler);

回复收藏 0 原文

~没有更多了~

关于作者

浅笑依然

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

我将 onfocus 事件分配给元素的代码有什么问题？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

我将 onfocus 事件分配给元素的代码有什么问题？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（4）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。