zepto中的事件

ready与onload的区别：

    <script>
        //DOM加载完毕（不包括图片等）
        $(document).ready(function(){

        })

        全部文件加载完毕（html文件+css文件+js文件+图片等）
        window.onload=(){

        }
    </>

综上所述，其实ready比onload要快，一般建议使用ready

事件开头的几种简写方式：

        //写法一
        $(document).ready(function(){

        })

        写法二
        $(写法三
        $().ready((){

        })

事件绑定：

bind on 直接写事件（简写）

<!DOCTYPE html>
html lang="en"head>
    meta charset="UTF-8"title>demoname="viewport" content="width=device-width,initial-scale=1,user-scalable=no"style>
        .pink{color:pink;}
        .bigfont-size30px
        .bgBluebackground-colorlightblue}
    bodydiv class="div">divdiv>

    script src="zepto.min.js"></

        $(document).ready((){
            $(".div).bind(click,(e){
                console.log(bind绑定事件);
            })

            $().on(on绑定事件).click(简写，直接绑定);
            })
        });

    html>

事件冒泡与事件捕获：

zepto不支持事件捕获

id="grandParent">
        ="parent">
            ="child">child(){
            /*
            事件冒泡：
            顶级
            ...
            grandParent
            parent
            child 点击之后，向上冒泡，只要绑定过事件的都会被触发
            */
            $(#grandParentgrandParent被点击#parentparent被点击#childchild被点击);
            })
        });
    >

(){

            
            事件捕获：
            顶级
            ...
            grandParent
            parent
            child 点击之后，从上向下冒泡，只要绑定过事件的都会被触发
            */
            zepto不支持，用原生js演示
            默认是false,事件冒泡；使用事件捕获设置true
            var grandParentdocument.getElementById(grandParent),parent);

            grandParent.addEventListener((){
                console.log();
            },1)">true);

            parent.addEventListener();
            
            child.addEventListener();
        });

    >

事件委托或代理：

绑定事件非常消耗性能

    ulli>1>2>3>4>5>6>

bind click是简写，绑定了6次，耗性能

            bind  click是简写
            绑定了6次，耗性能
            $("li").bind("click",(){
                console.log("bind");
            });
            $("li").click((){
                console.log("click");
            });

one 只绑定一次

            one 只绑定一次
            $("li").one("click",1)">(){
                console.log("one");
            })

针对单个li来说，只有第一次点击有效，之后点击无效

live 绑定在document上

利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理

缺点是需要一直冒泡到顶级，如果层级多也很耗性能，因此被弃用

            live 绑定在document上
            利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理
            缺点是一直冒泡到顶级，如果层级多也不好，因此被弃用
            $("li").live("click",1)">(){
                console.log("live");
            })

delegate 绑定在父元素上

利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理

多了一个参数，指定触发事件的子元素

            delegate 绑定在父元素上
            多了一个参数，指定触发事件的子元素
            $("ul").delegate("li","click",1)">(){
                console.log("delegate");
            })

on 比较万能，推荐使用

利用事件冒泡的方式，只绑定了一次，就叫做事件委托或者事件代理

与delegate类似，指定一个参数，不过参数顺序不一样

            on 比较万能
            与delegate类似，指定一个参数，不过参数顺序不一样
            $("ul").on("click","li",1)">(){
                console.log("on");
            })

unbind off 解除绑定

            事件委托或代理，绑定事件
            $("ul").on("click",1)">);
            })

            解除事件绑定
            $("ul").unbind();

            解除事件绑定
            $("ul").off();

自定义事件

            绑定自定义事件
            $("div").on("cyy",1)">(){
                console.log("cyy自定义事件"触发自定义事件
            $("div").trigger("cyy");

命名空间

            $("div").bind("click",1)">(){
                console.log("一般click事件");
            });

            $("div").bind("click.cyy",1)">(){
                console.log("带命名空间的click事件");
            });

            解绑所有click事件
            $("div").unbind("click");

            解绑指定命名空间的click事件
            $("div").unbind(".cyy");

绑定多个事件：

多个事件执行相同操作，用空格分隔

多个事件执行不同操作，可以使用链式操作

            多个事件执行相同操作
            $("div").bind("click touchstart",1)">(){
                console.log("执行click和touchstart"多个事件执行不同操作
            $("div").bind("click",1)">(){
                console.log("执行click");
            }).bind("touchstart",1)">(){
                console.log("执行touchstart");
            });

相关推荐