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

*/