jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
本文实例讲述了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用。分享给大家供大家参考，具体如下：
事件的绑定和解绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#div1').bind('mouseover click',function (event) {//绑定事件:移动到div块上和点击
alert($(this).html);
$(this).unbind('mouseover');//取消鼠标移动到上面的事件
})
})
</script>
<style type="text/css">
#div1{
background-color: #f6b544;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
绑定事件:移动到div块上和点击
解绑事件：取消鼠标移动到上面的事件
事件冒泡-阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('.son').click(function () {
alert(1);
});
$('.father').bind('click',function () {
alert(2);
});
$('.grandfather').bind('click',function () {
alert(3);
});
})
</script>
<style type="text/css">
.grandfather{
width: 300px;
height: 300px;
background-color: green;
}
.father{
width: 200px;
height: 200px;
background-color: gold;
}
.son{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="father">
<div class="son">
</div>
</div>
</div>
</body>
</html>
定义了三个div，在son点击一下弹出1，father点击一下弹出2，grandfather点击一下弹出3，如果我们点击son一下，那么会依次弹出123，点击father一下会依次弹出二三。
按照标签往上传到它的父级
事件冒泡有时候不需要，需要阻止，通过eventstopPropagation()来阻止
$('.son').click(function (event) {//event就是一个事件对象
//用这个事件对象就能使用事件对象的方法
alert(1);
event.stopPropagation();//阻止事件对象冒泡
});
除了阻止事件冒泡，还要阻止一些默认行为，开发中直接return false就行。
$('.father').bind('click',function () {
alert(2);
//阻止事件冒泡和阻止默认行为的同意写法
return false;
});
弹框
点击弹框外面关闭弹框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
// alert(2);
$('.pop_con').fadeIn();
// alert(1);
return false;//阻止事件，冒泡
});
$(document).click(function () {
$('.pop_con').fadeOut();
})
})
</script>
</head>
<style type="text/css">
.pop{
position: fixed;
width: 500px;
height: 300px;
background-color: #fff;
border: 3px solid #000;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -150px;/*拉回去*/
z-index: 2;
}
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.3;
filter:alpha(opacity=30);/*兼容ie浏览器的*/
left: 0;
top: 0;
z-index: 1;/*z-index设置现实层级*/
}
.pop_con{
display: none;/*因为pop_con包含住了mask和pop，所以设置了这个之后，他们就隐藏了*/
}
</style>
<body>
<input type="button" name="" value="弹出" id="btn">
<div class="pop_con">
<div class="pop">
弹框里面的文字
</div>
<div class="mask"></div>
</div>
</body>
</html>
如果不组织事件冒泡的话，点击之后，弹框出现之后，就会直接隐藏，只有阻止之后，才能点击外框的document或者mask才能隐藏弹框。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery事件绑定on()与弹窗实现代码
页面上经常会有弹窗,有的弹窗是动态生成的,有的弹窗是在页面底部隐藏的,对于动态生成的弹窗,如果要监听弹窗的事件,可以使用jQuery的事件绑定on()方法实现. 如图,弹窗是js动态生成的,通过点击某个链接弹出,弹窗中的"立即去使用"链接点击后,实现的效果是关闭弹窗,并跳转到锚点. 这个a标签是: 复制代码 代码如下: <a style="display:" title="立即去使用" target="_blank" g
-
jQuery事件绑定on()、bind()与delegate() 方法详解
啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法:bind().del
-
jQuery事件绑定与解除绑定实现方法
本文实例讲述了jQuery事件绑定与解除绑定实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title> <meta name=
-
关于jQuery新的事件绑定机制on()的使用技巧
今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔
-
jQuery事件绑定和委托实例
本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() . bind() . live() . delegate() ,还有one(). 有时我们可能会像下面这样绑定一个事件: 复制代码 代码如下: $("#div1").click(function() { alert("点击后触发"); }); 上面的事件绑定,我们可以通过多种方式去实现: 1. on()
-
Jquery阻止事件冒泡 event.stopPropagation
描述: 防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数. version added: 1.0event.stopPropagation() 我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了. 这个方法对 trigger() 来自定义的事件同样有效. 注意,这不会阻止同一个元素上的其它事件处理函数的运行. Additional Notes: 自从.live()方法处理事件一旦传播到文档的顶部,live事件是
-
事件冒泡是什么如何用jquery阻止事件冒泡
(1)什么是事件起泡 首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生. 当事件发生后,这个事件就要开始传播.为什么要传播呢?因为事件源本身并没有处理事件的能力.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件). 当事件在
-
jquery 事件冒泡的介绍以及如何阻止事件冒泡
什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 复制代码 代码如下: <%@PageLanguage="C#&q
-
jquery取消事件冒泡的三种方法(推荐)
1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: $("form").bind( "submit", function() { return false; } ); 2.通过使用 preventDefault() 方法只取消默认的行为. jQuery 代码: $("form").bind( "submit", function(event){ event.preventDefault(); } );
-
浅谈jQuery事件绑定原理
jq里面有一个data的方法,给dom元素绑定相关的数据的.当给dom用jq的方法绑定了事件,会生成对应的时间列表 可以看下面的例子(请在firefox中查看 因为firefox中对象支持toSource()) 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"
-
jQuery的三种bind/One/Live/On事件绑定使用方法
本篇文章介绍了,关于jQuery新的事件绑定机制on()的使用技巧.需要的朋友参考下 今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(eve