Событие срабатывания при изменении атрибута DOM

Question

Событие срабатывания при изменении атрибута DOM

Изучение C# 2005 , Jesse Liberty & Brian MacDonald (O'Reilly).

ISBN 10: 0-596-10209-7.

, Когда я сначала сделал переход от процессуального кодекса классика ASP до объектно-ориентированного кода C# в VS2005, эта книга установила меня на правильном пути.

62

javascript jquery events dom javascript-events dom-events

задан Brian Tompsett - 汤莱恩 22 October 2019 в 10:29

1 ответ

Другие вопросы по тегам:

javascript jquery events dom javascript-events dom-events

Похожие вопросы:

score 0 · Answer 1

У меня была та же проблема, где я должен был найти изменение атрибута дорожки некоторого конкретного элемента DOM. и я использовал MutationObserver.

, Но была еще одна сложность, с чем я сталкивался при использовании MutationObserver. MutationObserver является потребностью некоторый целевой элемент при наблюдении изменения.

при работе с SPA (где Ajax, Угловой, реагируют или любая другая платформа JavaScript использовались), Вы, возможно, поняли, что все элементы являются динамичными. вот именно было бы трудным поставить цель.

Здесь я шел с некоторым решением, где я применил MutationObserver на DOM и затем испустил customEvent, когда некоторый атрибут любого элемента получает изменение.

затем на следующем шаге фильтруют пользовательское событие согласно нашему требованию.

 // code to change image src in each 1000ms.
        count = 0;
        setInterval(function() {
            dimension = `${600+count}x${400+count}`;
            document.querySelector('div.image-box img').src = `https://dummyimage.com/${dimension}/000/fff`;
            document.querySelector('div.image-box img').alt = dimension;
            count++;
        }, 1000);

        function startMutationObserver(tNode, c) {
            // Select the node that will be observed for mutations
            const targetNode = tNode ? tNode : document;

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

            // Callback function to execute when mutations are observed
            const callback = function(mutationsList, observer) {
                for (let mutation of mutationsList) {
                    if (mutation.type === 'childList') {
                        targetNode.dispatchEvent(new CustomEvent('newChild', {
                            detail: mutation
                        }));
                    } else if (mutation.type === 'attributes') {
                        targetNode.dispatchEvent(new CustomEvent('attributeChange', {
                            detail: mutation
                        }));
                    }
                }
            };

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

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

            // Later, you can stop observing
            // observer.disconnect();
        }
        // call this function to start observing DOM element change
        startMutationObserver(document);

        // code to listen custom event and filter custom event as per requirement
        document.addEventListener('attributeChange', function(e) {
            // console.log(e);
            const ele = e.detail;

            if (ele.target.matches('div.image-box img') && ele.attributeName == 'src') {

                var src = e.detail.target.getAttribute('src');
                var alt = e.detail.target.getAttribute('alt');
                console.log(src, alt);

            }
        })

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="image-box">
        <img src="https://dummyimage.com/600x400/000/fff" alt="600x400">
    </div>

</body>

</html>

я надеюсь, что это поможет Вам к отслеживанию любого изменения атрибута, вставки нового элемента также.. Позволяет попытке, и сообщите мне, сталкиваетесь ли Вы с какими-либо проблемами.