javascript - 触发 onclick 时如何从 Javascript 中的元素检索信息

Question

假设我的 DOM 中有一个链接(但任何元素都会被接受)，并调用 Javascript 函数:

<a href="google.com" onclick="myFunction()">

，以及一个 Jquery 函数来替换对该链接的点击并检索其 href 属性(抱歉，我正在使用 Jquery，但请随意用普通 JS 回答):

function myFunction() {
    $(this).click(function() { return false; }); // Cancel normal behavior.
    console.log($(this).attr("href"));
}

这实际上是行不通的。通常，我们需要指向元素的ID或Class来获取其信息； 但是如果我们无法设置 ID或类或其他任何东西，而只是处理页面中的一些链接，如何直接检索它们的信息？

本主题的标题故意笼统，因为该方法应该适用于任何 HTML 元素。

Answer 1

是的，你是对的，使用 id 或 css 选择器你可以做到。但还有另一种方法。

只需在调用函数时传递 this 即可访问元素的所有属性，如下所示:

<a href="google.com"  style="background-color: yellow" onclick="myFunction(this, event)"> click me !!!! <a>

然后您可以访问如下所有信息:

 function myFunction(element, event) {
    event.preventDefault(); // event object can be passed
    element.style.backgroundColor = "red" // attribute can be accessed
    console.log(element.attributes["data-name"])

}