Question

使用以下代码：

<head>
<script type="text/javascript">
function popupMsg(msg) { 
  alert(msg);
}
</script>
</head>

<body>
<a href="http://www.xyz.com" onClick="popupMsg('This is pop up message')">xyz.com</a>
</body>

如何在锚标记中将onClick替换为addEventListener？

可以在没有将ID分配给锚标记的情况下完成吗？

可能是这样的：

<a href="http://www.xyz.com" something.addEventListener('click',popupMsg(SomeMsg),false)>xyz.com</a>

Answer 1

我不相信它会以这种方式得到支持。您也许可以尝试onload处理程序：

<a href="" onLoad="(function(){ this.addEventListener("click", "fnName", false); })();">Link</a>

以上代码未经测试。

Answer 2

您可以使用querySelector（在现代浏览器中）选择元素：

var anchor = document.querySelector('a')

（这应该选择页面上的第一个链接）

然后附上你的活动：

anchor.addEventListener( ... );

这一切都没有内联在元素上，这可以说是更好......

类似于：

    <script>
    // Function to add event listener to the anchor  
    function load() {   
       var anchor = document.querySelector('a')  
       anchor.addEventListener( ... );
     }  

    document.addEventListener("DOMContentLoaded", load, false);  

  </script>

Answer 3

浏览器支持在不同“级别”附加事件，这是W3C随时间设置的标准。通过DOM中的“onclick”直接附加事件（即<a href="#" onclick="myFunction()">将为0级，或使用JavaScript执行相同操作（即：document.getElementsByTagName('a')[0].onclick = myFunction;）为1级。

级别0和1的限制是，对于任何一种类型的事件，任何一次只能将一个事件处理程序附加到每个单独的元素。为了使事件附加更加灵活，第2级事件允许每个元素上的每种事件类型有多个事件处理程序，并附加document.getElementsByTagName('a')[0].addEventListener('click', myFunction, true)。

两者之间切换的有用指南是http://jupiterjs.com/news/a-crash-course-in-how-dom-events-work。

如果您不想向元素添加ID以附加事件处理程序，那么jQuery是一个库，它使用CSS选择器查询DOM非常简单（上面的代码将成为jQuery('a').click(myFunction)） - 更多信息是http://jquery.com

用javascript事件监听器替换传统的事件调用

3 个答案: