8:jquery事件的绑定移除

1:data 触发事件传递的数据

var num=100;
//data 对象 json类型的数据 类型即是数组型 对象型
var obj={name:"son",sex:"boy",age:"20"};
var cla=[
    {
        name:"zhang1",
        age:"18",
        sex:"boy",
        hobby:[
            {name:"pingpang"},
            {name:"lanqiu"}
        ]
    },
    {
        name:"zhang2",
        age:"18",
        sex:"boy",
        hobby:[
            {name:"pingpang"},
            {name:"lanqiu"}
        ]
    }
];

2: on 绑定

//参数1 事件 参数2 执行事件的函数   
$("#btn").on("click",function(e){
    console.log("click");
});
$("#btn").on("click",cla,function(e){
    console.log("clickevent");
    //获取数据
    //执行事件传递的数据在e的data属性上
    //console.log(e.data);
    //json 集合获取单个值
    for(var i=0;i<e.data.length;i++){
        console.log(e.data[i].name, e.data[i].sex, e.data[i].age);
    }
});

3:事件on 绑定 移除 细节

 //写成常规的基础函数
 function handle(e){
    //同一个回调函数里面如何区分时间 借助事件的参数 e event
    if(e.type=="click"){
        console.log("click");
        //在事件里面的当前执行对象$(this)
        //直接写指定的对象移除
        //fn 不是回调函数 在添加事件的时候将之前的匿名回调函数转化为基本函数写法 到off中写移除的函数名
        //添加fn 和js removeeenentlisten 参数是一致的 这个参数可写也可以不写
        $(this).off("mouseenter",handle);
    }
    else if(e.type=="mouseenter"){
        console.log("enter");
    }
    else{
        console.log("leave");
    }
}

4:on 绑定多个事件 中间用空格隔开

  $("#btn").on("click mouseenter mouseleave",handle);

5:off 移除

//不写任何参数 该元素的所有事件全部被移除
  $("#btn").off();
 //单击的时候移除进入事件

6:bind 绑定 unbind 移除 版本问题

7:绑定多个事件

var stu={
    name:"son",
    age:"18"
}
function handleinfo(e){
    //获取传递的数据
    console.log(e.data);
    //在同一个函数内部区分事件类型 和上面一致
    if(e.type=="click"){
        console.log("click");
        //单击的时候移除out
        $(this).unbind("mouseout",handleinfo);
    }
    else{
        console.log("out");
    }
}
$("#btn").bind("click mouseout",stu,handleinfo);
//$("btn").unbind();

**8:on off 中的一个参数sel (选择器)
委托 父元素将自身的事件委托给子元素来执行

//selector 是一个选择器字符串 $(".box") 写成".box"
$("ul").on("click",".box",handlelist);
function handlelist(){
    console.log("委托给第二个li执行");//委托之后 事件内部$(this)发生变化
    //点击完成之后移除当前的事件委托
    $("ul").off("click",".box",handlelist);
    //$("ul").off("click");
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值