无法理解<A HREF>标签和JavaScript调用</a>

Question

I have a php application in which the web page displayed to the user. The page has some links "Edit", "Rename", etc.

When the user clicks on the link a dialogbox prompts. The dialogbox is nothing but a HTML <div> form that gets instantly displayed when the user clicks on the "Rename" or "Edit" link.

When I looked at the html source code (ie view -> source in Internet Explorer) I found the following Javascript and HTML code

<a class="update renameButton" href="javascript:void(0);">Rename</a>

I'm unable to understand how the dialogbox gets promted with the above code.

I expected the code to be something like the following:

<a class="update" onclick='rename();' href="javascript:void(0);">Rename</a>

Can someone help me understand this?

Answer 1

从<script>元素加载的某些JavaScript可能会将事件处理程序功能绑定到该元素。

Answer 2

The event handler is most likely bound to the element elsewhere (from an included JavaScript file perhaps). For example:

document.getElementsByClassName("update")[0].addEventListener("click", function () {
    // Do something on click of the first `.update` element
}, false);

Answer 3

you should not setup event listeners in html anymore like with onclick . the page registers an event listener to the Object. eg with a library like jQuery.

Answer 4

You are absolutely correct! That is very natural to expect such a thing except that there are other ways to bind an event to an object as well.

If you check the JavaScript code on the page I am sure you will find perhaps something that looks like $('a.renameButton').click(function(){}); (if the site is using jQuery) or something similar that binds the onclick event of that particular tag to perform some specific actions.