js常用绑定事件三种类型详解

JS与HTML的交互都是通过事件来完成的
            在JS中，所有的事件都需要加on前缀    on-事件名

            事件分为三类：
                1.传统事件绑定
                2.脚本模型
                3.W3C事件

            事件三要素：
                1.事件对象(事件的触发者、绑定对象)
                2.事件名称
                3.事件处理函数

注意：事件需要触发，才能执行

        click：单击
        dblclick：双击
        mousedown：鼠标按下
        mouseup：鼠标抬起
        mouseover：鼠标悬浮
        mouseout：鼠标离开
        mousemove：鼠标移动
        mouseenter：鼠标进入
        mouseleave：鼠标离开

一）传统事件绑定

将事件以属性的形式添加到HTML元素标签中
            优点：简单、易用
            缺点：将js代码插入到了HTML中，不利于多人协作开发

<div onclick="setContent(this)" onmousemove="enter(this)" onmouseout="out(this)"></div>
	<script type="text/javascript">
	//this指当前对象
		//点击div时，在内部显示hello world
		function setContent(obj){
			// console.log(obj);
			obj.style.background='red';
			obj.innerHTML='hello world';
		}

		//鼠标经过div时，背景色改为蓝色
		function enter(obj){
			obj.style.backgroundColor='blue';
		}

		function out(obj){
			obj.style.backgroundColor='red';
		}

二）脚本模型
            脚本模型：在JS里完成事件的绑定

            节点对象.on-事件名称=事件处理函数

例1：

<button id="btn">点我</button>
	<script type="text/javascript">
		var b=document.getElementById('btn');
		b.onclick=function(){
			alert('run');
		};

		//添加鼠标事件
		b.onmouseover=function(){
			// this.style.background='red';
			// console.log(this);
			this.style.background='green';
		};
	</script>

例2：

<button id="btn-show">显示</button><button id="btn-hide">隐藏</button>
	<button id="btn">切换</button>
	<div id="box"></div>
	<script type="text/javascript">
		var btn1=document.getElementById('btn-show');
		var btn2=document.getElementById('btn-hide');
		var btn3=document.getElementById('btn');
		var o=document.getElementById('box');

		btn1.onclick=function(){
			o.style.display="block";
		};//事件需要触发，才能执行

		btn2.onclick=function(){
			o.style.display='none';
		};

		btn3.onclick=function(){
			var dis=window.getComputedStyle(o,null).display;
			// console.log(dis);
			if(dis=='block'){
				o.style.display='none';
			}else{
				o.style.display='block';
			}
		};
	</script>

三）W3C事件
                用函数实现事件的绑定
                addEventListener(事件名称,事件处理函数，false)                  添加事件
                removeEventListener(事件名称,事件处理函数，false)            移除事件

例：

<button id="btn">点我</button>
	<button id="btn-remove">移除按钮一的事件</button>
	<script type="text/javascript">
		var btn=document.getElementById('btn');
		var btnRemove=document.getElementById('btn-remove');
		//添加事件
		btn.addEventListener('click',function(){
			alert('hello');
		},false);

		/*btn.addEventListener('mouseover',function(){
			console.log('over');
		},false);*/
		btn.addEventListener('mouseover',show,false);

		//添加移除按钮一的事件
		btnRemove.addEventListener('click',function(){
			//移除按钮一的mouseover事件
			/*btn.removeEventListener('mouseover',function(){
				console.log('over');
			},false);*/
			btn.removeEventListener('mouseover',show,false);
		},false);