事件冒泡/阻止默认行为/拖拽/获取样式/事件监听/事件委托

事件冒泡

在触发事件时候 会一层一层向上冒泡 (他会同时触发父类的事件)

阻止事件冒泡 意思就是组织事件的向上传递

btn.onclick = function(e){
    //得到事件源对象
    e = e || window.event
    //阻止事件向上冒泡 stopPropagtion这个方法可以阻止事件冒泡 且他遵从w3c规则 (兼容各大浏览器 ie9之前不兼容)
    //e.cancelBubble = true //取消冒泡 不建议写这种
    //建议的写法
    if(e.stopPropagation){ //如果浏览器可以使用
        e.stopPropagation()//就使用这个
    }else{
        e.cancelBubble = true //如果不能使用就使用这个
    }
}

阻止默认行为

<a href = 'http://www.biadu.com'>a标签</a>
//a 标签默认会跳转页面
document.getElementsByName('a')[0].onclick = function(e){
    console.log('点击了');
    //return false 阻止默认行为 遵从w3c但是ie9浏览器之前不支持(常用的)
    //return false
    //ie浏览器 兼容 其他浏览器也可以使用
    //e.preventDefault() //阻止默认事件
    //针对低版本浏览器
    e.returnValue = false
  
}
    
}

阻止右键出现菜单

document.oncontextmenu = function(e){
    //return false 后面的内容不会执行 return false一般放在最后一句
    //如果第一个可以用就用第一个 不可以使用第二个
    e.preventDefault?e.preventDefault():e.returnValue = false
}

关于element元素的offset家族 偏移

// 偏移的父元素
         var smallBox = document.querySelector('.smallBox')
         //在没有给innerBox加定位之前获取的是body
         //在给innerBox加了定位之后获取的是innerBox
         //是获取偏移的父元素 上级元素谁加了定位我就找谁 都没有加找body  offsetParent有奶便是娘（谁加了定位我就找谁）
         //offsetParent不会找自己 找离自己近的且加了定位的
         console.log(smal