JavaScript学习的第十二天

事件冒泡

点击标签里面的按钮时，会触发标签的点击事件，事件往上传递了

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

阻止事件冒泡

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

stopPropagation

stopPropagation方法，可以阻止事件冒泡，且他遵从W

3C的规范（兼容各大浏览器 ie9之前不兼容）

e.stopPagation()

e.cancelBubble

ie浏览器的阻止事件冒泡 利用了一个属性 cancelBubble 设置为true 他也兼容各大浏览器（不遵从w3c规范 未来这个属性可能没有用）

e.cancelBubble = true//取消冒泡 不建议写这种 

建议的写法(三元运算符更好)

if(e.stopPropagation){ //如果浏览器可以使用
    e.stopPropagation() //就使用这个
}else{
    e.cancelBubble = true //如果不能使用就使用这个
}

默认行为

return false 阻止默认行为，遵从w3c但是ie9浏览器之前不支持

ie兼容写法，其他浏览器也可以使用

e.preventDefault() 阻止默认事件

e.preventDefault()

e.returnValue

针对低版本浏览器

e.returnValue = false

右键出现菜单 oncontextmenu的事件

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

offset 都是只读属性，不能设置

offsetParent

获取偏移的父元素 上级元素谁加了定位我就找谁，都没有加找body，都加了定位的话就近找

获取offsetLeft offsetTop

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

获取offsetWidth 和 offsetheight

获取宽高

元素.offsetWidth

元素.offsetHeight

实现拖拽

// 实现拖拽
        // 鼠标按下去 然后移动 就会跟着动 鼠标松开不动了 
        // 鼠标按下 onmousedown  鼠标移动 onmousemove  鼠标松开 onmouseup
        // offset家族的内容 只能读取不能设置
        var box = document.getElementById('box')
        box.onmousedown = function(){
            box.onmousemove = function(e){
                e = e || window.event
                //获取鼠标的位置
                var mouseX = e.pageX
                var mouseY = e.pageY
                //中心点要减去的宽高
                var w = box.offsetWidth/2
                var h = box.offsetHeight/2
                //定位设置left值以及top值
                var left = mouseX - w //鼠标坐标-原本的宽度的一半 //在内部的坐标
                var top = mouseY - h
                this.style.left = left+'px'
                this.style.top = top+'px'
            }
        }
        //鼠标弹起事件
        box.onmouseup = function(){
            box.onmousemove = function(){

            }
        }

获取样式的兼容

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

js的style属性只能操作内嵌的

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

getComputedStyle

getComputedStyle 获取样式支持ie9及其他浏览器 参数1为element 参数为string 可省略

window.getComputedStyle(元素)

样式对象 里面的属性 获取字体样式

window.getComputedStyle(元素).color

currentStyle

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

元素.currentStyle

常用方式 解决兼容

if (window.getComputedStyle) {
            style = window.getComputedStyle(box, null);    //支持IE9+及非IE浏览器
} else { 
            style = box.currentStyle;  // IE8及以前
} 

使用三元运算符

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

事件监听

    <div>
        123
    </div>
    <button onclick="remove()">移除div事件监听</button>
    <!-- 事件监听 事件监听是对应的一个事件监听器给到对应的元素 
    我们可以通过添加事件监听器给到某个元素 来给他绑定事件 -->
    <script>
        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);
            }
        }
    </script>

事件委托

<ul id="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <!-- 事件委托机制就是将自己要加的事件加给父元素（当子元素很多的时候） -->
    <script>
        // 点击li打印里面的值 给li添加点击事件
        //利用事件委托机制我给ul添加
       var box = document.getElementById('box')
       box.onclick = function(e){
           //通过e.target找到你点击的目标元素 来进行操作
         console.log(e.target.innerText);//目标元素
         init()
         e.target.style.backgroundColor = 'red'
       }
       function init(){
         var lis = box.children
         for(var i=0;i<box.childElementCount;i++){
            //  console.log(i);
             lis[i].style.backgroundColor = ''
         }
       }
    </script>