冒泡和捕获

来源：互联网发布：价格水平知乎编辑：程序博客网时间：2024/05/28 09:31

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>div {    background-color: coral;    border: 1px solid;    padding: 50px;}</style></head><body><p>该实例演示了在添加事件监听时冒泡与捕获阶段的不同。</p><div id="myDiv"><p id="myP">点击该段落， 我是冒泡</p></div><br><div id="myDiv2"><p id="myP2">点击该段落， 我是捕获</p></div><script>document.getElementById("myP").addEventListener("click", function() {    alert("你点击了 P 元素!");}, false);document.getElementById("myDiv").addEventListener("click", function(){    alert("你点击了 DIV 元素!");}, false);document.getElementById("myP2").addEventListener("click", function() {    alert("你点击了 P 元素!");}, true);document.getElementById("myDiv2").addEventListener("click", function() {    alert("你点击了 DIV 元素!");}, true);</script></body></html>

冒泡和捕获区别

冒泡是从内到外的 --- 捕获是从外到内的

addEventListener（type,函数名，事件监听方式true或者false）; //type不加on

冒泡是false 捕获是true

element.attachEvent('on'+type,函数名); //type加on

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。

兼容IE和非IE浏览器事件绑定的代码：

function addEvent(obj,type,handle){  try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本    obj.addEventListener(type,handle,false);  }catch(e){    try{ // IE8.0及其以下版本      obj.attachEvent('on' + type,handle);    }catch(e){ // 早期浏览器      obj['on' + type] = handle;    }  }}

阅读全文

0 0