yoo-s.com

[脱jQuery]$(document).on() をネイティブでコーディング

JavaScript 2019/06/03

jQuery の $(document).on() をネイティブでコーディング document.addEventListner() で記述するが、ネイティブの場合はターゲット(Event.target)が何かによって条件分岐が必要

サンプル

Github

yoo16/html_samples/blob/master/document_on.html

idの場合

    //jQuery
    $(document).on('click', '#id_name', function() {
        //working
    });

    //native
    document.addEventListener('click', function(event) {
        if (event.target.id === 'id_name') {
            //working
        }
    });

classの場合

    //jQuery
    $(document).on('click', '.class_name', function() {
        //working
    });

    //native
    document.addEventListener('click', function(event) {
        if(event.target.classList.contains('class_name'))
            //working
        }
    });

querySelectorAll() で取得する方法もある。（この方がjQueryに近いか？）ただ、addEventListener() を事前登録するため、後にHTMLを発生さした要素では動作しないのでイベント管理が必要

querySelectorAll() classの場合

        document.querySelectorAll('.class_name').forEach(function(element) {
            element.addEventListener('click', function(event) {
                //working
            });
        });

上記はIEの場合「NodeList」をループで回せない可能性があるので、

        let elements = document.querySelectorAll('.class_name');
            [].forEach.call(elements, function(element) {
            element.addEventListener('click', function(event) {
                //working
            });
        });

としても良い。