阻止事件冒泡

<div id="one" onclick="alert('我是最外层');"> 
        <div id="two" onclick="alert('我是中间层');">
            <a id="hr_three" href="http://www.baidu.com" onclick="alert('我是最里层');">点击我</a> 
        </div>
</div>
1.event.stopPropagation(); 
事件处理过程中,阻止了事件冒泡,但不会阻止默认行为(它就执行了超链接的跳转) 
2.return false; 
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) 
还有一种有冒泡有关的: 
3.event.preventDefault(); 
如果把它放在头部A标签的click事件中,点击“点击我”。 
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度 
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

4.this和event.target的区别:
js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
this和event.target的相同点:
this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(e.target); 

e.target与e.currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获、处于目标阶段和冒泡阶段。只有当他们同时处于目标阶段的时候他们的指向才是一样的。在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this、currentTarget和target包含相同的值
参考博客:http://www.cnblogs.com/super-d2/archive/2012/06/11/2545180.html  http://zccst.iteye.com/blog/2081412
 
5.js事件处理的兼容性函数:
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;
    }
  },
  getEvent: function(event){
    return event ? event : window.event;
  },
  getTarget: function(event){
    return event.target || event.srcElement;
  },
  preventDefault: function(event){
    if (event.preventDefault){
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  stopPropagation: function(event){
    if (event.stopPropagation){
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
};
原文地址:https://www.cnblogs.com/gyx19930120/p/4419865.html