2019-06-19 绑定事件 自定义事件 事件冒泡 弹框-阻止冒泡

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;

});

})