将传统的事件调用替换为 JavaScript 事件侦听器

Replace traditional event call with JavaScript event listener

本文关键字：事件 JavaScript 侦听器 替换 调用 传统      更新时间：2023-09-26

使用以下代码：

<head>
<script type="text/javascript">
function popupMsg(msg) { 
  alert(msg);
}
</script>
</head>
<body>
<a href="http://www.example.com" onClick="popupMsg('This is pop up message')">example.com</a>
</body>

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

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

大概是这样的：

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

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

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

上面的代码未经测试。

您可以使用 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>

浏览器支持在不同"级别"附加事件，这是 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

相关文章：