1.绑定事件
$(function(){
// //只能绑定click事件，不能绑定其他的了
// $('#btn').click(function() {
// /* Act on the event */
// });
//bind方式可绑定多个事件
$('#btn').bind('click mouseover', function() {
alert('hello!');
//取消绑定事件
$(this).unbind('mouseover');
});
})
2.自定义事件
$(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');
})
3.事件冒泡
$(function(){
$('body').click(function() {
alert(4);
});
$('.grandfather').click(function() {
alert(3);
});
$('.father').click(function() {
alert(2);
});
$('.son').click(function(event) {//event代表当前事件
alert(1);
// console.log(event);//显示很多属性，其中clientX、clientY就是点击的坐标
// alert("X轴坐标：" + event.clientX);
// //阻止事件冒泡
// event.stopPropagation();
//合并阻止操作：把阻止冒泡和阻止默认行为合并
return false;
});
//阻止右键菜单
$(document).contextmenu(function(event){
// //阻止默认行为（原来右键能弹出菜单，阻止后无法弹出）
// event.preventDefault();
//合并阻止
return false;
})
})
4.弹框-阻止冒泡
.pop_con{
display: none;/*默认不显示，用定时器显示*/
}
.pop{
width: 400px;
height: 300px;
background-color: #fff;
border: 1px solid #000;
position: fixed;/*使用固定定位*/
left: 50%;/*左上角位于页面中心*/
top: 50%;
margin-left: -200px;/*让div向左偏移半个宽度、向上偏移半个高度，使div位于页面中心*/
margin-top: -150px;
z-index: 9999;/*弹窗在最前面*/
}
/*遮罩样式*/
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
left: 0;
top: 0;
/*设置透明度30%，兼容IE6、7、8*/
opacity: 0.3;
filter: alpha(opacity=30);
z-index: 9990;/*遮罩在弹窗后面*/
}
$(function(){
$('#btn').click(function() {
$('#pop').show();
return false;
});
$('#shutoff').click(function() {
$('#pop').hide();
});
//点弹框以外的地方，也能让弹框消失
$(document).click(function(){
// setTimeout(function(){
// $('#pop').hide();
// },2000);
$('#pop').hide();
});
$('.pop').click(function() {
return false;
});
//阻止默认行为（原来超链接可跳转到百度，阻止后无法跳转）
$('#link1').click(function() {
return false;
});
})