将点击元素的内部 HTML 打印到控制台答案

【问题标题】：Printing inner HTML of clicked elements to the console将点击元素的内部 HTML 打印到控制台
【发布时间】：2017-08-01 11:17:09
【问题描述】：

我希望能够在控制台中编写代码，允许我将我在网页中单击的任何元素的内部 HTML 打印到控制台。到目前为止，这是我的代码。

var findBody = document.querySelector ('body');

function findContent(event) {
findBody.onclick = "findContent(event)";
console.log (event.target.innerHTML);
}

请客气，我刚开始写JS。谢谢

【问题讨论】：

标签： javascript dom innerhtml

【解决方案1】：

您已经找到了 body 元素并编写了一个函数。但是你的函数永远不会被调用，你必须让浏览器在事件（点击）发生时执行它。

附加事件处理程序的基本方法是定义元素的on+eventName 属性。不过，最好使用element.addEventListener 方法，因为您可以根据需要向同一个元素添加任意数量的事件侦听器。此外，此方法允许控制在通过文档传播事件期间何时应用事件处理程序 (nice doc)

这是基本解决方案：

// find body element
var findBody = document.querySelector('body');

// define handler function
function findContent(event) {
  console.log (event.target.innerHTML);
}

// attach event handler
findBody.addEventListener('click', findContent);

【讨论】：

【解决方案2】：

这应该可行：

var findBody = document.querySelector ('body');

function findContent(event) {
console.log (event.target.innerHTML);
}

findBody.onclick = findContent;

【讨论】：

【解决方案3】：

也许，你可以试试这个sn-p：

function find() {
    console.log(event.target.innerHTML);
}
document.onclick = find;

【讨论】：