02JavaScript事件——事件流、事件绑定类型、跨浏览器事件处理程序、阻止事件冒泡/默认事件

本文链接：https://blog.csdn.net/weixin_39672936/article/details/82595465

事件流

事件流就是页面中的事件的触发顺序，IE提出了事件冒泡，网景提出了事件捕获

事件冒泡：即事件由子元素向祖先元素传播，在所有的浏览器中，几乎所有都支持事件冒泡，事件的触发由最确定的元素向父级逐级传播，一直传到html

事件捕获：和冒泡完全相反，由祖先向子元素传播，IE浏览器中不存在事件捕获，事件的触发由html开始向子级逐级传播

DOM0级事件处理程序，默认都支持事件冒泡

例：

	document.documentElement.onclick=function(){
		alert("html");
	}
	document.body.onclick=function(){
		alert("body");
	}
	red.onclick=function(){
		alert("red");
	}
	yellow.onclick=function(){
		alert("yellow");
	}
	green.onclick=function(){
		alert("green");
	}

事件绑定类型

1、HTML指定：在标签的行间绑定样式，默认支持事件冒泡
2、DOM0级：常说的普通事件，如类似onclick等，DOM0级默认支持冒泡，注意！同时绑定多个相同事件，只有最后一个生效,其他被覆盖
3、DOM2级：又称为添加事件监听，存在兼容性问题，DOM2级可以为一个元素绑定多个类型相同的事件，事件会按照绑定顺序触发，并不会发生覆盖

非IE和IE9+：

addEventListener()添加事件

   参数1：字符串，事件类型，注意没有on
   参数2：函数，表示事件触发执行的函数
   参数3：可选参数，布尔值，用来控制事件流的类型，true表示事件捕获，false表示事件冒泡，默认false

ipt.addEventListener("click",c,false);
function c(){alert("触发点击！")}

removeEventListener()删除事件，参数和添加一样

注意：
       1、第一个参数的值必须和添时一样
       2、第二个参数，如果添加时是匿名函数，事件无法删除，如果要删除，添加时第二个参数需要一个已经声明好的函数的函数名
       3、第三个参数的值必须和添加时一致

ipt.removeEventListener("click",c,false)

IE 8及8以下:

attachEvent()添加事件

参数1：字符串，表示事件类型，注意有on
参数2 ：表示事件执行的函数

detachEvent()删除事件，参数与添加时相同

跨浏览器事件处理程序

参数1，表示绑定事件的元素
2、绑定事件类型的字符串
3、事件执行函数
4、布尔值，用来控制添加还是删除，true表示添加，false表示删除

	function eventHandle(ele,type,func,bol){
		// 1、先判断添加还是删除
		if(bol){
			// 添加事件
			if(ele.addEventListener){
				ele.addEventListener(type,func);
			}else if(ele.attachEvent){
				ele.attachEvent("on"+type,func);
			}else{
				ele["on"+type]=func;
			}
		}else{
			// 删除事件
			if(ele.removeEventListener){
				ele.removeEventListener(type,func);
			}else if(ele.detachEvent){
				ele.detachEvent("on"+type,func);
			}else{
				ele["on"+type]=null;
			}
		}
	}