w3c事件

最新推荐文章于 2023-02-02 09:09:53 发布

小欣的blogs

最新推荐文章于 2023-02-02 09:09:53 发布

阅读量859

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/cedricdx/article/details/89341410

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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>