javascript绑定事件和解绑事件

js中常用事件有：

事件	描述
onclick	用户单击某个元素触发事件
ondblcilck	用户双击某个元素触发事件
onmousedown	鼠标按钮被按下
onmouseup	鼠标按钮被松开

方法一：

绑定事件：DOM.on+EventName = function
解绑事件：DOM.on+EventName = null

<div>
	<input type="button" id="bind" value="事件绑定">
	<input type="button" id="relieve" value="解除绑定">
</div>
<script type="text/javascript">
	//为id为bind的按钮绑定事件
	document.getElementById('bind').onclick = function(){
		alert('事件已经绑定，单击按钮后我会弹出');
	}
	//单击id为relieve按钮解除id为bind按钮的绑定事件
	document.getElementById('relieve').onclick = function(){
		document.getElementById('bind').onclick = null;
	}
</script>

方法二：

绑定事件：DOM. addEventListener(EventName ，function)
绑定事件：DOM. removeEventListener(EventName ，function)
注:函数必须是带名函数才能解绑

<!-- 这个方法ie8不支持使用 -->
<div>
	<input type="button" id="bind" value="事件绑定">	
	<input type="button" id="relieve" value="解除绑定">
</div>
<script type="text/javascript">
	function fun1(){
		console.log('绑定事件1')
	}
	function fun2(){
	 console.log('绑定事件2')
	}
	//为id为bind的按钮绑定事件
	document.getElementById('bind').addEventListener(click,fun1)
	document.getElementById('bind').addEventListener(click,fun2)
	//单击id为relieve按钮解除id为bind按钮的绑定事件
	document.getElementById('relieve').onclick = function()
		document.getElementById('bind').removeEventListener(click,fun1)	
	}
</script>

方法三:

绑定事件：DOM. attachEvent(EventName ，function)
绑定事件：DOM. detachEvent(EventName ，function)
注:函数必须是带名函数才能解绑

<!-- 在ie8中使用，谷歌不支持 -->
<div>
 <input type="button" id="bind" value="事件绑定"> 
 <input type="button" id="relieve" value="解除绑定">
</div>
<script type="text/javascript">
	 function fun1(){
	 	console.log('绑定事件1')
	 }
	 function fun2(){
	 	console.log('绑定事件2')
	 }
	 //为id为bind的按钮绑定事件
	 document.getElementById('bind').attachEvent(click,fun1)
	 document.getElementById('bind').attachEvent(click,fun2)
	 //单击id为relieve按钮解除id为bind按钮的绑定事件
	 document.getElementById('relieve').onclick = function()
	 	document.getElementById('bind').detachEvent(click,fun1) 
	 }
</script>