Question

我如何点击收听所有跨度标签？它没有框架就可以解决它的任务

    var spancontainer = document.all.tags('span');
    spancontainer.onclick = function() {
        alert("hi");
    }
[...]
    <span>Hello</span><span>World</span>

在jQuery中它想：

$("span").click(function() {
    alert("hi");
});

Answer 1

您可以利用事件冒泡。将事件处理程序附加到根并收听click事件：

document.onclick = function(event) {
    event = event || window.event; // IE specials
    var target = event.target || event.srcElement; // IE specials

    if(target.nodeName === "SPAN") {
        alert('hi');
    }
};

现在，如果span中有其他元素并且您想要捕获click内的span事件，则此功能无效。在这种情况下，您必须遍历DOM：

document.onclick = function(event) {
    event = event || window.event; // IE specials
    var target = event.target || event.srcElement; // IE specials

    while(target.nodeName !== "SPAN" && target !== null) {
        target = target.parentNode;
    }

    if(target) {
        alert('hi');
    }
};

Answer 2

 var spans = document.getElementsByTagName('span');
 for(var i=spans.length-1; i>=0; i--){
    spans[i].onclick = function() {
        alert("hi");
    }
 }

Answer 3

var click_alert = function() {
    alert("hi");
};
var spans = document.getElementsByTagName('span');
for(var i = 0; i < spans.length; i++)
{
  spans[i].addEventListener("click", click_alert, false);
}

您可以编写一个使用addEventListener或attachEvent的包装器，以获得更广泛的兼容性。

Answer 4

var spans = document.getElementsByTagName('span');
for(var i = 0; i < spans.length; i++)
{
  // ...
}

Javascript听所有标签

4 个答案: