从html触发javascript的正确方法

Question

What is the way for having a graphical component (more precisely a twitter.bootstrap icon) in an html website calling a java script.

One could either make a button and putting the icon on it, but this does not look nice IMHO. Or one could use the href tag,

<a href="#" name="ad_fav" onclick= CALLFUNCTION> <i
                        class="icon"></i></a>

But what is the cleanest way of achieving this? It would also be nice if the icon could change after it was clicked.

How it for example the upvote button in stackoverflow implemented?

Answer 1

Another way:

function myFunc () {
// code here
}

var element = document.getElementsByClassName("icon");
element[0].addEventListener("click", myFunc);

Answer 2

Just make the href of the <a> be 'javascript:', example:

<a href="javascript:alert('hello there! this works!')" name="ad_fav"> <i
                    class="icon"></i></a>

Replace alert(...) with your function call if you need

Answer 3

你没有用锚元素包装它：

<img src="[path to twitter.bootstrap icon]" onclick="yourJavaScriptFunction" />

Answer 4

Why wouldn't you use jquery on function?

$(document).on("click", "a.icon", function (e) {
    e.preventDefault();
});