Как получить информацию из элемента в Javascript при срабатывании onclick

Question

Допустим, у меня есть ссылка в моем DOM (но любой элемент будет принят) с вызовом функции Javascript:

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

и функцией Jquery длязамените щелчок по этой ссылке и получите атрибут href (извините, я работаю в Jquery, но не стесняйтесь отвечать в vanilla JS) :

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

Это на самом делене работаетОбычно нам нужно указать на элемент ID или Class , чтобы получить его информацию; но если мы не можем установить идентификатор или класс или что-то еще и просто обработать некоторые ссылки на странице, как напрямую получить их информацию ?

Названиеэта тема намеренно общая, потому что метод должен работать для любого элемента 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"])

}

Answer 2

Вы можете получить доступ к нажатому элементу, как показано ниже

<a href="https://google.com" onclick="myFunction(this)">

function myFunction(that) {
    console.log(that.href);
}

Answer 3

HTML <a href="#" onclick="myFunction(event)">click</a>

JS

function myFunction(event) {
    event.preventDefault();
    // Do your stuff with event.target which is <a>
}