事件冒泡、事件委託

時間 2020-07-21 標籤事件冒泡委託

事件冒泡

什麼是事件冒泡

在一個對象上觸發某類事件（好比單擊onclick事件），若是此對象定義了此事件的處理程序，那麼此事件就會調用這個處理程序，若是沒有定義此事件處理程序或者事件返回true，那麼這個事件會向這個對象的父級對象傳播，從裏到外，直至它被處理（父級對象全部同類事件都將被激活），或者它到達了對象層次的最頂層，即document對象（有些瀏覽器是window）。javascript

事件冒泡的做用

事件冒泡容許多個操做被集中處理（把事件處理器添加到一個父級元素上，避免把事件處理器添加到多個子級元素上），它還能夠讓你在對象層的不一樣級別捕獲事件。css

阻止事件冒泡

事件冒泡機制有時候是不須要的，須要阻止掉，經過 event.stopPropagation() 來阻止html

$(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>

阻止默認行爲

阻止表單提交java

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

合併阻止操做

實際開發中，通常把阻止冒泡和阻止默認行爲合併起來寫，合併寫法能夠用jquery

// 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>

事件委託

事件委託就是利用冒泡的原理，把事件加到父級上，經過判斷事件來源的子集，執行相應的操做，事件委託首先能夠極大減小事件綁定次數，提升性能；其次能夠讓新加入的子元素也能夠擁有相同的操做。web

通常綁定事件的寫法

$(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>