Javascript学习小总结14

1.阻止默认行为（preventDefault）

    阻止默认行为方法：

    btn.onclick=function (){

        return false;

}

2.绑定事件

（我们写页面一定要样式(css)跟行为（js）分开写）

    （1）节点.事件=事件处理程序

    行内事件属性调用函数

   （2） 事件监听(三个参数)

        addEventListener(事件，回调函数事件处理程序，true/false)

            true：是捕获

            false：是冒泡（默认值）

            回调函数：封装名称“callBack”;

        语法案例：

            document.addEventListener("click"（这里不需要加on）,function（）{函数执行体}，true)；

什么是事件冒泡？

    执行过程是事件的由内到外执行；

什么是事件捕获？

    捕获的过程是由外到内执行；

true，捕获。false，冒泡。默认false。

封装好以后的调用方法

对象（ele）. addEventListener（事件（eve）没有on的  ， 回调函数  (callBack)）；

举例：

        addEvent($id("send"),"click"，function(){

        执行函数代码

})

事件冒泡：

　　什么是“事件冒泡”呢？假设这里有一杯水，水被用某种神奇的方式分成不同颜色的几层。这时，从最底层冒出了一个气泡，气泡会一层一层地上升，直到最顶层。而你不管在水的哪一层观察都可以看到并捕捉到这个气泡。好了，把“水”改成“DOM”，把“气泡”改成“事件”。这就是“事件冒泡”。

　　气泡带上了某种信息，会告诉其经过的每一层自己是在哪一层产生的。JavaScript的事件确实会带着这个属性。当程序捕获一个事件的时候，它会知道这个事件来自于页面上哪个元素。 事件委托也就是利用这个原理。

3.事件监听与传统事件绑定区别

            （1） 传统事件绑定不能有多个，后面的会覆盖前面的。

                    事件监听可以同时绑定多个同一个事件，先后触发。

            （2）传统事件绑定只有冒泡

                    事件监听除了执行冒泡还能执行捕获。

                    （同一元素既有捕获监听又有冒泡监听，那么执行顺序是先捕获后执行冒泡）

    （3）捕获和冒泡现象发生的前提条件

            父子元素都绑定了 同一个事件。        

     4.事件委托

        （事件委托优点：因为绑定事件次数少所以代码效率高，引用类型也少，对内存空间影响少）

                                    a.减少了事件绑定浏览器重绘的次数，调高了程序的执行效率

                                    b.减少了事件处理程序

                                    c.可以解决动态添加的元素节点无法绑定事件的问题

        (1).把当前元素事件，委托给父级执行（并不一定是直接父元素）。

                利用e.target（目标）属性来实现委托

                会根据事件的触发对象来决定对象是谁

                e.target.nodeName可以跟句节点来获取节点元素名

                例子：

                                 防止识别错误所以转换成小写 ==“元素名”

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

        (2).兼容性问题

                兼容IE8及以下兼容问题

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

    5.json

        是一种数据格式：用来与后台进行数据交互

        这种数据格式可以用什么方式存在：（json格式比较严格）

            a.可以用数组的方式存在

                    [{"键":"值"}，]

            b.以对象的方式存在

                        {

                            "键":"值",

                            "键":"值"

                    }

    6.拖拽

        三个动作

            a.鼠标按下

                onmousedown

            b.鼠标移动

                onmousemove

            c.鼠标抬起

                onmouseup

    例子：

 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";

                return false;

            document.onmouseup=function(e){

                document.onmousemove=null;

            }

        }

    }

  7.完美拖拽（边界处理）

需要减去元素的宽高，才能保证元素部分边界不会出可是窗口

var left = document.documentElement.clientWidth - 100;

var top = document.documentElement.clientHeight - 100;

 (1)第一种写法

if (l < 0) {

    l = 0;

  } else if (l > left) {

    l = left;

 }

if (t < 0) {

    t = 0;

  } else if (t > top) {

  t = top;

 }

(2)第二种写法

两种判断情况都写在三目运算中

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

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

    8.scroll家族

        onscroll滚动事件

        scrollTop；

            x: document.body.scrollLeft + document.documentElement.scrollLeft;

        scrollLeft;          

            y: document.body.scrollTop + document.documentElement.scrollTop;

  9.offset家族

x: window.pageXOffset,

y: window.pageYOffset,

    pageXOffset 和 pageYOffse

    属性返回文档在窗口左上角水平和垂直方向滚动的像素，这些属性是只读的。

offsetWidth;包含边框样式和内边距

           获取 内容 + padding + 边框

clientWidth;包含内边距

        内容 + padding 都可以获取元素非行内样式值 值类型Number

boxoffsetTop：

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

        b.如果有父元素有定位，根据你父元素最近的