我们可以在HTML中识别当前元素的内容吗?

是否有任何方法可以获得HTML元素的内容-函数被调用-而不必通过ID或类名来标识它?

的例子，而不是使用:

<button class="colm" type="button" onclick="show('1')">1</button>

我们可以这样用:

<button class="colm" type="button" onclick="show(getThisElementContent())">1</button>

我的观点是问是否有可能使这个函数说，我们称之为getThisElementContent()，能够从元素中提取innerHTML，在我们的情况下，元素innerHTML是1。

有几种方法，最简单的包括:

将this传递给内联事件处理程序:

function showContent(element) {
console.log(element.textContent);
}

<button class="colm" type="button" onclick="showContent(this)">1</button>

通过JS添加事件并访问事件target:

document.querySelector('.colm').addEventListener('click', showContent);
function showContent(event) {
console.log(event.target.textContent);
}

<button class="colm" type="button">1</button>

当然，定义一个名为logElem的函数:

const logElem = (elem) => console.log({elem});

then in HTML:

<div onclick="logElem(this)">CLICK ME</div>

欢呼

使用目标元素的innerText属性可以达到这个目的。

let b = document.querySelector('button.colm')
;
b.addEventListener('click', (e) => { console.log(e.target.innerText); });

<button class="colm" type="button">whatever</button>

是的，有。你需要在JavaScript中添加一个事件监听器，这样你就可以在鼠标点击事件发生时处理它。

<html>
<body>
<button id="myButton">
Click Me 
</button>
</body>
<script>
const button = document.getElementById("myButton")
button.addEventListener('click', e => {
console.log(e.target.innerHTML);
});
</script>
</html>

addEventListener的第二个参数是一个回调函数，当按钮上发生click事件时将执行该函数。该函数将接收一个参数，在本例中，我将其命名为e，其类型为Event，您可以在这里阅读- https://developer.mozilla.org/en-US/docs/Web/API/Event

这个事件对象有一个target属性，该属性是对事件最初分配到的对象的引用，即按钮。

相关内容

最新更新

热门标签：