innerHTML 的侦听器 [重复]

Posted

技术标签:

【中文标题】innerHTML 的侦听器 [重复]【英文标题】:Listener to innerHTML [duplicate] 【发布时间】:2020-09-16 11:39:44 【问题描述】:

我有 5 次倒计时,如果计时器为“00:00”,我想点击下面的图片。 现在我有它像下面的代码,但我必须每次点击都刷新页面。是否有类似用于 innerhtml 的事件侦听器的东西。我用计时器解决了这个问题,它检查了 innerhtml,但我不想使用计时器。

  var ct1 = document.querySelector("#countdown1 > span").innerText
  if (ct1 == "00:00")  document.querySelector("#farmimage_1").click(); 

  var ct2 = document.querySelector("#countdown2 > span").innerText
  if (ct2 == "00:00")  document.querySelector("#farmimage_2").click(); 

  var ct3 = document.querySelector("#countdown3 > span").innerText
  if (ct3 == "00:00")  document.querySelector("#farmimage_3").click(); 

  var ct4 = document.querySelector("#countdown4 > span").innerText
  if (ct4 == "00:00")  document.querySelector("#farmimage_4").click(); 

  var ct5 = document.querySelector("#countdown5 > span").innerText
  if (ct5 == "00:00")  document.querySelector("#farmimage_5").click(); 

【问题讨论】:

什么?为什么?只需将侦听器放在跨度上,然后在该侦听器的事件处理程序中,检查event.target.textContent不是 innerHTML,您不关心HTML代码,您关心文本) 你的意思是什么现在我有它就像下面的代码但我每次点击都必须刷新页面 @Reggie 我的意思是只有在我刷新页面时才会点击图片 【参考方案1】:

MutationObserver interface 可以解决问题:

function toggle() 
  let div = document.getElementById('d0');
  div.textContent = div.textContent == 'foo'? 'bar':'foo';


window.onload = function()

  document.getElementById('b0').addEventListener('click', toggle, false);
  
  let div = document.getElementById('d0');
  let observer = new MutationObserver(function() 
    console.log('textContent changed to ' + div.textContent);
  );
  observer.observe(div, childList: true);

<div id="d0">foo</div>
<button id="b0">Toggle foo/bar</button>

与计时器一起使用:

// Simple countdown
function timer()
  let div = document.getElementById('timer');
  let time = div.textContent;
  let intervalID = setInterval(() => 
    div.textContent = --time;
    if (time == 0) clearInterval(intervalID);
  , 1000);



window.onload = function() 

  // Create observer
  let div = document.getElementById('timer');
  let observer = new MutationObserver(function() 
    if (div.textContent == '0') 
      console.log('Zero!!');
    
  );
  // Start observing
  observer.observe(div, 
    childList: true
  );
  // Start timer
  timer();
;
&lt;div id="timer"&gt;5&lt;/div&gt;

【讨论】:

以上是关于innerHTML 的侦听器 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

iframe - 正文 - 替换 innerHTML 事件侦听器后不起作用 [重复]

jQuery使用数据目标更改带有onClick侦听器的一组单选按钮标签的innerHtml

为啥使用 element.innerHTML 后事件监听器会停止工作?

Javascript元素数组innerHTML返回未定义

将EventListener 添加到innerHTML

删除重复的事件侦听器