Event Delegation

Question

我想多次使用getElemendbyId函数，只是将ID的名称作为变量传递。

我猜有比这更优雅的方法了

<div id="1" onclick="myFunction2()"></div>
<div id="2" onclick="myFunction3()"></div>
<div id="3" onclick="myFunction4()"></div>
<div id="4" onclick="myFunction5()"></div>
<script>
function myFunction2() { document.getElementById("2").innerHTML = "test2"; }
function myFunction3() { document.getElementById("3").innerHTML = "test3"; }
function myFunction4() { document.getElementById("4").innerHTML = "test4"; }
</script>

谢谢！

Answer 1

<div id="1" onclick="myFunction(2, 'test2')"></div>
<div id="2" onclick="myFunction(3, 'test3')"></div>
<div id="3" onclick="myFunction(4, 'test4')"></div>
<div id="4" onclick="myFunction(5, 'test5')"></div>
<script>
    function myFunction(id, content) {
        document.getElementById(id).innerHTML = content; 
    }
</script>

Answer 2

有两种方法可以解决此问题，但是在所有情况下，您实际上都不应使用内联事件处理属性（onclick）。有many reasons不使用这种已有20多年历史的技术，它不会死掉它应得的将近10年前的死亡。此外，就性能而言，不要使用.innerHTML获取/设置不包含任何HTML的值，因为这样做会浪费性能，并在应用程序中造成安全漏洞。而是使用.textContent来获取/设置非HTML值。

为每个元素拥有自己的处理程序：

将所有需要类似处理程序的元素放入数组
环绕数组
将处理程序分配给当前数组元素

// Get all the elements that need the same handler into an Array
let divs = Array.prototype.slice.call(document.querySelectorAll("div"));

// Iterate the array
divs.forEach(function(div){
  // Set up the handler
  div.addEventListener("click", function(){
    div.textContent = "test" + div.id;
  });
});

<div id="1">click me</div>
<div id="2">click me</div>
<div id="3">click me</div>
<div id="4">click me</div>

仅设置一个处理程序并使用event delegation：

为所有相关元素的祖先分配一个通用处理程序
在处理程序中，对触发事件的特定元素进行操作。

// Set up an event handler on the container element
document.querySelector(".parent").addEventListener("click", function(event){
  // Act upon the target of the event (the element that triggered the
  // event in the first place).
  event.target.textContent = "test" + event.target.id;
});

<div class="parent">
  <div id="1">click me</div>
  <div id="2">click me</div>
  <div id="3">click me</div>
  <div id="4">click me</div>
</div>

Answer 3

比内联on<...>事件处理程序更优雅的解决方案是在父元素（read about event delegation here）上调用addEventListener。注册侦听器后，您可以使用event参数来确定用户单击的目标以及要采取的操作（如果有）。

例如，在下面的情况下，我们评估event以确定是否单击了<div>元素之一-如果是，则调用myFunction并传入适当的数据：< / p>

document.addEventListener('click', handleClick)

function handleClick(event) {
  if (event.target.tagName === 'DIV') {
    myFunction(event.target);
  }
}

function myFunction(el) {
  el.innerHTML = `test${el.id}`;
}

<div id="1">Click Me</div>
<div id="2">Click Me</div>
<div id="3">Click Me</div>
<div id="4">Click Me</div>

Answer 4

您可以使用getElementById和addEventListener函数。看起来像这样

[1, 2, 3, 4].forEach(id => {
  document.getElementById(id).addEventListener('click', () => {
    const el = document.getElementById(id + 1);
    if (el) el.innerHTML = `test${id+1}`;
  });
});

<div id='1'>a</div>
<div id='2'>b</div>
<div id='3'>c</div>
<div id='4'>d</div>

Answer 5

这是不使用ID的解决方案

function myFunction(el, content) {
   el.innerHTML = content; 
}

<div onclick="myFunction(this, 'test2')">Click Me</div>
<div onclick="myFunction(this, 'test3')">Click Me</div>
<div onclick="myFunction(this, 'test4')">Click Me</div>
<div onclick="myFunction(this, 'test5')">Click Me</div>

Answer 6

Event Delegation

事件委托是一种通过注册一组后代元素的祖先元素来优化事件处理的模式。通过控制什么被事件忽略以及事件触发什么，您可以让单个元素（演示中的祖先是<ul> / event.currentTarget）侦听事件（演示中的click事件）后代元素（演示event.target中的所有<li>）。

演示

详细信息在演示中被评论

// Reference an ancestor element
var list = document.querySelector('ul');
// Register click event on ancestor element
list.onclick = clicker;
// Callback function pass the Event Object
function clicker(event) {
  // Reference the clicked element (<li>...)
  var clicked = event.target;
  // Reference the element registered to the event (<ul>)
  var ancestor = event.currentTarget;
  // if the clicked element is NOT the registered element
  if (clicked !== ancestor) {
    // if the clicked element is an <li>...
    if (clicked.matches('li')) {
      // ...toggle the .on class 
      clicked.classList.toggle('on');
    }
  }
}

li {
  cursor: pointer;
}

.on {
  color: gold;
  background: black;
}

<ul>
  <li>ITEM 1</li>
  <li>ITEM 2</li>
  <li>ITEM 3</li>
  <li>ITEM 4</li>
</ul>

Javascript优化：重复相同的功能

6 个答案:

Event Delegation

演示