使用纯JavaScript

Question

您好，

我需要在代码中出现具有给定类的元素时执行一次javascript函数（该元素将由另一个脚本生成）。

这是我的功能：

play(sound);

该元素将显示在此内：

<div id="canvas">

元素看起来像这样：

<span class="sound">sound name</span>

其中＆＃34;声音名称＆＃34;将确定play（）;

的参数

如何用javascript完成？

谢谢。

Answer 1

您可以使用a您可以使用MutationObserver，如下所示。

.observe()的第二个参数MutationObserverInit非常重要：

如果childList: true仅作为直接子项添加，请在选项中使用span。 subTree: true如果它可以低于#canvas以下的任何级别。

来自docs：

childList：如果要观察目标节点的子元素（包括文本节点）的添加和删除，则设置为true。
subtree：如果要观察目标和目标后代的突变，请设置为true。

＆＃13;

$("#go").click(function () {
    $("#canvas").append($('<span class="sound">sound name</span>'));
});

function play(n) { alert('playing '+ n); }

var obs = new MutationObserver(function(mutations, observer) {
  $.each(mutations, function (i, mutation) {
    var addedNodes = $(mutation.addedNodes);
    var selector = "span.sound"
    var spanSounds = addedNodes.find(selector).addBack(selector); // finds either added alone or as tree
    spanSounds.each(function () { // handles any number of added spans
      play($(this).text());
    });
  });
});

obs.observe($("#canvas")[0], {childList: true, subtree: true});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="canvas"></div>

<button id="go">Add span to canvas</button>

＆＃13;

使用纯JavaScript

代码不那么紧凑，但绝对可行：

＆＃13;

document.getElementById("go").addEventListener('click', function () {
  var s = document.createElement('span');
  s.innerText = 'sound name';
  s.classList.add('sound')
  document.getElementById('canvas').appendChild(s);
});

function play(n) { alert('playing '+ n); }

var obs = new MutationObserver(function(mutations, observer) {
  for(var i=0; i<mutations.length; ++i) {
    for(var j=0; j<mutations[i].addedNodes.length; ++j) {
      var addedNode = mutations[i].addedNodes[j];
      //NOTE: if the element was added as child of another element, you would have to traverse
      // the addedNode to find it. I recommend the jQuery solution above if that's the case
      if(addedNode.tagName == "SPAN" && addedNode.classList.contains("sound")) {
        play(addedNode.innerText);
      }
    }
  }
});

obs.observe(document.getElementById('canvas'), {childList: true, subtree: true});

＆＃13;

<div id="canvas"></div>

<button id="go">Add span to canvas</button>

＆＃13;

Answer 2

您可以尝试onload event

Answer 3

您需要一个侦听器来检测DOM更改MutationObserver

// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = { attributes: true, childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList) {
    for(var mutation of mutationsList) {
        if (mutation.type == 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type == 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

如何在元素的外观上触发javascript函数

3 个答案:

使用纯JavaScript