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)
    })

    */

  • 相关阅读:
    Linux的僵尸进程及其解决方法
    描述linux系统从开机到登陆界面的启动过程
    __weak、__strong这样的关键词和weak、strong有哪些区别
    选择器(UIPickerView)
    UITableView 滚动流程性优化
    几种设置UITableView的cell动态高度的方法
    强大的Core Image(教你做自己的美图秀秀))
    iOS UIBezierPath类 介绍
    Quartz 2D编程指南- PDF文档的创建、显示及转换
    Quartz 2D编程指南(4) - 颜色和颜色空间
  • 原文地址:https://www.cnblogs.com/carolavie/p/9750849.html
Copyright © 2011-2022 走看看