简单了解事件冒泡和阻止事件冒泡

1.什么叫事件冒泡？

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

2.阻止事件冒泡 意思就是阻止事件向上传递

第一种ie浏览器的阻止事件冒泡 利用了一种属性cancelBubble 设置为true 他也兼容各大浏览器 （不遵守w3c规范 未来这个属性要淘汰） 代码e.cancelBubble = true (强调不建议使用)

第二种stopPropagation这个方法可以阻止事件冒泡 且他遵守w3c规则 （兼容各大浏览器 ie9之前不兼容）

建议写法

if(e.stopropagation()){

    e.stopropagation()

}else{
e.cancelBubble = true}

​

3.阻止默认行为

什么叫阻止默认行为？比如a标签是跳转页面 当我们点击a标签时没有跳转

return false阻止默认行为 尊从w3c但是ie9浏览器之前不支持（常用的）

e.preventDefault() ie浏览器 兼容 其他浏览器也可以使用

针对低版本浏览器   e.returnValue = false

4.offset家族

offset家族1偏移

offsetParent 是获取偏移的父元素 上级元素谁加了定位我就找谁 都没有加找body（简单点就是谁加了定位就找谁） 但是不会找自己 只会找离自己近的且加了定位的

获取自己的偏移量 基于offsetParrent 离左边的距离和离上面的距离

比如  console.log(box.offsetLeft)      console.log(box.offsetTop) 

获取自己的width和 height

比如   console.log(box.offsetWidth)     console.log(box.offsetHeight)

5.拖拽

鼠标按下去  然后移动  就会跟着动  鼠标松开不动了

注意: 
onmousedown触发事件的对象:目标元素（即要拖拽的元素);

onmousemove触发事件的对象: document

onmouseup触发事件的对象：document

onmousemove和onmouseup触发事件的对象都是document，t意味着鼠标在网页的任意位置移动鼠标或松开鼠标都会触发对应的事件

6.获取样式的兼容

1.获取样式 getComputedStyle  支持ie9及其他浏览器

var box = document.getElementById("box")
var boxstyle = window.getComputedStyle(box)

2.获取样式currentStyle  ie8以前的浏览器

var box = document.getElementById("box")
var style = box.currentStyle
console.log(style)

3.常用方式  解决兼容

var box = document.getElementById("box")
if(window.getComputedStyle){
    style = window.getComputedStyle(box,null);
}else{
    style = box.currentStyle 
}

4.使用三元运算符 

var box = document.getElementById("box")
var style = window.getComputedStyle?window.getComputedStyle(box):box.currentStyle

 使用style属性  只能获取style属性内部的内容(只能获取内嵌的样式)是不能获取对应的内联样式的

getComputedStyle方法是可以获取对应的设置所以样式

7.事件监听   addEventListener

事件监听是对应的一个事件监听器给到对应的元素  我们可以通过添加事件监听器给到某个元素  来给他绑定事件

添加事件监听   参数1为事件名   参数2为对应执行的方法

var fn = function(){
    console.log('hello world');
}
div.addEventListener('click',fn)

function是对象  引用数据类型 function申明一个函数  上面的是一个函数对象  下面的又是一个函数对象

这2个对象并不相等  这个是独立的2个对象   直接在里面写function是没有办法移除的

移除事件监听  参数1为事件名  参数2为执行的方法

var div = document.getElementsByTagName('div') [0]
function remove(){
    div.removeEventListener('click',fn)
}

关于浏览器兼容问题  针对ie8以下的浏览器

box.attachEvent('onclick',fn)  添加事件

box.detachEvent('onclick',fn)  添加事件

完美兼容写法

添加写法

if(box.addEventListener){
    box.addEventListener('click',fn,false)
}else{
    box.attachEvent('onclick',fn)
}

删除写法

if(box.removeEventListener){
    box.addEventListener('click',fn,false)
}else{
    box.attachEvent('onclick',fn)
}

封装为方法

function addEvent(element,type,fn){
    if(box.addEventListener){
    box.addEventListener(type,fn,false)
}else{
    box.attachEvent('on'+type,fn)
}
}

8.事件委托

事件委托就是将自己要加的事件加给父元素(当子元素很多的时候)

通过e.target找到你点击的目标元素来操作