logo标签列表

如何在不使用框架（使用JavaScript）的情况下将点击事件绑定到锚点？

javascriptevents
20

我知道在jQuery或任何其他框架中很容易实现，但那并不是重点。我该如何使用纯javascript“适当地”绑定点击事件？ 我知道如何在内联中执行它（我知道这很糟糕）

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

这会使我的JavaScript在启用JS的浏览器中执行，并使链接对于那些没有JavaScript的用户表现出正常行为？

现在，我如何以非内联方式做同样的事情？

3
你目前所采用的方式不算糟糕。虽然它确实有劣势，但与其他所有方法相比也有优点（其中最主要的是不需要在文档加载之前就能正常使用）。不要被“不显眼性”的宣传所洗脑。 - Tim Down
6个回答
30
如果你只需要绑定一个点击事件，可以使用 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。

使用 onClick 属性和 addEventListener 函数有什么区别？哪个更好？我相信还有一个 click 函数，所以你能否也做 myAnchor.click = (event) => ...？ - Luke T O'Brien
1
@LukeTO'Brien 简而言之：onClick 属性可以被覆盖，而 addEventListener 可以多次用于绑定同一元素上的同一事件。请参见此处的精彩答案：https://dev59.com/qGw15IYBdhLWcg3w3vle - ThdK
10

基本方法是使用 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.getElementById('some-id').addEventListener('click', function(eventObj) {
  // ...
});
1
请记住，IE不支持addEventListener - 您必须使用attachEvent。 - el.pescado - нет войне
1
IE自IE9版本开始支持addEventListener。你必须自己决定是否要为使用< IE9的用户构建Web应用程序。所有其他主要的浏览器-设备组合都支持addEventListener。来源：https://caniuse.com/#search=addEventListener - ThdK
有一个拼写错误，请修正方法名称，它应该是 getElementById 而不是 getElementyById。 - MasoodRehman
6

这是一种不错的跨浏览器方法

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);
});
4
给它一个ID，然后你就可以做以下操作：
document.getElementById("the id").onclick = function{ ... }
简短、简洁、直接回答问题，没有废话。+1 - Steve
4
0

你不必使用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

1
这不是一个好的方法，因为它依赖于函数 toString 实际上返回事件处理的函数体。这并不保证。 - Sean Kinsey
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接