1. 程式人生 > >javascript事件處理

javascript事件處理

event無處不在,用一段簡單的程式碼來演示click事件。

<section>
			<button id="button">點選切換背景。</button>
		</section>
		<script>
			var btn=document.getElementById('button');
			var section=document.querySelector('section');
			var flag=false;
			
			btn.addEventListener('click',function(){
				section.style.backgroundColor=flag?'#ddd':'bbb';
				flag=!flag;
			},false);
		</script>

首先新增事件的方法可以概括為:

Node.addEventListener('eventtype',function(){

   方法內容;

},flase);

就是 node.addEventListener('type',handle,false);   一般最後都是false,因為這個是控制冒泡或捕獲,我們一般不用捕獲,因此當false的時候是false.

有新增事件那肯定有刪除事件。刪除事件可以表示為:node.removeEventListener('type',handle);  這裡handle就是函式.

   <section>
			<button id="button">點選切換背景。</button>
		</section>
		<script>
			var btn=document.getElementById('button');
			var section=document.querySelector('section');
			var flag=false;
			
			
			var handle=function(){
				section.style.backgroundColor=flag?'#ddd':'bbb';
				flag=!flag;
			};
			btn.addEventListener('click',handle,false);
			btn.removeEventListener('click',handle);
			
		</script>