SpringBoot War包形式部署到外部Tomcat

阿新 • • 發佈：2020-08-14

事件

js操作css稱為校本化的css，js與html互動通過事件完成。
事件就是文件或瀏覽器視窗中發生一些特定的互動瞬間。
事件流 ------>事件傳播
事件流描述的是從頁面中接收事件的順序。
事件流的歷史：
瀏覽器發展到第四代的時候！IE團隊和美國網景公司瀏覽器開發團隊想到的問題。
單擊事件不僅僅發生在按鈕上，其實單擊了整個頁面。
IE和Netscape 提出了相反的事件流
在IE中提出的事件流想法是冒泡流，當我們在網頁操作或點選這個div ，它會往它的父級上去傳播。
在Netscape中提出的事件流想法是事件捕獲流，當我們在網頁上操作或點選div的時候！它會往body和html上進行層級傳遞。

事件冒泡流

概念：事件開始時！由最具體的元素接收，然後逐級向父級元素（上級）傳播！交給不具體的節點（文件）。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			background-color: red;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			box.onclick = function(){
				box.innerHTML = 'div\n';
			}
			document.body.onclick = function(){
				box.innerHTML += 'body\n';
			}
			document.documentElement.onclick = function(){
				box.innerHTML += 'document\n';
			}
			window.onclick = function(){
				box.innerHTML += 'window\n';
			}
		</script>
</body>
</html>

事件冒泡的傳遞方向： div ----> body ----> html ----> document ----> window
注意事項：IE9以上一直冒泡到window物件。 IE8會有一些問題。

事件捕獲流

概念：事件發生時！由不太具體的節點更早的接收事件，而最具體的節點應該最後接收事件。

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			background-color: red;
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
		<div id="box">
			
		</div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			//事件捕獲  addEventListener() 第三個引數為false代表冒泡階段！為true代表捕獲階段
			box.addEventListener('click',function(){
				box.innerHTML += 'box\n';
			},true);
			document.body.addEventListener('click',function(){
				box.innerHTML += 'body\n'
			},true);
			document.documentElement.addEventListener('click',function(){
				box.innerHTML += 'document\n';
			},true)
			window.addEventListener('click',function(){
				box.innerHTML += 'window\n';
			},true);
		</script>
</body>
</html>

在事件流中發生了三個階段：並分為事件捕獲階段，處於目標階段，事件冒泡階段。

事件處理程式

說白了就是事件的繫結函式。
事件處理程式分為HTML事件處理程式、DOM0級事件處理程式、DOM2級事件處理程式、IE事件處理程式。

HTML事件處理程式

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
	//html事件處理程式
		<div id="box" style="width:200px;height:100px;background-color: pink;" onclick="this.innerHTML +="></div>
		<script type="text/javascript">
			
		</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
	//html事件處理程式
		<div id="box" style="width:200px;height:100px;background-color: pink;" onclick="test()"></div>
		<script type="text/javascript">
			function test(){
				console.log(this);
				this.innerHTML += '1';
			}
			
		</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
	//html事件處理程式
		<div id="box" style="width:200px;height:100px;background-color: pink;" onclick="this.innerHTML += event.type"></div>
		<script type="text/javascript">
			function test(){
				document.getElementById("box").innerHTML += '1';
			}
			
		</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
	//html事件處理程式
		<button id="box"  value="xxxx" style="width:200px;height:100px;background-color: pink;" onclick="this.innerHTML += value;"></button>
		<script type="text/javascript">
			function test(){
				document.getElementById("box").innerHTML += '1';
			}
			
		</script>
</body>
</html>

缺點： HTML時間處理程式是html+js無分離！後期不易維護。

DOM0級事件處理程式

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
	</style>
</head>
<body>
	//DOM0級事件處理程式
		<div id="box"></div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			box.onclick = function(){
				
			}
		</script>
</body>
</html>

優點：簡單、具有跨瀏覽器的優勢。
缺點：只能繫結一個事件的處理程式，不能給同一個元素繫結相同的事件處理程式，如果綁定了會有覆蓋現象事件處理程式不會被刪除。需要手動關閉頁面來清除記憶體。

DOM2級事件處理程式

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	//DOM2級事件處理程式
		<div id="box"></div>
		<script type="text/javascript">
		//布林值預設為false是處於冒泡階段，為true是處於捕獲階段。
		//addEventListner(事件名,處理程式的函式,布林值)
		//優點：不會像0級事件處理程式發生覆蓋現象。
		//缺點:IE8瀏覽器不支援2級事件處理程式的。
		var box = document.getElementById("box");
		box.addEventListener('click',function(){
			this.innerHTML += 1;
		},false);
		box.addEventListener('click',function(){
			this.innerHTML += 2;
		},false);
		</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	//DOM0級事件處理程式
		<div id="box"></div>
		<script type="text/javascript">
		//布林值預設為false是處於冒泡階段，為true是處於捕獲階段。
		//addEventListner(事件名,處理程式的函式,布林值)
		//優點：不會像0級事件處理程式發生覆蓋現象。
		//缺點:IE8瀏覽器不支援2級事件處理程式的。
		var box = document.getElementById("box");
		//監聽函式傳參，可以用匿名函式來包裝一個監聽函式。
		box.addEventListener('click',function(){
			test(123);
		},false);
		function test(x){
			alert(x);
		}
		</script>
</body>
</html>

DOM2級事件處理程式移除事件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	//DOM0級事件處理程式
		<div id="box"></div>
		<script type="text/javascript">
		var box = document.getElementById("box");
		//新增事件的監聽者
		function handler(){
			this.innerHTML += 1;
		}
		box.addEventListener('click',handler,false);
			
		//正確移除事件的方式
		BOX.removeEventListener('click',handler,false);
		
		</script>
</body>
</html>

IE事件處理程式

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	//DOM0級事件處理程式
		<div id="box"></div>
		<script type="text/javascript">
		//IE attachEvent()  detachEvent()
		var box = document.getElementById("box");
		//IE11不支援。IE8不支援this
		box.attachEvent('onclick',function(){
			this.innerHTML += 1;
		},false);
		</script>
</body>
</html>

解決IE8中this無法使用的問題

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	//DOM0級事件處理程式
		<div id="box"></div>
		<script type="text/javascript">
		//IE attachEvent()  detachEvent()
		var box = document.getElementById("box");
		box.attachEvent('onclick',function(){
			//只能用元素物件 不能使用this
			box.innerHTML += 1;
		},false);
		</script>
</body>
</html>

優點:IE9以上支援相同事件處理程式對同一個元素進行事件處理不會發生覆蓋現象，資料會以正向的方式展示。
IE8支援相同事件處理程式對同一個元素進行事件處理，不會發生覆蓋現象，但是資料是以倒序的形式展示。

IE事件處理程式移除事件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	//DOM0級事件處理程式
		<div id="box"></div>
		<script type="text/javascript">
		//IE attachEvent()  detachEvent()
		var box = document.getElementById("box");
		function handler(){
			box.innerHTML += 1;
		}
		box.attachEvent('onclick',handler);
		box.detachEvent('onclick',handler);
		</script>
</body>
</html>

事件繫結相容寫法

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<button type="button" id="btn">你過來啊</button>
	<script type="text/javascript">
		//DOM2級事件處理程式  addEventListener()  IE8不支援。 ie提供了attachEvent()做相容
		var btn = document.getElementById("btn");
		//btn.attachEvent('onclick',fn,false);
		addEvent(btn,'click',function(){
			console.log(this.innerHTML);
		})
		function addEvent(target,eventType,handler){
			if(target.addEventListener){
				//chrome ff safari
				target.addEventListener(eventType,handler,false);
			}else{
				target.addEvent('on'+eventType,handler,false);
			}
		}
	</script>
</body>
</html>

改變this指向

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<button type="button" id="btn">你過來啊</button>
	<script type="text/javascript">
		//DOM2級事件處理程式  addEventListener()  IE8不支援。 ie提供了attachEvent()做相容
		var btn = document.getElementById("btn");
		//btn.attachEvent('onclick',fn,false);
		addEvent(btn,'click',function(){
			console.log(this.innerHTML);
		})
		function addEvent(target,eventType,handler){
			if(target.addEventListener){
				//chrome ff safari
				target.addEventListener(eventType,handler,false);
			}else{
				target.addEvent('on'+eventType,handler,false);
			}
		}
		console.log(this)l//window
		var obj = {
			innerHTML: 'XXX';
		}
		function fn(){
			console.log(this.innerHTML);
		}
		//call 方法可以改變this指向問題
		fn.call(obj);
	</script>
</body>
</html>

事件的呼叫順序

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
		<style>
			#box{
				width: 200px;
				height: 200px;
				background-color: green;
			}
		</style>
</head>
<body>
	<div id="box" onclick="this.innerHTML += 'html\n'"></div>
	<script type="text/javascript">
		var box = document.getElementById("box");
		//DOM0級
		box.onclick = function(){
			this.innerHTML +='DOM0級\n'
		}
		//DOM2級
		if(box.addEventListener){
			box.addEventListener('click',function(){
				this.innerHTML += 'DOM2級\n'
			},false)
		}
		//IEbox.
		if(box.attachEvent){
			box.attachEvent('click',function(){
				this.innerHTML += 'ie\n'
			},false)
		}
	</script>
</body>
</html>

總結：相同點：如果同時出現HTML事件處理程式和DOM0級事件處理程式。DOM0級會覆蓋HTML事件處理程式。
不同點： chrome safari fixfox瀏覽器以及IE11寄過 DOM0級DOM2級
IE9 IE10 結果為DOM0級 DOM2級 IE
IE8 結果為DOM0級 IE

事件物件

如何獲取事件物件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		//如何獲取事件物件
		//事件目標
		//事件代理
		//事件冒泡
		//事件流階段  eveentPhase
		//取消預設事件
		//相容性
		window.onload = function(){
			var box = document.getElementById("box");
			//event物件時時間處理物件的第一個引數 ie8不相容
			box.onclick = function(e){
				box.innerHTML += e;
			}
		}
		//可以直接使用event變數
		box.onclick = function(){
			this.innerHTML += event;
		}
		//相容寫法
		box.onclick = function(e){
			e = e || event;
			this.innerHTML  = e;
		}
	</script>
</body>
</html>

時間目標物件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<ul id="box">
		<li class="item">1</li>
		<li class="item">2</li>
	</ul>
	<script type="text/javascript">
		//currentTarget   target和srcElement
		var box = document.getElementById("box");
		box.onclick = function(e){
			e = e || window.event;
			console.log(e);
			var items = document.getElementsByTagName('li');
			items[0].innerHTML = e.currentTarget;
			
		}
	</script>
</body>
</html>

target屬性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<ul id="box">
		<li class="item">1</li>
		<li class="item">2</li>
	</ul>
	<script type="text/javascript">
		//currentTarget   target和srcElement
		//currentTarget屬性返回事件當前所在的節點，正在執行的監聽函式所繫結的節點。
		var box = document.getElementById("box");
		/*box.onclick = function(e){
			e = e || window.event;
			console.log(e);
			var items = document.getElementsByTagName('li');
			items[0].innerHTML = e.currentTarget;
			
		}
		*/
	   //target屬性
	   box.onclick = function(){
		   e = e|| window.event;
		   console.log(e.target);
	   }
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<ul id="box">
		<li class="item">1</li>
		<li class="item">2</li>
	</ul>
	<script type="text/javascript">
		//currentTarget   target和srcElement
		//currentTarget屬性返回事件當前所在的節點，正在執行的監聽函式所繫結的節點。
		var box = document.getElementById("box");
		/*box.onclick = function(e){
			e = e || window.event;
			console.log(e);
			var items = document.getElementsByTagName('li');
			items[0].innerHTML = e.currentTarget;
			
		}
		*/
	   //target屬性返回的是事件的實際目標物件
	   box.onclick = function(e){
		   e = e|| window.event;
		   console.log(e.target);
		   console.log(e.target==this);
		   //this物件跟e.currentTarget屬性是一致的。
		   console.log(e.currentTarget==this);
	   }
	</script>
</body>
</html>

事件代理

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
			overflow: hidden;
			margin-top: 80px;
		}
		ul li{
			float:left;
			width:100px;
			height:30px;
			line-height:30px;
			color:#fff;
			background-color: #000;
			margin:0 10px;
			
		}
	</style>
</head>
<body>
	<ul id="box">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<script type="text/javascript">
		window.onload = function(){
			//1.常規方法實現
			//獲取標籤
			var lis = document.getElementsByTagName('li');
			for(var i = 0; i < lis.length; i++){
				lis[i].onmousemover = function(){
					this.style.backgroundColor = 'blue';
				}
				lis[i].onmouseout = function(){
					this.style.backgroundColor = 'blank';
				}

			}
			
		}
		//事件代理的方式實現
		var box = document.getElementById("box");
		box.onmousemover = function(e){
			e = e || window.event;
			var target = e.target || e.srcElement;
			target.style.backgroundColor = 'blue';
		}
		box.onmouseout = function(e){
			e = e|| window.event;
			var target = e.target || e.srcElement;
			target.style.backgroundColor = 'green';
		}
	</script>
	
</body>
</html>

給未來事件繫結代理

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
			overflow: hidden;
			margin-top: 80px;
		}
		ul li{
			float:left;
			width:100px;
			height:30px;
			line-height:30px;
			color:#fff;
			background-color: #000;
			margin:0 10px;
			
		}
	</style>
</head>
<body>
	<ul id="box">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<script type="text/javascript">
		//給未來的元素繫結事件，使用事件代理
		var box = document.getElementById("box");
		box.onmousemover = function(e){
			e = e || window.event;
			var target = e.target || e.srcElement;
			target.style.backgroundColor = 'blue';
		}
		box.onmouseout = function(e){
			e = e || window.event;
			var target = e.target || e.srcElement;
			target.style.backgroundColor = 'blank';
		}
	</script>
	
</body>
</html>

事件冒泡
bubbles
canceBubble
stopPropagation
stopImmediatePropagation

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
			overflow: hidden;
			margin-top: 80px;
		}
		ul li{
			float:left;
			width:100px;
			height:30px;
			line-height:30px;
			color:#fff;
			background-color: #000;
			margin:0 10px;
			
		}
	</style>
</head>
<body>
	<button type="button" id="btn" style="height:300px;width: 200px;">按鈕</button>
	<input type="text" name="" id="text" value="" />
	<script type="text/javascript">
		//bubbles返回的是一個布林值  表示當前事件是否會冒泡.只讀
		//大部分事件都會冒泡！但是focus blur scroll 事件不會冒泡
	var btn = document.getElementById('btn');
	var test = document.getElementById("text");
	btn.onclick = function(e){
		e = e || window.event;
		console.log(e.bubbles);
	} 
	test.onfocus = function(e){
		e = e || window.enent;
		console.log(e.bubbleds);
	}
	
	
	//stopPropagation()表示取消事件的進一步冒泡！無返回值
	//缺點 無法阻止同一事件的其他的監聽函式被呼叫。
	//ie8不支援
	btn.onclick = function(e){
		e = e || window.event;
		//阻止冒泡
		e.stopPropagation();
		this.innerHTML = '阻止冒泡';
	}
	document.body.onclick = function(e){
		e = e || window.event;
		console.log('body');
	}
	
	</script>
	
</body>
</html>

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
			overflow: hidden;
			margin-top: 80px;
		}
		ul li{
			float:left;
			width:100px;
			height:30px;
			line-height:30px;
			color:#fff;
			background-color: #000;
			margin:0 10px;
			
		}
	</style>
</head>
<body>
	<button type="button" id="btn" style="height:300px;width: 200px;">按鈕</button>
	<input type="text" name="" id="text" value="" />
	<script type="text/javascript">
		//bubbles返回的是一個布林值  表示當前事件是否會冒泡.只讀
		//大部分事件都會冒泡！但是focus blur scroll 事件不會冒泡
	var btn = document.getElementById('btn');
	var test = document.getElementById("text");
	btn.onclick = function(e){
		e = e || window.event;
		console.log(e.bubbles);
	} 
	test.onfocus = function(e){
		e = e || window.enent;
		console.log(e.bubbleds);
	}
	
	
	//stopPropagation()表示取消事件的進一步冒泡！無返回值
	//缺點 無法阻止同一事件的其他的監聽函式被呼叫。
	//ie8不支援
	btn.onclick = function(e){
		e = e || window.event;
		//阻止冒泡
		e.stopPropagation();
		this.innerHTML = '阻止冒泡';
	}
	document.body.onclick = function(e){
		e = e || window.event;
		console.log('body');
	}
	//stopImmediatePropagation()表示取消事件的進一步冒泡！無返回值
	//缺點 無法阻止同一事件的其他的監聽函式被呼叫。
	//ie8不支援
	btn.onclick = function(e){
		e = e || window.event;
		//阻止冒泡
		e.stopImmediatePropagation();
		this.innerHTML = '阻止冒泡';
	}
	btn.addEventListener('click',function(e){
		e = e || window.event;
		e.stopImmediatePropagation();
		this.innerHTML = '修改了'
	},false)
	document.body.onclick = function(e){
		e = e || window.event;
		console.log('body');
	}
	
	
	</script>
	
</body>
</html>

cancelBubble

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		ul{
			list-style: none;
			overflow: hidden;
			margin-top: 80px;
		}
		ul li{
			float:left;
			width:100px;
			height:30px;
			line-height:30px;
			color:#fff;
			background-color: #000;
			margin:0 10px;
			
		}
	</style>
</head>
<body>
	<button type="button" id="btn" style="height:300px;width: 200px;">按鈕</button>
	<input type="text" name="" id="text" value="" />
	<script type="text/javascript">
		//e.cancelBubble = true; 全瀏覽器都支援，不是標準寫法
		var handler = function(e){
			e = e || window.event;
			if(e.stopPropagation){
				e.stopPropagation();
			}else{
				e.cancelBubble = true;
			}
		}
	</script>
	
</body>
</html>

事件流階段

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<button id="btn">事件流</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		// e.eventPhase 0表示事件沒有發生。1 表示捕獲階段 2 目標階段 3 冒泡階段
		btn.onclick = function(e){
			e = e || window.event;
			this.innerHTML = e.eventPhase + "階段";
		}
		btn.addEventListener('click',function(e){
			e = e || window.event;
			this.innerHTML = e.eventPhase + "階段";
		},true)
	</script>
	
</body>
</html>

取消預設行為

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<a href="javascript:void(0);" id="apeland">xxx</a>
	<a href="javascript:;">000</a>
	<script type="text/javascript">
		//事件物件中兩個方法，阻止預設事件：preeventDefault() returnValue return false;
		var apeland = document.getElementById("apeland");
		apeland.onclick = function(e){
			e = e || window.event;
			//e.preventDefault();//此方法IE8瀏覽器不支援。阻止預設事件
			//阻止預設事件 ff ie8以上不支援
			//e.returnValue = false;
			this.innerHTML = 'asdada';
		}
		//相容寫法
		if(e.preventBubble){
			e.preventDefault();
		}else{
			e.returnValue = false;
		}
	</script>
</body>
</html>

阻止冒泡
e.stopPropagation
阻止預設事件
e.preventDefault
阻止預設事件
e.returnValue
技巧 return false能阻止預設事件
return false;
returnValue相容IE8以下的瀏覽器

滑鼠事件物件屬性

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		#box{
			width:200px;
			height: 200px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script type="text/javascript">
		//座標位置
		//事件物件中提供了clientX/Y, x/y  offsetX/Y  screenX/Y
		var box = document.getElementById("box");
		box.onmousemove = function(e){
			e = e || window.event;
			console.log(e);
			this.innerHTML = 'clientX:${e.clientX};clientY:${e.clientY};X:${e.x};Y:$(e.y);''
			this.innerHTML = 'screenX:${e.screenX};screenY:${e.screenY};';
			this.innerHTML = 'pageX:${e.pageX};pageY:${e.pageY};';
		}
		
	</script>
</body>
</html>

clientX、clientY 和 x、y相當於瀏覽器的x軸和y軸的距離
screenX、screenY 相當於顯示器螢幕的x軸和y軸的距離

事件流
描述的是從頁面接收事件的順序
IE事件流失事件冒泡流
Netscape的事件流是事件捕獲流

事件流階段

事件捕獲階段
處於目標階段
事件冒泡階段

事件捕獲階段：從最不具體的節點 window、document接收事件，往具體的節點進行傳播
事件冒泡階段：從具體的節點進行接收事件，逐級往上傳遞到最不具體的節點
事件物件
e.eventPhase 描述事件發生的階段
事件捕獲階段 1
處於目標階段 2
事件冒泡階段 3
事件處理程式

HTML 事件處理程式
DOM0級事件處理程式
2.1 btn.onclick = function(e){
e = e || window.event;
}
//有事件覆蓋現象
btn.onclick = function(e){
e = e || window.event;
}
DOM2級事件處理程式
btn.addEventListener('click',function(){},false);
btn.removeEventListener('click'function(){},false)
var handler = function(){
...
}
btn.addEventListener('click',handler,false);
btn.removeEventListener('click',handler,false)
IE事件處理程式
btn.attachEvent('onclick',function(){
//在ie中小心使用this！這個this指向window

})

btn.detachEvent('onclick'function(){

})
//處理this的指向問題

事件目標
e.currentTarget === this

e.target
e.srcElement
//相容性程式碼
var target = e.target || e.secElement;

事件代理也叫事件委託
//給未來的元素繫結事件，使用事件代理
var box = document.getElementById("box");
box.onmousemover = function(e){
e = e || window.event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'blue';
}

取消預設事件
e.preventDefault(); IE8瀏覽器不相容

e.returnValue = false; IE8相容

return false;

事件冒泡

e.bubbles
blur focus scroll 三個事件的返回值為false

e.stopPropagation(); 常用
e.stopImmediatePropagation;
e.cancleBubble = true;
阻止事件冒泡相容性的寫法

var hadler = function(e){
	e = e || window.event;
	(ife.stopPropagation){
		e.stopPropagation();
	}else{
		e.cancleBubble = true;
	}
}

事件物件彙總的屬性座標位置
clientX clientY x y
相對於當前瀏覽器（有效的瀏覽器區域）的X軸和Y軸的距離

screenX screenY
相對於顯示器螢幕的X軸和Y軸的距離

pageX pageY
相對於頁面的x軸和y軸的距離，如果有滾動條包含整個頁面

offsetX offsetY
相對於事件源的x軸和Y軸的距離

放大鏡案例

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#box{
			width: 430px;
			height: 430px;
			bprder 1px solid #DDDDDD;
			position: relative;
			margin: 50px;
		}
		#small_box{
			width: 430px;
			height: 430px;
			position: relative;
		}
		#small_box #mask{
			position: absolute;
			width: 210px;
			height: 210px;
			background:url(放大鏡圖片) repeat;
			top: 0;
			left: 0;
			display: none;
		}
		#big_box{
			position: absolute;
			left:440px;
			top: 0;
			width: 430px;
			height: 430px;
			border 1px solid #ddd;
			overflow: hidden;
			display: none;
		}
		#big_box img{
			position: absolute;
			z-index: 5;
		}
	</style>
</head>
<body>
	<div id="box">
		<div id="small_box">
			<img src="小圖片" alt="">
			<span id="mask">
				
			</span>
		</div>
		<div id="big_box">
			<img src="大圖片" alt="">
		</div>
	</div>

	
	<script type="text/javascript">
		window.onload = function(){
			//獲取需要的標籤
			var box = document.getElementById("box");
			var small_box = box.children[0];
			var big_box = box.children[1];
			var small_img = small_box.children[0];
			var mask = small_box.children[1];
			var big_img = big_box.children[0];
			//監聽滑鼠移入
			small_box.onmousemover = function(){
				//讓遮罩層和大圖顯示出來
				mask.style.display = "block";
				big_box.style.display = 'block';
				//監聽滑鼠移動
				small_box.onmousemove = function(){
					e = e || window.event;
					//求出小盒子移動的水平和垂直的距離
					var moveX = e.clientX - small_box.offsetLeft - box.offsetLeft - mask.offsetWidth * 0.5;
					var moveY =  e.clientY - small_box.offsetTop - box.offsetTop - mask.offsetHeight * 0.5;
					//邊界處理
					if(moveX <0){
						moveX = 0;
					}else if(moveX >= small_box.offsetWidth - mask.offsetWidth){
						moveX = small_box.offsetWidth - mask.offsetWidth;
					}
					if(moveY <0){
						moveY = 0;
					}else if(moveY >= small_box.offsetHeight - mask.offsetHeight){
						moveY = small_box.offsetHeight - mask.offsetHeight;
					}
									
				
					//讓小盒子移動起來
					mask.style.left = moveX + 'px';
					mask.style.top = moveY + 'px';
					//讓大圖移動起來
					//公司： moveX/大圖移動的距離？？？ = (small_box寬度-mask寬度)/（big_img寬度-small_box寬度)
					var x = moveX / (small_box.offsetWidth - mask.offsetWidth);
					var y = moveY / (big_img.offsetWidth - big_box.offsetWidth);
					big_img.style.left = - x * (big_img.offsetWidth - big_box.offsetWidth) + 'px';
					big_img.style.top = - y * (big_img.offsetHeight - big_box.offsetHeight) + 'px';
				}
				small_box.onmouseout = function(){
					mask.style.display = 'none';
					big_box.style.display = 'none';
				}
			}
		}
		
	</script>
</body>
</html>

SpringBoot War包形式部署到外部Tomcat

事件

事件冒泡流

事件捕獲流

事件處理程式

事件繫結相容寫法

事件的呼叫順序

事件物件

如何獲取事件物件

時間目標物件

事件代理

滑鼠事件物件屬性

放大鏡案例

SpringBoot War包形式部署到外部Tomcat

SpringBoot打成war包，部署到Tomcat伺服器

【轉】 SpringBoot war包部署到Tomcat伺服器

springBoot專案打成war包後部署tomcat無法訪問resources目錄下靜態資原始檔

如何基於SpringBoot部署外部Tomcat過程解析

IDEA:將使用springboot技術開發的web專案，打成war包，並使用tomcat釋出

SpringBoot專案以jar包形式部署到雲伺服器

IDEA建立的SpringBoot專案打包成war包並部署到伺服器上

SpringBoot專案打war包，部署伺服器

使用eclipse將專案打成war包並部署至本地Tomcat伺服器

linux(centos8):用systemctl管理war包形式的jenkins(java 14 / jenkins 2.257)

Jenkins部署war包和部署jar包的詳細步驟

Centos7上一次War包的部署與執行

在linux中搭建完整環境WAR包教育部署

linux中搭建完整環境War包教育部署

springboot使用war包部署到外部tomcat過程解析

SPRINGBOOT-把WEB專案打成WAR包部署到外部TOMCAT

springboot 整合外部tomcat war包部署方式

SpringBoot打war包，放Tomcat部署啟動報錯

SpringBoot打成war包在tomcat或wildfly下執行的方法

SpringBoot War包形式部署到外部Tomcat

事件

事件冒泡流

事件捕獲流

事件處理程式

事件繫結相容寫法

事件的呼叫順序

事件物件

如何獲取事件物件

時間目標物件

事件代理

滑鼠事件物件屬性

放大鏡案例

相關推薦