向JavaScript事件调用添加变量

add variables to a JavaScript event call?

本文关键字：添加 变量 调用 事件 JavaScript      更新时间：2023-09-26

我想知道是否有可能这样做：

HTML

<div id="myspace" class="thing"></div>
<div id="mytable" class="thing"></div>

JS

document.getElementById('my'+this).on('click', function(){
     document.getElementById(this).innerHTML = 'Chosen';
});

逻辑是有两个框，第一个是myspace，第二个是mytable。单击其中一个后，框的innerHTML将读取"Chosen"。

基本上，我想看看是否可以避免编写多次单击事件和/或if语句。

JSFiddlehttps://jsfiddle.net/7cLu9uah/

这里有多个问题：

  1. DOM元素没有on函数。jQuery和其他一些库中有一个on函数，但DOM中没有。CCD_ 6返回一个DOM元素。

  2. 此行尝试使用this作为ID:

    document.getElementById(this).innerHTML = 'Chosen';

    虽然不知道你试图使用什么on是不可能的，但在绝大多数库中，在以这种方式连接的事件处理程序中，this指的是元素，而不是它的ID。因此：

    this.innerHTML = 'Chosen';

您可以通过将通用事件处理程序附加到父级，然后通过单击处理程序对单击的项目进行操作，来使用委托事件处理来实现这一点。

document.getElementById("container").addEventListener('click', function(e) {
    e.target.innerHTML = 'Chosen';
});
.thing {width: 100px; height: 20px; background:red; margin: 10px;}
<div id="container">
<div id="myspace" class="thing"></div>
<div id="mytable" class="thing"></div>
</div>

此外，在您的代码中，您试图在DOM元素上使用.on()。这行不通。也许您混淆了普通Javascript和jQuery，后者确实有.on()方法。

并且，document.getElementById()获取一个字符串，该字符串应该与您试图查找的元素的id相匹配。您的代码ocument.getElementById('my'+this)的用法不正确。

使用jQuery库，像这样的DOM操作通常更简单，而且您似乎正试图在.on()中使用一些jQuery语法。以下是您在jQuery中可以做的事情：

$(".thing").on("click", function() {
    this.innerHTML = "chosen";
})
.thing {width: 100px; height: 20px; background:red; margin: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="myspace" class="thing"></div>
<div id="mytable" class="thing"></div>

您可以使用类选择器：

function clickHandler(e) { 
   // `this` keyword refers to the clicked element
   this.textContent = 'chosen';
}
[].forEach.call(document.querySelectorAll('.thing'), function(el) {
   el.addEventListener('click', clickHandler);
});

如果您有几个具有thing类名的元素，并且不想为它们附加单击处理程序，则可以将选择器更改为：'#mytable, #myspace'。

相关文章：