事件註冊事件給元素添加事件，為註冊事件或者綁定事件註冊事件兩種方式傳統方式監聽事件方式事件監聽addEventListener() 事件監聽 (IE9以上)eventTarget.addEventListener(type, listener, [useCapture])參數type： 事件類型字元... ...
事件
註冊事件
給元素添加事件，為註冊事件或者綁定事件
註冊事件兩種方式
- 傳統方式
- 監聽事件方式
事件監聽
- 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>
示例代碼
