如何在没有框架的情况下将点击绑定到锚点 (javascript)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2966160/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I bind a click to an anchor without a framework (javascript)
提问by Stomped
I know this is easily done in jQuery or any other framework, but that's not really the point. How do I go about 'properly' binding a click event in pure javascript? I know how to do it inline (I know this is terrible)
我知道这在 jQuery 或任何其他框架中很容易完成，但这并不是重点。如何在纯 javascript 中“正确”绑定点击事件？我知道如何内联（我知道这很糟糕）
<a href="doc.html" onclick="myFunc(); return false">click here</a>
and this causes my javascript to execute for a JS enabled browser, and the link to behave normally for those without javascript?
这会导致我的 javascript 为启用了 JS 的浏览器执行，并且链接对于那些没有 javascript 的浏览器表现正常？
Now, how do I do the same thing in a non-inline manner?
现在，我如何以非内联方式做同样的事情？
回答by Pekka
If you need to assign only one clickevent, you can assign onclick:
如果您只需要分配一个click事件，您可以分配onclick：
If you have an ID:
如果您有身：
myAnchor = document.getElementById("Anchor");
myAnchor.onclick = function() { myFunc(); return false; }
you can also walk through all anchors:
您还可以遍历所有锚点：
anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
anchors[i].onclick = .....
}
There's also a document.getElementsByClassNameto simulate jQuery's class selector but it is not supported by all browsers.
还有一个document.getElementsByClassName模拟 jQuery 的类选择器，但并非所有浏览器都支持它。
If it could be that you need to assign multiple events on one element, go with addEventListenershown by @Jordan and @David Dorward.
如果可能需要在一个元素上分配多个事件，请使用addEventListener@Jordan 和@David Dorward 所示。
回答by Jordan Running
The basic way is to use document.getElementById()to find the element and then use addEventListenerto listen for the event.
基本的方法是使用document.getElementById()查找元素然后使用addEventListener监听事件。
In your HTML:
在您的 HTML 中：
<a href="doc.html" id="some-id">click here</a>
In your JavaScript:
在你的 JavaScript 中：
function myFunc(eventObj) {
// ...
}
var myElement = document.getElementById('some-id');
myElement.addEventListener('click', myFunc);
Or you can use an anonymous function:
或者您可以使用匿名函数：
document.getElementyById('some-id').addEventListener('click', function(eventObj) {
// ...
});
回答by Sean Kinsey
This is a nice cross-browser method
这是一个不错的跨浏览器方法
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);
});
回答by Quentin
The standard go to for this question is on Quirks Mode: http://www.quirksmode.org/js/events_advanced.html
这个问题的标准是关于怪癖模式：http://www.quirksmode.org/js/events_advanced.html
回答by Lloyd
Give it an ID and you should be able to do:
给它一个 ID，你应该能够做到：
document.getElementById("the id").onclick = function{ ... }
回答by unigg
You don't have to use jQuery, but you could try John Resig's popular addEvent funciton.
您不必使用 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 );
}
There are more to be considered to'properly' bind an event on HTML tags in pure javascript.
在纯 javascript 中，还有更多需要考虑“正确”绑定 HTML 标签上的事件。
http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm
http://www.pagecolumn.com/javascript/bind_event_in_js_object.htm
回答by Reyraa
Thanks to Pekka, remember binding listeners to entire array of elements with a certain class, rapidly increases the number of events bound to elements.
感谢 Pekka，请记住将侦听器绑定到具有特定类的整个元素数组，快速增加绑定到元素的事件数量。
use the for loop in a faster way:
以更快的方式使用 for 循环：
for (var i = Things.length - 1; i >= 0; i--) {
Things[i]
};
the first expression of for loop will calculate only one time, so in this way, it won't through the DOM and calculate the length of array, besides, because of stack structure stepping on Arrays in reverse is faster then stepping forward.
for 循环的第一个表达式只会计算一次，所以这样，它不会通过 DOM 来计算数组的长度，此外，由于堆栈结构反向步进数组比向前步进更快。
