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级不会
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表示阻止事件的默认行为