事件！！！

事件 ：

1.移动事件

2.点击事件

3.覆盖时间

4.键盘事件

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

1. ele.onxxx = function(event){}
   兼容性好，但是一个元素的同一个事件上只有一个
   基本等同于写在Html行间上`在这里插入代码片
2. obj.addEnventListener(type,fn,false);【w3c标准的】【能给一个对象绑定一个事件的多个处理函数】
   IE9以下不兼容，可以为一个事件绑定多个处理事件
3. obj.attachEvent(‘on’+type,fn)【ie9独用，能给一个对象绑定一个事件的多个处理函数，并且一个对象的一个事件绑定同一个函数多次他都能执行】
   就是一个事件同样可以绑定多个处理程序
4. ele.onxxx = function(event){} [程序this指向dom元素本身]
   . obj.addEventListener(type,fn,false); [程序this指向dom元素本身]
5. 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
		  }
	   }
    }

解除事件处理程序：

1. ele.onclick = false/’’/null;
2. ele.removeEventListener(type,fn,false);
3. ele.detachEvent(‘on’+type,fn);
   注：若绑定匿名函数，则无法解除

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

1. 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）
   事件捕获：
2. 结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自父元素捕获至子元素（事件源元素）（自顶向上）
   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;
		      }
    }

阻止默认事件：

1. 默认事件-表单提交，a标签跳转，右键菜单等
2. Return false;以对象属性的方式注册的事件才生效
3. Event.preventDefault();w3c标注，IE9以下不兼容
4. Event.returnValue = false;兼容ie
5. 封装阻止默认事件的函数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);
	  }

本文地址：https://blog.csdn.net/qq_48846376/article/details/107376444