jQuery之事件冒泡&模拟操作

最新推荐文章于 2021-06-26 20:20:35 发布

龙腾四海365

最新推荐文章于 2021-06-26 20:20:35 发布

阅读量394

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011637069/article/details/50235073

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

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" οnclick="f2(event);">
		<a href="javascript:;" οnclick="f1(event);">Click me</a>
	</div>
	<a href="javascript:;" οnclick="f3(event);">Click 1</a>
	<a href="javascript:;" οnclick="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>