如何实现点击指定元素后将该元素的值输出到console.log

解决方案 #

你可以直接通过事件触发的目标元素读取内部值输出即可，以下是两种可行写法：

写法1：利用回调函数默认this指向 #

function clickEvent(){
   console.log(this.innerHTML)
}

通过addEventListener绑定的事件回调中，this默认指向当前绑定事件的DOM元素，直接读取其innerHTML即可拿到你之前赋值的文本内容。

写法2：通过事件对象获取目标元素 #

function clickEvent(event){
   console.log(event.target.innerHTML)
}

如果担心this指向受其他代码影响，可以通过回调接收的事件对象event，获取触发本次点击事件的目标元素后读取内容。

若元素内只有纯文本，也可以用innerText替代innerHTML，过滤掉可能存在的HTML标签内容。

内容的提问来源于stack exchange，提问作者saw you