事件绑定 和 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)
})

*/

猜你喜欢

转载自www.cnblogs.com/carolavie/p/9750849.html