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>

示例代码