获取点击事件的所有标记名称

get all tag name on click event

本文关键字：事件 获取      更新时间：2023-09-26

我编写了一个代码来使用 js 将点击事件添加到页面中的所有标签。

function modifyText(obj) {
  console.log(obj.target.tagName);
}
var el = document.body.getElementsByTagName("*");
console.log(el);
for (var i=0 ;i<el.length; i++){
  el[i].addEventListener("click", modifyText, false);
}

在modifyText函数中，我想获取单击它的任何标签。例如在此 HTML 中

<div>

  <h3>
    <b>salaaaaam<i> this is a test</i> </b>for add a click event to all tags in pages.
  </h3>
</div>

我想在点击时打印"I ， B， H3 ， DIV"

这是个测试

但我得到这样的东西"我，我，我，我"。

吉斯菲德尔

有人可以帮忙吗？谢谢。

这是因为event.target将引用实际触发事件的元素。

可以使用 this 或 event.currentTarget 来引用处理程序绑定到的元素。

function modifyText(e) {
  snippet.log(this.tagName + ' || ' + e.currentTarget.tagName);
}
var el = document.body.getElementsByTagName("*");
console.log(el);
for (var i = 0; i < el.length; i++) {
  el[i].addEventListener("click", modifyText, false);
}
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div>
  <h3>
    <b>salaaaaam<i> this is a test</i> </b>for add a click event to all tags in pages.
  </h3>
</div>

向所有元素添加侦听器非常昂贵，不适用于新添加的元素我要做的是在顶部添加一个侦听器，然后从那里开始

document.addEventListener('click', evt => {
    var elm = evt.target
    var els = []
    while (elm.tagName) {
        els.push(elm.tagName)
        elm = elm.parentNode
    }
    alert(els)
}, false)

 function getTextNode(p) {
     p.onclick = function modifyText(obj) {
         console.log(obj.target.tagName);
     }
     var childArr = p.childNodes;
     for (var i = 0; i < childArr.length; i++) {
         textNodeArr = getTextNode(childArr[i]);
     }
     return;
 }
 arr = getTextNode(document.body);
相关文章：