javascript事件處理
阿新 • • 發佈:2018-12-13
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>