如何使用Javascript动态地将事件处理程序附加到文档元素？_Javascript_Event Handling

如何使用Javascript动态地将事件处理程序附加到文档元素？

javascript

如何使用Javascript动态地将事件处理程序附加到文档元素？,javascript,event-handling,Javascript,Event Handling,是否有一种方法可以附加事件处理程序，如onclick=alert（“Hi”）；到现有文档元素？（以我为例的图像）我已经尝试了以下方面，但失败了： img = document.getElementById("my_image"); img.onclick = "alert('hi')"; img.setAttribute ('onclick',"alert('hi')"); img.onclick = function() {"alert('hi')";}; img.onclick =

是否有一种方法可以附加事件处理程序，如onclick=alert（“Hi”）；到现有文档元素？（以我为例的图像）

我已经尝试了以下方面，但失败了：

img = document.getElementById("my_image");

img.onclick = "alert('hi')";

img.setAttribute ('onclick',"alert('hi')");

img.onclick = function() {"alert('hi')";};

img.onclick = function(evt) {"alert('hi')";};

img.setAttribute ('onclick',function() {"alert('hi')";});

function handler(evt) {"alert('hi')";}
img.onclick = handler;

我的想法快用完了。有人知道怎么做吗

element.onclick = function(event){alert("message");}

在这种情况下，

事件

参数是可选的。函数体是代码，不是字符串。


img.onclick = function() { alert('hi'); };

img.setAttribute ('onclick',"alert('hi')");

img.onclick = function() {"alert('hi')";};

img.setAttribute ('onclick',function() {"alert('hi')";});

var theImageInput=document.getElementById（'myImageInput'）；
theImageInput.onclick=函数（）{alert（'myImageInput onclick已调用！'）；}

在Firefox 3.5.3中测试和使用

要点：

在文档中呈现元素后，必须获取对该元素的引用
Firefox与Internet Explorer不同，它不将每个元素的名称/id作为全局变量
```
myImageInput.onclick=…
```
在Firefox中不起作用，您必须使用
```
document.getElementById（theID）
```
或
```
document.forms['formName'].elements['elementNAME']
```
（如果它在
中）来获取对它的引用

如果上面复制并粘贴到文档中的示例在Firefox 3.5中对您不起作用，请禁用您的所有加载项（可能其中一个加载项导致了问题）。如果仍然不起作用，请告诉我们您的确切来源，以便我们可以帮助确定为什么它不起作用

img = document.getElementById("my_image");

img.onclick = "alert('hi')";

这是分配一个字符串

img.setAttribute ('onclick',"alert('hi')");

img.onclick = function() {"alert('hi')";};

img.setAttribute ('onclick',function() {"alert('hi')";});

这也是分配一个字符串

img.setAttribute ('onclick',"alert('hi')");

img.onclick = function() {"alert('hi')";};

img.setAttribute ('onclick',function() {"alert('hi')";});

这是分配函数，但函数包含的全部内容都是字符串。您应该删除

alert（'hi'）

中的引号

同样，一个只包含字符串的函数

img.setAttribute ('onclick',"alert('hi')");

img.onclick = function() {"alert('hi')";};

img.setAttribute ('onclick',function() {"alert('hi')";});

再次

function handler(evt) {"alert('hi')";}
img.onclick = handler;

再一次。

这太棒了

<img src="PathToImage" id="myImage" height="30px" width="30px" />

<script type="text/javascript">
    var i = document.getElementById("myImage");
    i.onclick = function() { alert("hello"); };
</script>


var i=document.getElementById（“myImage”）；
i、 onclick=function（）{alert（“hello”）；}；

编辑：-在IE 7、Chrome 4x、FF 3.5x中测试，由zzandy给出的第一个答案应该可以。检查你做的每件事是否正确，尤其是firefox在确保其处于complient模式时可能会有选择。这是完整的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function AttachEvent()
{
    var theElement = document.getElementById( 'the_image' );
    theElement.onclick = function () { alert('message'); }
}
</script>
</head>
<body>
<img id='the_image' src='some_img.jpg' title='Click on the image' alt='Image not found' />
<button onclick='AttachEvent();'>Enable Click on image</button>
</body>
</html>


函数AttachEvent（）
{
var theElement=document.getElementById（'the_image'）；
theElement.onclick=函数（）{alert（'message'）；}
}
启用单击图像

所讨论的元素是imagetry onchange类型的输入，可能会有所帮助。或者你想在“打开文件”对话框之前采取一些行动吗？到目前为止，所有的答案都适用于我，包括在FF 3.5中。可能是您在做其他事情导致失败？无需创建中间

变量，特别是在全局范围内声明它。