事件！！！_HTML_移动技术网

事件！！！

事件：
1.移动事件
2.点击事件
3.覆盖时间
4.键盘事件

绑定事件：
on.xx绑定事件—句柄

ele.onxxx = function(event){}
兼容性好，但是一个元素的同一个事件上只有一个
基本等同于写在Html行间上`在这里插入代码片

obj.addEnventListener(type,fn,false);【w3c标准的】【能给一个对象绑定一个事件的多个处理函数】
IE9以下不兼容，可以为一个事件绑定多个处理事件

obj.attachEvent(‘on’+type,fn)【ie9独用，能给一个对象绑定一个事件的多个处理函数，并且一个对象的一个事件绑定同一个函数多次他都能执行】
就是一个事件同样可以绑定多个处理程序

ele.onxxx = function(event){} [程序this指向dom元素本身]
. obj.addEventListener(type,fn,false); [程序this指向dom元素本身]

obj.attachEvent(‘on’,+type,fn); [程序this指向window]

封装兼容性addEvent(elem,type,handle);方法:

//Eg-code:
	Function addEvent(elem,type,handle){
		If(elem.adddEventListener){
			Elem. adddEventListener(type,handle,false);
		}else if(elem.attachEvent){
			Elem.attachEvent(‘on’+type,function(){
			Handle.call(elem);
			})
		}else{
			Elem[‘on’+type] =handle
		  }
	   }
    }

解除事件处理程序：

ele.onclick = false/’’/null;

ele.removeEventListener(type,fn,false);

ele.detachEvent(‘on’+type,fn);
注：若绑定匿名函数，则无法解除

事件处理模型-事件冒泡（false）、捕获(true)：
事件冒泡：

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）
事件捕获：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自父元素捕获至子元素（事件源元素）（自顶向上）
IE，没有捕获事件
触发顺序,先捕获，后冒泡
Focus、blur、change、submit、reset、select等事件不冒泡
取消冒泡：
1. w3c标准event.stopPropagation();但不支持ie9以下版本
2. ie独有event.cancelBubble = true
3. 封装取消冒泡的函数stopBubble(event)

	Function stopBubble(event){
			If(event.stopPropagation){
			Event.stopPropagation();
			}
			  else{
				event.cancelBubble =true;
		      }
    }

阻止默认事件：

默认事件-表单提交，a标签跳转，右键菜单等
Return false;以对象属性的方式注册的事件才生效
Event.preventDefault();w3c标注，IE9以下不兼容
Event.returnValue = false;兼容ie
封装阻止默认事件的函数cancelHandler（event）;【void(false):取消默认事件----==return false】

	Function  cancelHandler (event){
		If(e.preventDefault){
			e.preventDefault();
		} else{
			e.returnValue = false;
		  }
	}

事件对象：
Envent ||window.event用于IE
事件源对象：
Event.target 火狐只有这个
Event.srcElement ie只有这个
这俩chrome都有
兼容写法
事件委托机智：【简便，效率高】

//Eg-code：
	var ul = document.getElementsByTagName('ul')[0];
		ul.onclick = function(e){
  		  var event = e || window.event;
   		  var target = event.target || event.srcElement;
   		  console.log(target.innerText);
	  }