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的类选择器，但并不是所有浏览器都支持它。

如果您需要在一个元素上分配多个事件，请使用@Jordan和@David Dorward所示的addEventListener。

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

Answer 5

给它一个ID，你应该可以这样做：

document.getElementById("the id").onclick = function{ ... }

Answer 6

您不必使用jQuery，但您可以尝试John Resig的流行addEvent功能。

addevent(elem, "click",clickevent);  

function addEvent ( obj, type, fn ) {
      if ( obj.attachEvent ) {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent( "on"+type, obj[type+fn] );
      } else
        obj.addEventListener( type, fn, false );
    }

还有更多要考虑在纯JavaScript中“正确”绑定HTML标记上的事件。

http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm

Answer 7

感谢Pekka，记住将侦听器绑定到具有特定类的整个元素数组，快速增加绑定到元素的事件数。

以更快的方式使用for循环：

for (var i = Things.length - 1; i >= 0; i--) {
    Things[i]
};

for循环的第一个表达式只会计算一次，所以这样，它不会通过DOM计算数组的长度，而且，因为堆栈结构踩到Arrays反向更快，然后踩到前进

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

7 个答案: