zoukankan      html  css  js  c++  java
  • 事件绑定 和 proxy代理

    *
    bind:
    1、事件类型
    2、需要给事件对象传递的参数
    3、回调函数


    事件解绑:
    unbind
    参数:事件类型
    参数:解绑函数

    如果什么都不写的时候全部解绑


    缺点:
    不能实现为未来元素的事假绑定
    */

    //方案一
    // $("#list>li").bind("click",1,function(e){
    // console.log(this)
    // })

    //方案二
    // $("#list>li").bind("click mouseover",1,function(e){
    // console.log(this)
    // })


    $("#list>li").bind({
    click:fn,
    mouseover:fn1
    },[1,2,3,4])


    function fn(e){
    console.log(e.data)
    }


    function fn1(){
    console.log(this)
    }

    //$("#list>li").eq(1).unbind("click",fn)

    var li = $("<li>666</li>");
    $("#list").append(li);

    /*
    live:
    1、事件类型
    2、需要给事件对象传递的参数
    3、回调函数


    优点:可以实现对未来元素的饿绑定

    缺点 1.7版本之后就废除掉了


    解绑:
    die()
    解绑事件只能解绑所有的子级 不能解绑单个的子级


    */

    //一
    // $("#list>li").live("click",[1,2,3,4],function(e){
    // console.log(e.data)
    // })


    //第二种形式
    // $("#list>li").live("click mouseover",[1,2,3,4],function(e){
    // console.log(e.data)
    // })


    //第三种
    $("#list>li").live({
    click:fn,
    mouseover:fn1
    },[1,2,3,4])


    function fn(e){
    console.log(e.data)
    }


    function fn1(){
    console.log(this)
    }

    var li = $("<li>77777</li>");

    $("#list").append(li);

    $("#list>li").die("click",fn)

    /*
    delegate:
    1、需要绑定事件的子元素
    2、事件类型
    3、需要给事件对象传递的参数
    4、回调函数


    解绑:undelegate



    参数1:需要解绑的子元素 不能对单个某一个子元素进行解绑
    参数2:需要解绑的事件
    参数3:需要解绑的函数名称

    缺点:只能给子元素进行事件绑定 结合了live的用法

    */


    // $("#list").delegate("li","click",[1,2,3,4], function(e) {
    // console.log(e.data)
    // });

    // $("#list").delegate("li","click mouseover",[1,2,3,4], function(e) {
    // console.log(e.data)
    // });


    $("#list").delegate("li",{
    "click":fn,
    "mouseover":fn1
    },[1,2,3,4]);


    function fn(e){
    console.log(e.data)
    }


    function fn1(){
    console.log(this)
    }

    var li = $("<li>77777</li>");

    $("#list").append(li);

    $("#list").undelegate("li","click",fn);

    /*
    bind live delegate on 四者的区别

    on:
    但是on 代替不了live的

    1、事件类型

    2、选填 需要给绑定事件的子元素

    3、需要传递给事件对象的参数

    4、回调函数


    off:解绑
    off()
    参数1:解绑的事件类型
    参数2:需要解绑的对象 不能指定某一个元素实现解绑的
    参数3:需要解绑的函数名称
    */

    // $("#list").on("click","li",[1,2,3,4],function(e){
    // console.log(this)
    // })


    // $("#list").on("click mouseover","li",[1,2,3,4],function(e){
    // console.log(this)
    // })

    $("#list").on({
    click:fn,
    mouseover:fn1
    },"li",[1,2,3])


    function fn(e){
    console.log(e.data)
    }


    function fn1(){
    console.log(this)
    }

    $("#list").off("click","li",fn)

    proxy:代理
    参数1:函数
    参数2:this的指向


    返回值 是一个新的函数 this的指向会指向特定的作用域

    函数嵌套函数


    koa

    函数化编程

    bind()


    $(document).click(function(){

    setInterval($.proxy(fn,document),3000)

    })

    function fn(){
    console.log(this)
    }
    */


    /*
    one:事件只会执行一次
    参数1 事件类型
    参数2:回调函数

    $(document).one("click",function(){
    alert(1)
    })

    */

  • 相关阅读:
    HttpWebRequest、HttpWebResponse简单Demo
    向虚拟机发短信(android SMS 调试)
    双系统时间相关8小时
    电脑开机报警声
    Windows Live Writer 代码插件
    配置Linux防火墙
    配置yum源方法,以及失效时的处理
    xp系统下硬盘安装centos6.5
    Android 四大组件 与 MVC 架构模式
    elasticsearch GIS空间查询问题解决
  • 原文地址:https://www.cnblogs.com/carolavie/p/9750849.html
Copyright © 2011-2022 走看看