day 12 事件下

一、事件

       1.事件委托

                1)定义：把当前元素的事件委托给父级执行

                 e.target:

                 兼容ie8及以下浏览器

                 var target = e.target || e.srcElement;

举例子：

1.box.onclick = function(e){

        var e = e || event;

        if(e.target.className == "menu"){

            console.log(e.target.innerHTML)

        }

    }

2.document.onclick = function(e){

        var e = e || event;

        //console.log(e.target.nodeName);

        if(e.target.nodeName == "LI"){

            console.log(e.target);

        }

    }

                2)事件委托的好处：（面试）

                   a.减少了事件绑定浏览器重绘的次数,提高了程序的执行效率(只需要把事件绑定给父级，就不要每个都绑定，只要绑定父级元素)

                   b.减少了事件处理程序执行时在内存中开避的空间，节约了资源。

                   c.可以解决动态添加的元素节点无法绑定事件的问题（比如在原来里标签后面动态的创建一个li标签，但是在遍历访问这个动态标签的相关属性时，是访问不到的。要通过事件委托，访问这个新创建的标签）

好处c的举例：

for (var i = 0; i < li.length; i++) {

        li[i].onclick = function(){

            alert(this.innerHTML)

        }

    }

    box.onclick = function(e){

        var e = e || event;

        var target = e.target || e.srcElement;

        if(e.target.nodeName.toLowerCase() == "li"){

            console.log(e.target.innerHTML);

        }

计算器案例

2.json

   1） 定义：是一种数据格式：用来与后台进行数据交互。

   2）这种数据格式可以以什么方式存在：

        a，以数组的方式存在

            [{"name":"tom","age":12,"obj":{"phone":"123"},"arr":[]},{}]

        b，以对象的方式存在

            {

                "name":"tom",

                "age":123,

                "arr":[{"a":"ll"}]

            }

3.拖拽

      三个动作

        a.鼠标按下

            onmousedown

        b.鼠标移动

            onmousemove

        c.鼠标抬起

            onmouseup

补充：

1）window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();//阻止事件对象的默认行为（这里是阻止选中文字，一般不用这个，用return false；）

2）浏览器窗口大小

window.innerWidth/innerHeight  

兼容模式：document.documentElement.clientWidth/clientHeight   

鼠标拖拽：

<script type="text/javascript">

    //拖拽就要移动

    //移动就要设置元素的left和top

    //left和top的值随着移动的变化发生变化

    var box = document.getElementById("box");

    box.onmousedown = function(e){

        var e = e || event;

        var x = e.offsetX;

        var y = e.offsetY;

        

        document.onmousemove = function(e){

            var e = e || event;

            var l = e.pageX - x;

            var t = e.pageY - y;

            

            box.style.left = l + "px";

            box.style.top = t + "px";

            

            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();//阻止事件对象的默认行为（这里是阻止选中文字，一般不用这个，用return false）

            //return false;

        }

        document.onmouseup = function(){

            document.onmousemove = null;

        }

    }

 

</script>

鼠标完美拖拽    （作边界处理）

<script type="text/javascript">

    //拖拽就要移动

    //移动就要设置元素的left和top

    //left和top的值随着移动的变化发生变化

    var box = document.getElementById("box");

    box.onmousedown = function(e){

        var e = e || event;

        var x = e.offsetX;

        var y = e.offsetY;

        

        document.onmousemove = function(e){

            var e = e || event;

            var l = e.pageX - x;

            var t = e.pageY - y;

            

            //var left = window.innerWidth//浏览器窗口大小

            var left = document.documentElement.clientWidth - 200;//浏览器窗口大小  兼容模式

            var top = document.documentElement.clientHeight - 200;

            //边界处理

            l = l < 0 ? 0 : ( l > left ? left : l);

            t = t < 0 ? 0 : ( t > top ? top : t);

            

            /*if(l < 0 ){

                l = 0;

            }else if(l>left){

                l = left;

            }

            if(t < 0){

                t = 0;

            }else if(t>top){

                t = top;

            }*/

            

            box.style.left = l + "px";

            box.style.top = t + "px";

            

            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

            //return false;

        }

        document.onmouseup = function(){

            document.onmousemove = null;

        }

    }

</script>

4.scroll家族属性

注意：要在window.onscroll事件下

  1）  scrollTop;//垂直方向 上的页面滚走的距离

       document.documentElement.scrollTop;

    scrollLeft;//水平方向 上的页面滚走的距离

        document.documentElement.scollLeft;

 

window.onscroll = function(){

        console.log(document.documentElement.scrollTop,document.body.scrollTop);

 

    2）兼容写法：document.body.scrollTop低版本的火狐谷歌浏览器

           var sTop = document.documentElement.scrollTop || document.body.scrollTop;

    补充：window.scrollTo(0,sTop);//回到顶端

  3） document.decumentElement.scrollTop = document.body.scrollTop = 300；//可读写，

案例吸顶效果

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{margin:0;padding:0}

        img{

            vertical-align: top;

        }

            .top img{

                  height:168px;

            }

        .main{

            margin:0 auto;

            width:1000px;

            margin-top:10px;

        }

            

    </style>

</head>

<body>

      <div class="top" id="top">

          <img src="images/top.png" alt=""/>

      </div>

      <div class="nav" id="Q-nav">

          <img src="images/nav.png" alt=""/>

      </div>

      <div class="main">

          <img src="images/main.png" alt=""/>

      </div>

</body>

</html>

<script src="../../public.js"></script>

<script type="text/javascript">

      var nav=document.getElementById("Q-nav")

      //要让导航栏实现吸顶效果，要把导航设置为固定定位。

      //什么情况设置？

            //在滚动条滚动到 168 高度时开始固定位置

            //当滚动条滚走的距离小于168时，恢复原来的位置

            window.onscroll=function(){

            var top=document.documentElement.scrollTop||document.body.scrollTop;

            if(top>168){

                  nav.style.position="fixed";

                  nav.style.top=0;

            }else{

                  nav.style.position="static";

            }

            }

</script>

 

5.offset家族属性

    offsetX

    offsetY

    offsetWidth;

    offsetHeight;

    clientWidth 也是元素的宽高

    clientHeight

    offsetLeft;

    offsetTop

 

   offset家族属性都是只读的

    box.style.width:只能得到行内的样式值。（在标签里设置的style样式）

    box.offsetWidth:包含边框和内边距。

    box.clientWidth:包含内边距不包括边框。（可读不可写）

    box1.offsetTop:

        a.距离窗口可视区顶部的距离，如果有父元素，则包含父元素的顶部的边框和内边距

        b.如父父元素有定位，相对于最近的这个有定位的父元素的顶部距离，不包括边框，包含内边距