w3c事件

添加事件

addEventListener(事件名,事件函数,false)

移除事件

removeEventListener(事件名,事件函数,false)

注意:删除事件时,保证删除的事件处理函数与添加时保持一致

实例:

<body>
	<button id="btn1">按钮</button>
	<button id="btn-remove">移除按钮一的点击事件</button>
	<script type="text/javascript">		
		var oBtn=document.getElementById('btn1');
		var oBtn2=document.getElementById('btn-remove');
		//追加点击事件
		oBtn.addEventListener('cilck',show,false);
		//添加鼠标经过事件
		oBtn.addEventListener('mouseover',function(){
			this.style.color='red';
		},false);

		//添加鼠标离开事件
		oBtn.addEventListener('mouseout',function(){
			this.style.color='#333';
		},false);
      
//另一个按钮
//添加点击事件
document.getElementById('btn-remove').addEventListener('click',function(){},false);
  oBtn.removeEventListener('click',show,false);
        function show(){
           alert('111');
        }
   </script>
</body>

点击切换事件

<body>
	<button id="btn-hide">隐藏</button>
	<button id="btn-show">显示</button>
	<button id="btn-toggle">切换</button>
	<div id="box"></div>

    <script type="text/javascript">
    	var o=document.getElementById('box');

    	//隐藏
    	document.getElementById('btn-hide').addEventListener('click',function(){
    		o.style.display='none';
    	},false);
       
       //显示
    	document.getElementById('btn-show').addEventListener('click',function(){
    		o.style.display='block';
    	},false);


    //切换
   document.getElementById('btn-toggle').addEventListener('click',function(){
    var dis=window.getComputedStyle(o,null).display;//盒子的属性付给了display
    		if(dis=='block'){
    			o.style.display='none';
    		}else{
    			o.style.display='block';
    		}
    	},false);


    </script>
</body>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值