需要打開控制台查看效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 多個事件的綁定及移除</title>
</head>
<body>
<button id="button">button</button>
<button id="unbind">unbind</button>
<script>
window.onload = function() {
var button = document.querySelector('#button');
var unbind = document.querySelector('#unbind');
// 1、使用匿名函數添加事件
// 這種綁定沒有辦法移除, 除非移除全部 click 事件
button.addEventListener('click', function(e) {
console.log('click');
});
// 2、使用命名函數添加事件
// 這種綁定方法可以通過函數引用作為參數移除
button.addEventListener('click', click1);
unbind.addEventListener('click', function(e) {
button.removeEventListener('click', click1);
});
};
function click1(e) {
console.log('click1')
}
</script>
</body>
</html>
點擊 button 再點擊 unbind，再點擊 button，會在控制台看到如下輸出：
也可以在 jsfiddle 查看：https://jsfiddle.net/rubys/xm0pa64n/14/
使用 jquery 的話，操作比較方便：
綁定：
$('xx').on('click.click_event', function() {});
取消綁定：
$('xx').unbind('click.click_event')
和我們平常寫的區別是多了個 點號和點號后面事件的標識名。
如果用 jquery，我們上面原生寫法可換成
// 以下是 jquery 綁定以及取消綁定事件的用法
$(function() {
// 綁定一個 click 事件
$('#button1').on('click', function(e) {
console.log('jquery button click');
});
// 綁定另外一個 click 事件(如果我們后面需要取消綁定的話，需要指定一個標識，這里是 test)
$('#button1').on('click.test', function(e) {
console.log('jquery button click 1');
});
// 取消綁定 'test' click 事件
$('#unbind1').click(function(e) {
console.warn('jquery unbind');
$('#button1').unbind('click.test');
})
})