事件冒泡、事件委托

最新推荐文章于 2024-04-12 23:43:08 发布

a_Joker_Ling

最新推荐文章于 2024-04-12 23:43:08 发布

阅读量171

点赞数

分类专栏： JavaScript Html jquery 文章标签： jquery js html javascript event

本文链接：https://blog.csdn.net/a1209849629/article/details/105536495

版权

Html 同时被 3 个专栏收录

33 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 1 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

事件冒泡

什么是事件冒泡

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的作用

事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡

事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

$(function(){
    var $box1 = $('.father');
    var $box2 = $('.son');
    var $box3 = $('.grandson');
    $box1.click(function() {
        alert('father');
    });
    $box2.click(function() {
        alert('son');
    });
    $box3.click(function(event) {
        alert('grandson');
        event.stopPropagation();

    });
    $(document).click(function(event) {
        alert('grandfather');
    });
})

......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

阻止默认行为

阻止表单提交

$('#form1').submit(function(event){
    event.preventDefault();
})

合并阻止操作

实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

// event.stopPropagation();
// event.preventDefault();

// 合并写法：
return false;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
				// event 是发生事件的时候的事件对象，使用的时候，通过第一个参数传进来
				$('.son').click(function(event){
					
					alert(1);

					//通过event对象上的stopPropagation的方法阻止事件冒泡
					//event.stopPropagation();

				})

				$('.father').click(function(event){
					alert(2);

					event.stopPropagation();
				})	

				$('.grandfather').click(function(){
					alert(3);

					// 阻止事件冒泡和阻止默认行为的统一写法：
					return false;
				})


				$(document).click(function(){
					alert(4);
				})

		})

	</script>
	<style type="text/css">
		
		.grandfather{
			width:300px;
			height:300px;
			background-color:green;

			position:relative;
		}

		.father{
			width:200px;
			height:200px;
			background-color:gold;
		}


		.son{
			width:100px;
			height:100px;
			background-color: red;
			position:absolute;

			left:0;

			top:400px;
		}



	</style>
</head>
<body>
	<div class="grandfather">		
		<div class="father">			
			<div class="son"></div>
		</div>
	</div>
</body>
</html>

弹框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('#btn').click(function(){
				$('.pop_con').fadeIn();
				return false;

			})
			$(document).click(function(){
				$('.pop_con').fadeOut();

			})
			$('.pop').click(function(){

				return false;

			})
			$('#close').click(function(){
				$('.pop_con').fadeOut();
			})

		})


	</script>
	<style type="text/css">

		.pop_con{
			display:none;
		}		
		.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:9999;
		}

		.mask{
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			opacity:0.3;
			filter:alpha(opacity=30);
			left:0;
			top:0;
			z-index:9990;

		}

		.close{
			float:right;
			font-size:30px;
		}



	</style>
</head>
<body>
	<input type="button" name="" value="弹出" id="btn">

	<div class="pop_con">
		<div class="pop">
			弹框里面文字
			投资金额：
			<input type="text" name="">
			<a href="#" id="close" class="close">×</a>
		</div>
		<div class="mask"></div>
	</div>
</body>
</html>

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

$(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

事件委托的写法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.list{
			background-color:gold;
			list-style:none;
			padding:10px;
		}

		.list li{
			height:30px;
			background-color:green;
			margin:10px;
		}


	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

		

			/*

			$('.list li').click(function(){

				$(this).css({'backgroundColor':'red'});

			});

			*/


			// 新建一个li元素赋值给$li变量
			//var $li = $('<li>9</li>');

			//让新加的li有相同的事件，需要单独绑定
			//$li.click(....)

			// 把新建的li元素放到ul子集的最后面
			//$('.list').append($li);		

			
			//事件委托，将li要发生的事件委托给li的父级
			$('.list').delegate('li','click',function(){
				//$(this) 指的是委托的子元素
				$(this).css({'backgroundColor':'red'});

			})

			var $li = $('<li>9</li>');
			$('.list').append($li);

		})

	</script>
</head>

<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
</body>
</html>

a_Joker_Ling

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件冒泡、事件委托

事件冒泡什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作用事件冒...
复制链接

扫一扫