js 绑定事件，冒泡事件，默认事件

本文主要是介绍js 绑定事件，冒泡事件，默认事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

addEventListener

定义：addEventListener() 方法用于向指定元素添加事件句柄。

element.addEventListener(event, function, useCapture)
/**useCapture:1.可选。布尔值，指定事件是否在捕获或冒泡阶段执行。2.true - 事件句柄在捕获阶段执行3.false- 默认。事件句柄在冒泡阶段执行
*/// eg:
<input type="button" id="c3" value="点击" onclick="alert(3)">
document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);

默认事件: event.preventDefault()

<a href="http://www.baidu.com" target="_black">百度</a>

1.在没有阻止默认事件前，点击后直接跳转百度。
2.阻止默认事件后，a标签点击无效：

var aDom= document.getElementByTagName("a");
aDom.addEventListener("click", function(e){e.preventDefault()}, false);

冒泡事件:

1.定义

事件按照从最特定的事件目标到最不特定事件目标顺序逐一触发

2.阻止冒泡事件

event.preventDefault( ); 阻止通过 addEventListener( ) 添加的事件的默认事件

element.addEventListener("click", function(e){var event = e || window.event;event.preventDefault( ); //阻止默认事件
},false);

return false; 阻止独享属性（通过on这种方式）绑定的事件的默认事件

element.onclick = function() {return false; //通过返回false值阻止默认事件行为
};

event.returnValue = false; 阻止通过 attachEvent( ) 添加的事件的默认事件

element.attachEvent("onclick", function(e){var event = e || window.event;event.returnValue = false; //阻止默认事件
},false);

3.举例

看如下html源码，每一个元素都添加了点击事件，在没有任何处理之前，点击 button 按钮，从按钮id C3 > c2 > c1,逐级网上出发，相应输出：3,2,1，这就是冒泡事件现象

<!-- 源码2.1 -->
<div id="c1" onclick="alert(1)"><div id="c2" onlick="alert(2)"><input id="c3" type="button" value="点击" onclick="alert(3)"></div>
</div>

点击button时：
1.没添加任何处理之前，先后会弹出 3,2,1
2.添加阻止冒泡事件处理后，只会弹出 3；

// 添加阻止冒泡事件
document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},true);

扩展：捕获事件和冒泡事件，更好是一个相反的过程；
定义：从不精确的对象到最精准的对象。这种事件也称作自顶向下事件模型，因为它是从DOM层次的顶端开始向下延伸的。
注意：IE浏览器不支持这种类型事件，我们只需要了解即可。

绑定元素事件，兼容性写法：

// 事件绑定
function addEvent(element, eType, handle, bol) {if(element.addEventListener){           //如果支持addEventListenerelement.addEventListener(eType, handle, bol);}else if(element.attachEvent){          //如果支持attachEventelement.attachEvent("on"+eType, handle);}else{                                  //否则使用兼容的onclick绑定element["on"+eType] = handle;}
}// 事件解绑
function removeEvent(element, eType, handle, bol) {if(element.addEventListener){element.removeEventListener(eType, handle, bol);}else if(element.attachEvent){element.detachEvent("on"+eType, handle);}else{element["on"+eType] = null;}
}