使用JavaScript将事件处理程序添加到HTML元素

我想添加一个事件处理程序到一个段落,当任何用户点击它。 例如,我有一个段落,当用户点击它时会显示一个警告,但不使用HTML上的“onclick”。

<p id="p1">This is paragraph Click here..</p> <a href="http://www.google.com" id="link1" >test</a> document.getElementById('p1').onmouseover = paragraphHTML; 

您可以添加事件侦听器。
水木清华。 喜欢这个:

  var el = document.getElementById("p1"); if (el.addEventListener) { el.addEventListener("click", yourFunction, false); } else { el.attachEvent('onclick', yourFunction); } 

(感谢@Reorx)

解释在这里

完整的代码(在Chrome和IE7中testing):

 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1255"> <script type="text/javascript"> window.onload =function (){ var el = document.getElementById("p1"); if (el.addEventListener) { el.addEventListener("click", yourFunction, false); } else { el.attachEvent('onclick', yourFunction); } }; function yourFunction(){ alert("test"); } </script> </head> <body> <p id="p1">test</p> </body> </html> 

为了适应大多数情况,你可以写一个函数来处理这个问题:

 var bindEvent = function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else { element.attachEvent('on'+type, handler); } } 

为你的p元素添加一个tabIndex属性,然后你可以使用onfocus函数。

演示: http : //jsfiddle.net/9y7CL/