Javascript学习小总结14

2018-10-11  本文已影响0人  考拉_2044

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.如果有父元素有定位,根据你父元素最近的

上一篇下一篇

猜你喜欢

热点阅读