JavaScript DOM–事件操做

時間 2020-01-21

標籤 javascript dom 事件欄目 JavaScript 简体版

原文原文鏈接

事件

註冊事件

給元素添加事件，爲註冊事件或者綁定事件ide

註冊事件兩種方式函數

傳統方式
監聽事件方式

事件監聽

addEventListener() 事件監聽 (IE9以上)

eventTarget.addEventListener(type, listener, [useCapture])

參數type：事件類型字符串，不要on 如click，mouseover
參數listener：事件處理函數，觸發的時候要作的事情
參數useCapture：可選，是一個布爾值，默認false

attacheEvent() 事件監聽 (IE678支持)

evetagrget.attachEvent(eventNameWithOn, callback)

參數eventNameWithOn：事件類型字符串，不要on 如click，mouseover
參數callback：事件處理函數，觸發的時候要作的事情

<body>
    <button>傳統註冊事件</button>
    <button>addEventListener  ie9以上</button>
    <button>attachEvent  ie678</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 傳統註冊事件
        btns[0].onclick = function () {
            alert('傳統方式')
        };
        // addEventListener 添加多個不覆蓋
        btns[1].addEventListener('click', function () {
            alert('ddEventListener  ie9以上')
        });
        btns[1].addEventListener('click', function () {
            alert('ddEventListener  ie9以上---2')
        });

        //attachEvent
        btns[2].attachEvent('click', function () {
            alert('attachEvent')
        })
    </script>
</body>

示例代碼

刪除事件

傳統方式

btns.onclick = null

方式刪除監聽事件

eventTarget.removeEventListener(type, listener, [useCapture])

參數type：事件類型字符串，不要on 如click，mouseover
參數listener：事件處理函數，觸發的時候要作的事情
參數useCapture：可選，是一個布爾值，默認false

<body>
    <button>addEventListener  ie9以上</button>
    <button>attachEvent  ie678</button>
    <script>
        var btns = document.querySelectorAll('button');
        // addEventListener 添加多個不覆蓋
        btns[0].addEventListener('click', fn);
        function fn() {
            alert(222);
            this.removeEventListener('click', fn)
        }

        //attachEvent
        btns[1].attachEvent('click', fn1);
        function fn1() {
            alert(111);
            this.detachEvent('click', fn1)
        }

    </script>
</body>

示例代碼