学习笔记——事件处理程序（HTML事件处理、DOM0、DOM2）

HTML事件处理程序

        HTML元素使用类似onclick事件，叫做HTML事件。<input type = "button" onclick = "function(){}">

        HTML事件的缺点是HTML元素与JS事件紧密耦合，一改动就需要改动两个地方。

DOM0事件处理程序

        较为传统的方法，也是使用得比较多的方法：在JS中给节点添加函数。  btn.onclick = function(){}

        优点：简单，有跨浏览器优势

                需要删除DOM0事件：btn.onclick = null;

DOM2事件处理程序
        DOM2事件定义了两个方法，用于处理指定和删除事件处理程序的操作
                addEventListener()和removeEventListener()，注意这里的事件不加on，
                        即addEventListener('click',showMes,false);  //showMes是一个函数名
                接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值
                true表示为事件捕获，false表示为事件冒泡
                事件冒泡兼容大多数浏览器，故大多数情况使用的都是false。

DOM0级和DOM2级共同的特点：都可以同时添加多个事件处理程序
        但是，DOM0级事件可能会发生后面的事件覆盖前一个事件的情况，而DOM2级不会

IE事件处理程序
        attachEvent()添加事件            attachEvent('onclick',showMes);这里需要加上on
        detachEvent()删除事件
        接收相同的两个参数：事件处理程序的名称和事件处理程序的函数
        不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡

DOM2事件处理程序在IE中无法被识别，需要使用IE事件处理程序。这里就需要用到跨浏览器解决方案：

        这里封装了一个函数，使用能力检测。有这个能力则使用这个能力，先从是否有DOM2级的addEventListener与removeEventListener方法检测起，再到IE的attachEvent与detachEvent方法，最后到DOM0级的on + 事件

var eventUtil = {
	addHandler: function(element, type, handler){
		if(element.addEventListener){
			element.addEventListener(type, handler, false); //冒泡阶段
		}else if(element.attachEvent){
			element.attachEvent('on'+type, handler);
		}else{
			element['on'+type] = handler;
		}
	},
	removeHandler: function(element, type, handler){
		if(element.removeEventListener){
			element.removeEventListener(type, handler, false); //冒泡阶段
		}else if(element.detachEvent){
			element.detachEvent('on'+type, handler);
		}else{
			element['on'+type] = null;
		}
	}
}

后面提两个事件对象event，用于阻止事件冒泡和阻止事件的默认行为：

        DOM中的stopPropagation()方法，与preventDefault()方法

        stopPropagation()方法 用于阻止事件冒泡

        preventDefault()方法    用于阻止事件的默认行为（如阻止a的链接跳转）

        IE中cancelBubble属性，与returnValue属性（IE中这两个是属性不是方法，都为布尔值）

        cancelBubble属性 用于阻止事件冒泡

                设置为true表示阻止冒泡 设置为false表示不阻止冒泡

        returnValue属性 用于阻止事件的默认行为

                设置为false表示阻止事件的默认行为