JavaScript HTML--DOM0,DOM2,DOM3事件

DOM2的事件的冒泡和捕获（addEventListener与removeEventListener）

通过javascript制定事件处理程序的传统方式。就是将一个函数赋值给一个事件处理属性。第四代web浏览器出现，至今为所有浏览器所支持。

DOM0的事件具有极好的跨浏览器优势, 会以最快的速度绑定, 如果你通过DOM2绑定要等到JS运行, DOM0不用, 因为DOM0是写在元素上面的；
   例1：var btn = document.getElementById("btn");
            btn.onclick = function(){
                alert(this.id);//this指定当前元素btn

            }

     例2：<input onclick="alert(1)" />
删除DOM0事件处理程序，只要将对应事件属性置为null即可。
btn.onclick = null;
缺点：一个事件处理程序只能对应一个处理函数。

DOM2的事件的冒泡和捕获（addEventListener与removeEventListener）

DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定，
捕获和冒泡示意图

1、addEventListener(事件类型, 回调函数, 事件机制), //事件机制：true为捕捉，false为冒泡，只能通过removeEventListener来删除，也就是说通过addEventListener添加的匿名函数将无法被删除。

2、IE中的DOM2级事件处理使用了attachEvent和detachEvent来实现。这俩个方法接受俩个相同的参数，事件处理名称和事件处理函数。IE8级更早版本只支持冒泡型事件，所以attachEvent添加的事件都会被添加到冒泡阶段。
    例如：
            var btn = document.getElementById("btn");
            btn.attachEvent("onclick",function(){
                alert(this);//此处this是window
            });

何为捕获？捕获的执行顺序？

事件捕获,当用户触发了一个事件的时候,这个事件是从DOM树的最上层（window）开始触发一直到捕获到事件源。

例子：

<html>
	<head>
		<meta charset='utf-8'>
		<style>
			#parent{width:200px;height:200px;background:red;}
			#child{width:100px;height:100px;background:#104E8B;}
		</style>
	</head>
	<body>
		<div id='parent'>
			<div id='child' class='child'></div>
		</div>
		<br/>
		
		<script>
			document.getElementById('parent').addEventListener('click',function(){
				alert("父parent事件触发"+this.id);
			},true);
			document.getElementById('child').addEventListener('click',function(){
				alert("子child事件触发"+this.id);
			},true);
		</script>
	</body>
</html>

执行结果：父parent事件触发 parent——>子child事件触发child .

先parent，然后child。事件的触发顺序由外部开始捕捉至内部，这就是事件捕捉。

何为冒泡？冒泡的执行顺序？

事件冒泡:假如用户单击了一个元素,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡。

例子：

<html>
	<head>
		<meta charset='utf-8'>
		<style>
			#parent{width:200px;height:200px;background:red;}
			#child{width:100px;height:100px;background:#104E8B;}
		</style>
	</head>
	<body>
		<div id='parent'>
			<div id='child' class='child'></div>
		</div>
		<br/>
		
		<script>
			document.getElementById('parent').addEventListener('click',function(){
				alert("父parent事件冒泡触发"+this.id);
			},false);
			document.getElementById('child').addEventListener('click',function(){
				alert("子child事件冒泡触发"+this.id);
			},false);
		</script>
	</body>
</html>

执行结果：子child事件触发child——>父parent事件触发 parent

先child，然后parent。事件的触发顺序由内部开始冒泡触发至外部，这就是事件冒泡。

关于event对象

在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数。

比如：我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到(IE暂且不谈)。

比如：想阻止浏览器的默认行为可以通过方法preventDefault()来进行阻止。

事件对象能让我们快速的找到事件源,能够定位元素在页面的坐标,同样也可以知道鼠标在元素上的坐标等等

以下是event对象的一些属性和方法：

属性	描述
altKey	返回当事件被触发时，”ALT” 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，”CTRL” 键是否被按下。
metaKey	返回当事件被触发时，”meta” 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，”SHIFT” 键是否被按下。

clientX，clientY和screenX，screenY的区别：clientX，clientY基于浏览器页面定位，screenX，screenY基于显示屏定位。

IE 属性(除了上面的鼠标/事件属性，IE 浏览器还支持下面的属性)

属性	描述
`cancelBubble`	如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
fromElement	对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。
keyCode	对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup
offsetX,offsetY	发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
`returnValue`	如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为
`srcElement`	对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement	对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。
x,y	事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

标准 Event 属性下面列出了 2 级 DOM 事件标准定义的属性。

属性和方法	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型。
`cancelable`	返回布尔值，指示事件是否可拥可取消的默认动作。
`currentTarget`	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
`target`	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
`type`	返回当前 Event 对象表示的事件的名称。
initEvent()	初始化新创建的 Event 对象的属性。
`preventDefault()`	通知浏览器不要执行与事件关联的默认动作。
`stopPropagation()`	不再派发事件。

Event对象的一些兼容性写法

获得event对象兼容性写法
event || (event = window.event);

获得target兼容型写法
event.target||event.srcElement

阻止浏览器默认行为兼容性写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
注册和删除事件方法的形式