JavaScript--事件延展

事件冒泡

在点击div里面的按钮时 会触发div的点击事件 事件冒上去了

在触发事件的时候 会一层一层向上冒 （他同时会触发父类的事件）

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

代码验证：
 

<div id="box">
    <button id="btn">按钮1</button>
</div>
var box = document.getElementById('box')
var btn = document.getElementById('btn')
box.onclick = function() {
    console.log('大盒子被点击了');
}
btn.onclick = function(e) {
    e = e || window.event //得到事件源对象
        //阻止事件向上冒泡  e.stopProagation(); 这个方法可以阻止事件冒泡 且他遵从w3c规则       （兼容各大浏览器  除ie9之前不兼容）
    e.stopPropagation();
    //ie浏览器的阻止事件冒泡   利用了一个属性 canceBulle 设置为true 他也兼容各大浏览器       （不遵从w3c规则   未来这个属性可能没用）
    e.canceBulle = true // 取消冒泡  不建议写这种
        //建议的写法
    if (e.stopPropagation()) { //如果浏览器可以使用
        e.stopPropagation() //就用这个
    } else {
        e.canceBulle = true //如果不能使用就用这个
    }
    console.log('按钮被点击了');
}

事件默认行为

document.getElementsByTagName('a')[0].onclick = function(e) {
    console.log('点击了');
    //return false 阻止默认行为 遵从w3c 但是ie9浏览器 及之前的不支持 （常用方法）
    return false
        //ie浏览器 兼容  其他浏览器也可以使用
    e.preventDefault() //阻止默认事件
        //针对低版本浏览器
    e.returnValue = false
}

获取样式的兼容

<div id="box">11</div>
代码验证：
var box = document.getElementById('box');
//获取样式  getComputedStyle获取样式  支持ie9及其他浏览器  参数1为element 参数为string可省略
var boxstyle = window.getComputedStyle(box);
// 样式对象  里面的属性 获取字体样式
console.log(boxstyle.color);
//ie8以前的浏览器  currentStyle 获取样式
var style = box.cuurentStyle
console.log(style);
//常用方式 解决兼容
if (window.getComputedStyle) {
style = window.getComputedStyle(box, null) //支持ie9+及非ie浏览器
    } else {
style = box.cuurentStyle; //ie8及以前
}
//使用三元运算符
var style = window.getComputedStyle ? window.getComputedStyle(box) : box.cuurentStyle
//使用style属性 只能获取style属性内部的内容 （只能获取内嵌的样式） 是不能获取对应的内联样式的
//js 的style属性只能操作内嵌的
//getComputedStyle 方法是可以获取对应的设置所有样式

offset家族

<div class="box">
	<div class="innerBox">
   	 	<div class="smallBox"></div>
	</div>
</div>
关于elenment元素的offfset家族 偏移
// 偏移的父元素
var smallBox = document.querySelector('.smallBox')
//在没有给innnerBox 加定位之前获取的是body
//在给innerBox 加了定位之后狗获取的是innerBox
//是获取偏移量的父元素 上级元素谁家了定位我就找谁  都没有加找body offsetParent有奶就是娘（谁加了定位就找谁）
//offsetParent不会找自己 找离自己近的且加了定位的
console.log(smallBox.offsetParent);
//获取自己的偏移量  基于offsetPatent 离左边的距离和里上面的距离
console.log(smallBox.offsetLeft); //获取元素的左偏移量
console.log(smallBox.osssetTOP); //获取元素的上偏移量
//获取自己的 width 和 height
console.log(smallBox.offsetWidth);
console.log(smallBox.offsetHeight);

事件监听

<div>
123
</div>
<button onclick="remove()">移除div事件监听</button>
事件监听 事件监听是对应的一个事件监听器给到对应的元素，我们可以通过添加事件监听器给到某个元素 来给他绑定事件
var div = document.getElementsByTagName('div')[0]
//常用方式
//div.onclick = function(){
//    console.log('hello');
// }
//添加事件监听 参数1为事件名 参数2为对应执行的方法
var fn = function() {
console.log('hello world');
}
div.addEventListener('click', fn)
//function是对象 引用数据类型 function 声明一个函数 上面的是一个函数对象 下面的又是一个函数对象
//这两个对象并不相等 这个是独立的两个对象  直接在里面写function 是没有办法移除的
function remove() {
//移除事件监听 参数1为事件名 参数2  执行的方法
div.removeEventListener('click', fn)
}
//关于浏览器兼容问题 针对ie8一下的浏览器
//box.attachEvent('onclick',fn)  //添加事件
//box.detachEvent('onclick',fn)  //移除事件
//完整兼容写法
//添加的写法
// if(box.addEventListener){
//     //事件是否捕捉 默认为false 为事件冒泡
//     box.addEventListener('click',fn,false)
// }else{
//     box.attachEvent("onclick", fn);
// }
function addEvent(element, type, fn) {
if (element.addEventListener) {
//事件是否捕捉  默认为false 为事件冒泡
element.addEventListener(type, fn, false)
} else {
element.attachEvent('on' + type), fn
}
}
//移除的写法
// if(box.removeEventListener){
//     //事件是否捕捉 默认为false 为事件冒泡
//     box.removeEventListener('click',fn)
// }else{
//     box.detachEvent("onclick", fn);
// }
function removeEvent(element, type, fn) {
if (element.addEventListener) {
//事件是否捕捉 默认为false 为事件冒泡
element.addEventListener(type, fn, false)
	} else {
element.attachEvent("on" + type, fn);
	}
}

事件委托

事件委托机制就是将自己要加的事件加给父元素（当子元素很多的时候）

<ul id="box">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
代码验证：
//点击li打印里面的值 给li添加点击事件
//利用事件委托机制我给ul添加
var box = document.getElementById('box')
box.onclick = function(e) {
    //通过e.target 找打你点击的目标元素  来进行操作
    console.log(e.target.innerText); //目标元素
    initial()
    e.target.style.backgroundColor = 'red'
}

function init() {
    var lis = box.children
    for (var i = 0; i < box.childElementCount; i++) {
        lis[i].style.backgroundColor = ''
    }
}