事件流 事件监听 (03)

事件流

从页面接受事件的顺序, 分为 捕获与冒泡

• 1冒泡 从内往外 (事件的传递)
• 2捕获 从外往内 (body是外)

事件流的三个阶段

冒泡阶段-->目标阶段-->捕获

阻止默认行为

(那些会有默认行为eg: a标签,跳转的默认行为 from默认提交,默认重置行为)

 var e = evt || window.event;
 if (e.preventDefault) {
 e.preventDefault();//googel
 } else {
 e.returnValue = false;//ie
 }

列子:

 <!-- 方式一 -->
    <!-- <a href="https://www.baidu.com/" onclick="return false">去百度</a> -->
    <a href="https://www.baidu.com/">去百度</a>
    <script>
        var oA=document.querySelector("a");
       //方式二:
        // oA.onclick=function(){
        //     return false
        // }

    //方式三
      oA.onclick=function(evt){
            var e=evt||window.event;
            if(e.preventDefault){
                e.preventDefault()
            }else{
                e.returnValue=false;
            }
        }
    </script>

停止事件冒泡(兼容写法)

var e = evt || window.event;
 if (e.stopPropagation) {
  e.stopPropagation();//googel  重点
 } else {
e.cancelBubble = true;//ie
 }

捕获

添加事件监听与移除事件监听

addEventListener("事件类型","函数",true) 捕获

• 1.第3个参数如果是一个boolean值,true捕获,fasle冒泡, 默认冒泡
• 2.第3个参数可以是一个对象 {capture:true,once:true} once点击一次

removeEventListener("事件类型","函数",true)

addEventListener和removeEventListener 默认是冒泡机制

注:

• 1. addEventListener和removeEventListener 它操作的函数必须是同一个
• 2.如果添加的是捕获,移除也要是捕获,添加的是冒泡,移除也要是冒泡

事件监听的兼容写法:

oEle:给谁添加事件 node
type:事件类型
callback:回调函数
capture:是否捕获

function addEvent(oEle, type, callback, capture) {
  if (oEle.addEventListener) {
       oEle.addEventListener(type, callback, capture)
   } else {
        //ie
      oEle.attachEvent("on" + type, callback);
  }
 }
//移除事件监听
 function removeEvent(oEle, type, callback, capture) {
   if (oEle.removeEventListener) {
      oEle.removeEventListener(type, callback, capture)
} else {
   oEle.detachEvent("on" + type, callback);
   }
}

offset三大家族

offsetParent 找到带有定位的 父元素,如果父级们都没有,就默认到body
offsetLeft,offsetTop 到带有定位父元素的 距离,如果父级们都没有,就默认到body的距离
offsetHeight,offsetWidth 获取自身元素的高= 高+boder+padding