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>