получить все имя тега при событии click

Question

Я пишу код, чтобы добавить событие click ко всем тегам на странице с помощью 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", когда нажмите на

это тест

, но я получаю что-то вроде это «я, я, я, я».

JSFIDDLE

может кто-нибудь помочь, пожалуйста? Спасибо.

Answer 1

Это потому, что 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>

Answer 2

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); 

Answer 3

Добавление слушателя всех элементов довольно дорого и не будет работать для вновь добавленных элементов Что я хотел бы сделать, это добавить один слушателя сверху и идти оттуда

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