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