day12 事件下

一、<!-- 事件冒泡 -->

    <div id="box">

        <button id="btn">按钮</button>

    </div>

    <script>

        var box=document.getElementById("box")

        var btn=document.getElementById("btn")

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

        // 在触发事件时 会一层一层向上冒泡（它同时会触发父类的事件）

        // 阻止事件冒泡  阻止事件向上调用

        btn.onclick=function(e){

            // 得到事件源对象

            e=e||window.event

            // 阻止事件向上冒泡  stopPropagation() 这个方法可以阻止事件冒泡  且他遵从w3c规则 （兼容各大浏览器  ie9之前不兼容）

            e.stopPropagation()

            // ie浏览器的阻止事件冒泡  利用了一个属性  cancelBubble 设置位true  他也兼容各大浏览器  但是不遵从w3c规范 未来这个属性可能没用  不建议写这种

            e.cancelBubble=true//取消事件冒泡

            // 建议写法

            if(e.stopPropagation){//如果浏览器可以使用就用这个

                e.stopPropagation()

            }else{

                e.cancelBubble=true//如果不能使用就用这个

            }

        }

    </script>

 

 

二、<!-- 阻止默认行为 -->

    <a href="http://www.baidu">a标签</a>

    <script>

        // a标签默认会跳转页面

        document.getElementsByTagName("a")[0].onclick=function(e){

            return false //阻止默认行为  遵从w3c但是ie9之前不支持

            // ie浏览器兼容  其他浏览器也可以用

            e.preventDefault()//阻止默认事件  

            // 针对低版本浏览器

            e.returnValue=false

        }

    </script>

 

三、<!-- offset家族 -->

    <div class="box">

        <div class="innerbox">

            <div class="smbox"></div>

        </div>

    </div>

    <script>

    // e.offsetX获取鼠标偏移的x坐标离对应的元素

    // 关于element元素的offset家族偏移

    //偏移的父元素

    var smbox = document.querySelector( '.smallBox ')

    //在没有给innerBox加定位之前获取的是body

    //在给innerBox加了定位之后获取的是innerBox

    //是获取偏移的父元素上级元素谁加了定位我就找谁都没有加找body offsetParent有奶便是娘（谁加了定位我就找谁)

    //offsetParent不会找自己找离自己近的且加了定位的

    console.log(smbox.offsetParent);

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

    console.log(smbox.offsetLeft)

    console.log(smbox.offsetTop);

    //获取自己的width和 height

    console.log(smbox.offsetWidth);

    console.log(smbox.offsetHeight);

    </script>

 

四、<!-- 鼠标拖拽 -->

    <div id="box"></div>

    <script>

        // 实现拖拽

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

        // 鼠标按下  onmousedown  鼠标移动  onmousemove     鼠标松开 onmouseup

        var box=document.getElementById("box")

    </script>

   

五、<!-- 获取样式的的兼容 -->

    <div id="box"></div>

    <script>

        var box=document.getElementById("box")

        // 获取样式  getComputedStyle获取样式  支持ie9及非ie

        var boxStyle=window.getComputedStyle(box)

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

        console.log(boxStyle.color);

        // ie8之前的浏览器

        var style=box.currentStyle

        console.log(style);

        // 常用方式  解决兼容

        if(window.getComputedStyle){

            style=window.getComputedStyle(box,null)

        }else{

            style=box.currentStyle

        }

        // 使用三元

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

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

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

    </script>

六、<!-- 事件监听 -->

    <div>123</div>

    <button onclick="remove()">移除事件监听</button>

    <script>

        // 事件监听是对应的一个事件监听器给到对应的元素

        // 我们可以添加事件监听器给到某个元素  来给他绑定事件

        var div=document.getElementsByTagName("div")[0]

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

        var fn=function(){

            console.log("你好");

        }

        div.addEventListener('click',fn)

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

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

       function remove(){

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

            div.removeEventListener('click',fn)

       }

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

        box.attachEvent( "onclick" , fn); //添加事件1/box.detachEvent( "onclick", fn);//移除事件

        //完整兼容写法

        //添加的写法

        if(box.addEventListener){

        //事件是否捕捉默认为false为事件冒泡

        box.addEventListener( 'click' ,fn,false)

        }else{

            box.attachEvent( "onclick", fn);

        }

        //移除的写法

        if(box.removeEventListener){

        //事件是否捕捉默认为false为事件冒泡

        box.removeEventListener( " click " ,fn)

        }else{

        box.detachEvent("onclick", 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.target 找到你点击的目标元素 来进行操作

            console.log(e.target.innerText);

        }

    </script>