您的位置：首页 > Web前端 > JQuery

jQuery之事件冒泡&模拟操作

2015-12-09 13:32 615 查看
jQuery之事件冒泡&模拟操作

1.事件冒泡

a,什么是事件冒泡？

子节点产生的事件，会依次向上抛出给相应的父节点。

b,如何取消事件冒泡？

e.cancelBubble = true;

c,事件对象有何作用？

取消冒泡 -- e.cancelBubble = true;

获取光标坐标 -- e.clientX/e.clientY

找到事件源 -- e.target || e.srcElement;

示例代码：/jQuery01/WebRoot/event/e3.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>事件冒泡</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#d1{
width:200px;
height:200px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function f1(e){
alert('你点击的是一个链接');
//取消事件冒泡
e.cancelBubble = true;
}
function f2(e){
//alert('你点击的是一个div');
//输出鼠标的x,y坐标
alert(e.clientX+","+e.clientY);
}
//找到事件源
function f3(e){
//依据事件对象找到事件源
var obj = e.target || e.srcElement;
alert(obj.innerHTML);
}
</script>
</head>
<body>
<div id="d1" onclick="f2(event);">
<a href="javascript:;" onclick="f1(event);">Click me</a>
</div>
<a href="javascript:;" onclick="f3(event);">Click 1</a>
<a href="javascript:;" onclick="f3(event);">Click 2</a>
</body>
</html>


2.jQuery实现事件冒泡

a,获取事件对象

click(function(e){

//e:对底层的事件对象的一个封装

});

b,事件对象的属性

event.type:事件类型

event.target：返回事件源(是dom对象)

event.pageX/pageY：获得光标坐标

示例代码：/jQuery01/WebRoot/event/e4.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery实现事件冒泡</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(e){
//依据事件对象获取事件源
//e是jQuery对象(封装了底层的事件对象)
//target属性是jQuery的一个属性返回一个dom对象
//var obj = e.target;
//alert(obj.innerHTML);

//通过事件对象获得光标坐标
//alert(e.pageX+","+e.pageY);

//事件类型
alert(e.type);
});
});
</script>
</head>
<body>
<a href="javascript:;">Click 1</a>
<a href="javascript:;">Click 2</a>
</body>
</html>


c,停止冒泡

event.stopPropagation()

示例代码：/jQuery01/WebRoot/event/e5.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>停止冒泡</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<style type="text/css">
#d1{
width:200px;
height:200px;
border:1px solid red;
}
</style>
<script type="text/javascript">
$(function(){
$('a').click(function(e){
alert('你点击的是一个链接');
//停止冒泡
e.stopPropagation();
});
$('#d1').click(function(e){
alert('你点击的是一个div');
});
});
</script>
</head>
<body>
<div id="d1">
<a href="javascript:;">Click me</a>
</div>
</body>
</html>


d,停止默认行为

event.preventDefault()

示例代码：/jQuery01/WebRoot/event/e6.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>停止默认行为</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('a').click(function(e){
var flag = confirm('确定访问百度吗');
if(!flag){
//停止默认行为
//阻止浏览器的默认行为(链接地址发请求)
e.preventDefault()
}
});
});
</script>
</head>
<body>
<a href="https://www.baidu.com/">Click me</a>
</body>
</html>


3.模拟操作

trigger('click')

示例代码：/jQuery01/WebRoot/event/e7.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>模拟操作</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$('#b1').click(function(){
//模拟用户点击了username文本输入框
//即让username文本输入框产生焦点获得事件
//$('#username').trigger('focus');

//简写形式
$('#username').focus();
});
});
</script>
</head>
<body>
username:<input id="username"/><br/>
name:<input name="name"/><br/>
<input id="b1" type="button" value="ClickMe"/>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航