Как удалить конкретный слушатель события из окна, используя нативный JavaScript

Question

Примечание: я знаю, что есть пара вопросов о том, как удалить определенный прослушиватель событий, но мой случай использования - это нечто конкретное.

Я хочу удалить определенный прослушиватель событий из элемента 'window'.

Что-то вроде: -

window.addEventListener ("message", receiveMessage, false);

window.removeAllEventListener ("message");

Ниже приведен пользовательский плагин drupal: -

CKEDITOR.plugins.add( 'aemassetpicker', {
// Register the icons. They must match command names.
icons: 'aemassetpicker',

// The plugin initialization logic goes inside this method.
init: function( editor ) {

    CKEDITOR.scriptLoader.load( 'https://code.jquery.com/jquery-1.11.1.min.js');

    var assetPickerURL = "https://localhost/aem/assetpicker";

    var style = "popup";

    var popup;

    function _popup(url) {
        popup = window.open(url, "dam", "left=25%,top=25%,height=800,width=1600,status=yes,toolbar=no,menubar=no,location=yes");
        //popup = window.open(url, "dam");
        //console.log("popup");
        //console.log(popup);
    }

    // Define the editor command that inserts a dailog.
    editor.addCommand( 'insertAEMAssets', {
        exec: function( editor ) {

            var img_asset;
            var title_asset;
            var url_asset;
            var type_asset;
            var size_asset;

            //$(window).off('message').on('message', receiveMessage);
            window.addEventListener("message", receiveMessage, false);

            var url = assetPickerURL;

            _popup(url);

            function receiveMessage (event) {
                // Don’t accept messages from other sources!
                if (assetPickerURL.indexOf(event.origin) != 0) {
                    return;
                }

                var fromDam = JSON.parse(event.data);

                console.log("fromDam");
                console.log(fromDam);

                if (fromDam.config) {
                    var configFromDam = fromDam.config;

                    if (configFromDam.action === 'close' || configFromDam.action === 'done') {
                        if (popup) {
                            popup.close();
                        }
                    }
                }

                if (fromDam.data) {
                    var dam_detail = fromDam.data;

                    for (var i in dam_detail) {
                        img_asset = dam_detail[i].img;
                        title_asset = dam_detail[i].title;
                        url_asset = dam_detail[i].url;
                        type_asset = dam_detail[i].type;
                        size_asset = dam_detail[i].size;
                        //console.log(img_asset);
                        //console.log(title_asset);
                        //console.log(url_asset);
                        //console.log(type_asset);
                        //console.log(size_asset);
                        editor.insertHtml( '<img src="' + url_asset + '/_jcr_content/renditions/cq5dam.thumbnail.319.319.png" alt="' + title_asset + '"></img>' );
                    }
                }

                window.removeEventListener("message", receiveMessage, false);
            }
        }
    });

    // Create the toolbar button that executes the above command.
    editor.ui.addButton( 'AEMAssetPicker', {
        label: 'Insert AEM Assets',
        command: 'insertAEMAssets',
        toolbar: 'basicstyles,0',
        allowedContent: true
    });

}
});

То, что я пробовал: -

1. Перемещение функции callMessage наверх, но оно должно быть внутридля вызова editor.insertHtml.

2. Если я использую window.addEventListener ("message", receiveMessage, false);вне функции это не работает, потому что адрес функции меняется каждый раз.

3. window.removeEventListener ("message", receiveMessage, false);before window.addEventListener ("message", receiveMessage, false);но опять же нет функции обратного вызова с тем же адресом, поэтому создается еще один прослушиватель событий.

Есть идеи?

Answer 1

Если у вас нет доступа к исходной функции, используемой с addEventListener, вы не можете удалить ее с помощью DOM API.Эта ссылка на функцию необходима для вызова removeEventListener.

. Поэтому, если вы хотите сделать это, вам нужно сохранить добавленную вами функцию receiveMessage, а затем использовать ее при удалении.Например, объявите переменную внутри плагина:

var lastReceiveMessage = null;

, затем:

if (lastReceiveMessage) {
    window.removeEventListener("message", lastReceiveMessage, false);
}
lastReceiveMessage = receiveMessage;
window.addEventListener("message", receiveMessage, false);

и позже, когда вы удалите его, потому что получили сообщение, которое хотели:

window.removeEventListener("message", receiveMessage, false);
if (lastReceiveMessage == receiveMessage) {
    lastReceiveMessage = null;
}