绑定事件bind
$(function(){
// //只能绑定click事件,不能绑定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可绑定多个事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消绑定事件
$(this).unbind('mouseover');
});
})
自定义事件
$(function(){
//自定义事件只能用bind方式绑定,第一个参数是事件的名字,第二个参数是事件发生时执行的函数
$('#btn1').bind('hello', function(){
alert('hello');
})
$('#btn1').bind('click', function(){
alert('click');
})
$('#btn2').click(function() {
// trigger即可以触发自定义事件,也可以触发原始的事件
$('#btn1').trigger('hello');
$('#btn1').trigger('click');
});
//不一定点击按钮触发,也可页面加载时触发,也可在满足某种if条件时触发
// $('#btn1').trigger('hello');
})
事件冒泡
console.log(event);//显示很多属性,其中clientX、clientY就是点击的坐标
alert("X轴坐标:" + event.clientX);
阻止事件冒泡
event.stopPropagation();
合并阻止操作:把阻止冒泡和阻止默认行为合并
阻止默认行为(原来右键能弹出菜单,阻止后无法弹出)
event.preventDefault();
事件委托
给每个li绑定事件,一共绑定了8次,性能不高
$('.list li').click(function() {
alert($(this).html());
});
事件委托:方法delegate,只绑定一次事件,冒泡触发
参数:
selector选择器:写入ul下面的所有要发生事件的元素,多个元素用空格隔开,例如‘li a span’
eventType事件
function要执行的操作
网友评论