jQuery事件发展历程
//用原生的js给div注册单击事件
//原生js注册相同的事件,后面的会把前面的覆盖
document.getElementById("one").onclick=function(){
alert('单击事件');
};
document.getElementById("one").onclick=function(){
alert('单击事件.啦啦啦');
};
jQuery
给同一个元素注册同样的事件,后面的不会把前面的给覆盖
$('#one').click(function(){
alert('单击事件');
})
$('#one').click(function(){
alert('单击事件,lalala');
})
jQuery注册事件的发展历程
1.简单事件绑定 click()
//不支持同时注册,也不支持动态注册
$('div').click(function(){
console.log("鼠标点击事件");
});
$('div').mouseenter(function(){
console.log("鼠标移入事件...");
})
2.bind方式注册事件
//支持同时注册,也不支持动态注册
$('div').bind({
mouseenter:function(){
console.log("鼠标移入事件...");
},
click:function(){
console.log('鼠标单击事件');
}
})
3.delegate注册事件-原理是事件冒泡
//支持同时注册,也支持动态注册
$('body').delegate('div',{
mouseenter:function(){
console.log('鼠标移入事件');
},
click:function(){
console.log("鼠标单击事件");
}
})
jQuery1.7之后,jQuery用on统一了所有事件的处理方法
on简单注册事件
不支持动态注册的
$('div').on('click',function(){
console.log('我是点击事件...');
})
//on委托注册
//支持动态注册的
$('body').on('click','div',function(){
console.log("单击事件.");
})
$('body').on('click','div,span',function(){
console.log("单击事件.");
})
off()
jQuery用on来注册事件,就用off来解绑事件
off不给参数就是解绑所有事件
off(‘click’)给参数解绑指定的事件
//给注册事件按钮,注册单击事件
$('#btn1').on('click',function(){
//给div注册事件
$('#one').on({
'click':function(){
console.log("单击事件");
},
'mouseenter':function(){
console.log("鼠标移入事件");
}
});
});
//移除事件
$('#btn2').on('click',function(){
//给div解绑事件
//$('#one').off();//解绑所有事件
$('#one').off('click');//解绑click事件
})
trigger()事件触发
//事件触发trigger
//代码的方式来触发事件
//可以使用他来触发自定义事件
//给div注册一个单击事件
$('#one').on('click',function(){
console.log('单击事件...');
});
//给按钮注册事件
var i=0;
$('#btn1').on('click',function(){
i++;
if(i==3){
//条件满足,触发div的单击事件
//事件触发,用代码的方式触发事件
$('#one').click();
$('#one').trigger('click');
}
})
//给div注册一个自定义事件
$("#one").on('linge',function(){
console.log("拉拉,我是林哥事件");
});
//那我现在就是要触发他怎么办?就可以使用触发器trigger
$('#btn2').on('click',function(){
var res=confirm('请问林哥帅吗');
if(res){
//触发自定义的linge事件
$('#one').trigger('linge');
}
})
第六课…