javascript - 在类上添加 onclick 事件

Question

我正在尝试编写一个greasemonkey脚本，它在按钮上添加一个onClick监听器(定义如下)并执行一些特定的操作。我试图使用 document.getElementsByTagName 获取此按钮 obj，但它返回 null。我尝试迭代 document.anchors 并且它也返回 null 。我如何获取此元素对象并向其添加 onclick 事件。

<a class="editicon" aria-label="Edit this field" role="button" href="#"><img src="https://url-to/images/edit.png?3423434"></a>

已经有一个onclick添加到这个对象中，我不想替换它。

更新

添加我的 Greasemonkey 脚本

// ==UserScript==
// @name        cr
// @namespace   my_namespace
// @version     1
// @grant       none
// ==/UserScript==

(function(){
  console.log('test ...')
  var editicon = document.getElementsByTagName('editicon');
  console.log(editicon);
})();

Answer 1

首先，您的问题涉及一个按钮，但您的代码不包含按钮。而不是使用 <a>元素，然后使用 href="#" 禁用其 native 导航功能，在语义上使用实际的 <button> 会更好。元素。

其次，您不应使用内联 HTML 事件属性(onclick、onmouseover 等)，因为它们:

1. 创建无法扩展、难以阅读、导致重复且不遵循 "separation of concerns" 的“意大利面条式代码” 方法论。
2. 围绕事件属性值创建全局匿名包装函数，以更改 this绑定(bind)您的代码。
3. 不要遵循 W3C Event Standard of using the addEventListener() API。

现在，有several ways to get a reference to a DOM element 有些比其他更好，具体取决于您的 HTML 结构以及您想要获取的元素数量。 <强> document.getElementsByTagName() 返回 "node list" 发现的所有元素。即使没有找到元素，您仍然会得到这个列表作为返回的对象(当没有找到元素时，列表将为空)。要从结果中提取特定元素，您需要将索引传递到该列表中，该索引是 "array-like" object 。此外，getElementsByTagName返回一个“实时”节点列表，这意味着它将在每次交互时重新扫描文档，以确保提供最新的列表。虽然这在某些情况下可能是有益的，但它会带来性能成本。

例如，这将提取第一个 a文档中的元素:

var myElement = document.getElementsByTagName("a")[0]; 

但是，由于您只期望一个元素，所以这就有点矫枉过正了。仅获取一个元素，并且该元素是否具有 id属性，您可以/应该使用: document.getElementById("theIdHere"); 为 getElementById()通常是在 HTML 结构中查找单个元素的最快方法。

此外，还有其他方法可以获取一个或多个元素，例如 querySelector() 和 querySelectorAll() ，它允许您在 JavaScript 查询中使用 CSS 选择器语法。

对于您的代码，请参阅以下代码片段:

// Get a reference to the first <button> element in the document
var b = document.querySelector("button");

// Or, if the element has an id, the best solution would be:
var b = document.getElementById("btn");

// Add a click event handler to the element
b.addEventListener("click", handleClick);

// Function that will be called when anchor is clicked
function handleClick(){
  alert("You clicked me!");
}

button { background-color:rgba(0,0,0,0); }
img { width: 50px; }

<button class="editicon" aria-label="Edit this field" role="button"  id="btn"><img src="https://s-media-cache-ak0.pinimg.com/736x/5a/42/c6/5a42c6224e3ce7fa9837965270bfcdd9--smiley-face-images-smiley-faces.jpg"></button>