如何在没有框架的情况下将点击绑定到锚点(javascript)

Question

我知道这很容易在jQuery或任何其他框架中完成,但这不是重点.如何在纯JavaScript中"正确"绑定点击事件？我知道怎么做内联(我知道这很可怕)

<a href="doc.html" onclick="myFunc(); return false">click here</a>

这导致我的javascript为一个支持JS的浏览器执行,并且链接为没有javascript的人正常运行？

现在,我如何以非内联方式执行相同的操作？

Answer 1

如果您只需要分配一个click事件,则可以指定onclick:

如果你有一个ID:

myAnchor = document.getElementById("Anchor");
myAnchor.onclick = function() { myFunc(); return false; }

您还可以浏览所有锚点:

anchors = document.getElementsByTagName("a");

for (var i = 0; i < anchors.length; i++) {   

 anchors[i].onclick = .....

}

还有一个document.getElementsByClassName模拟jQuery的类选择器,但并不是所有浏览器都支持它.

如果可能需要在一个元素上分配多个事件,请使用addEventListener@Jordan和@David Dorward所示.

Answer 2

基本方法是使用document.getElementById()查找元素然后用于addEventListener监听事件.

在您的HTML中:

<a href="doc.html" id="some-id">click here</a>

在您的JavaScript中:

function myFunc(eventObj) {
  // ...
}

var myElement = document.getElementById('some-id');
myElement.addEventListener('click', myFunc);

或者您可以使用匿名函数:

document.getElementyById('some-id').addEventListener('click', function(eventObj) {
  // ...
});

Answer 3

这是一个很好的跨浏览器方法

var on = (function(){
    if ("addEventListener" in window) {
        return function(target, type, listener){
            target.addEventListener(type, listener, false);
        };
    }
    else {
        return function(object, sEvent, fpNotify){
            object.attachEvent("on" + sEvent, function(){
                fpNotify(window.event);
            });
        };
    }
}());


on(document.getElementById("myAnchor"), "click", function(){
    alert(this.href);
});

Answer 4

此问题的标准访问是 Quirks 模式：http ://www.quirksmode.org/js/events_advanced.html