2. 程式人生 > >JavaScript 中的事件介紹以及相容

JavaScript 中的事件介紹以及相容

阿新 • • 發佈：2019-01-08

**JavaScript 中的事件介紹以及相容

  1. 事件型別
    (1)事件的定義
    指的是文件或者瀏覽器視窗中發生的一些特定互動瞬間。我們可以通過偵聽器（或者處理程式）來預定事件，以便事件發生的時候執行相應的程式碼。
    ①事件型別：事件型別是一個用來說明發生什麼型別事件的字串。像滑鼠懸浮，按下鍵盤等。我們也可以把事件型別叫做事件名字，用特定的名字來標識所談論的特定型別的事件
    ②事件目標：事件目標是發生的事件或與之相關的物件。事件是要新增給哪個物件, 常用的事件目標有window,按鈕,文字框,document…
    ​ window表示的是事件的目標
    onload表示的是事件的型別
    =號之後的函式表示的是 事件的處理程式
    window.onload=function(){}
    ③事件處理程式或事件監聽程式：我們使用者在頁面中進行的點選這個動作，滑鼠響應某個事件的函式則稱為事件處理程式，或者叫做事件偵聽器。
    ④事件物件：事件物件是與特定事件相關且包含有關該事件詳細資訊的物件。事件物件作為引數傳遞給事件處理程式函式。所有的事件物件都有用來指定事件型別的 type 屬性和指定事件目標的 target 屬性。每個事件型別都為其相關的事件物件定義一組屬性
    ⑤事件傳播：事件傳播是瀏覽器決定那個物件觸發其事件處理程式的過程。
    (2)事件模型
  1. 內聯模型這種模型是最傳統接單的一種處理事件的方法在內聯模型中，指的是行間的事件,寫入html標籤之中,這種寫法不能保證內容和結構進行分離, 所以不建議使用, 要保證頁面的簡潔性,以及體驗度.
  2. 指令碼模型
    源於內聯模型違反了html和JS的分離原則,為了解決這個問題,所以將處理程式以指令碼的形式嵌入頁面
  3. DOM2 模型
    “DOM2 級事件”定義了兩個方法，用於新增事件和刪除事件處理程式的
    操作：
    addEventListener()和 removeEventListener()。所有 DOM 節點中都包含這兩個方法，並且它們都接受 3 個引數；事件名、函式、冒泡或捕獲的布林值(true 表示捕獲，false 表示冒泡)
    (3)傳統的事件型別
    注意事項:
    所有的事件處理函式都會都有兩個部分組成，on + 事件名稱，例如 click 事的事件處理函式就是：onclick。在這裡，我們主要談論指令碼模型的方式來構建事件，違反分離原則的內聯模式，我們忽略掉。對於每一個事件，它都有自己的觸發範圍和方式，如果超出了觸發範圍和方式，事件處理將失效
    ① 滑鼠事件
    在這裡插入圖片描述

    案例:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//獲取頁面div元素
				var divelment=document.getElementsByClassName('div01')[0];
			    //給獲取到的div元素註冊/新增一個滑鼠點選事件,也可理解為新增一個監聽的處理程式
			   divelment.onclick=function(){ //新增匿名的處理程式
			    	divelment.style.background='pink';
			    }
			    //新增滑鼠雙擊事件
			    divelment.ondblclick=function(){
			    	divelment.style.background='red';
			    }
			    //新增滑鼠按下事件
			    divelment.onmousedown=function(){
			    	divelment.style.borderRadius=30+'px';
			    }
			    //新增滑鼠移動到元素上觸發
			    divelment.onmouseenter=function(){
			    	divelment.style.width=200+'px';
			    }
			    //新增滑鼠移出元素時觸發
			    divelment.onmouseleave=function(){
			    	divelment.style.width=50+'px';
			    }
			    //新增滑鼠被移動
			    divelment.onmousemove=function(){
			    	divelment.style.background='blue';
			    }
			    //新增滑鼠移到某元素之上
			    divelment.onmouseover=function(){
			    	divelment.style.borderRadius=50+'%';
			    }
			    //新增滑鼠從某元素移開
			    divelment.onmouseout=function(){
			    	divelment.style.background='black';
			    }
			    //新增滑鼠按鍵被鬆開
			    divelment.onmouseup=function(){
			    	divelment.style.height=50+'px';
			    }
			    //新增滑鼠滑輪事件
			    divelment.onmousewheel=function(){
			    	divelment.style.background='blueviolet';
			    }
			    //延伸:滑鼠前後滑動改變div的背景顏色
			    divelment.onmousewheel=function(){
					if(event.wheelDelta>0){
						divelment.style.background='blueviolet';
					}else{
						divelment.style.background='pink';
					}
			}
			}
		</script>
	</head>
	<body>
		<div class="div01" style="width: 100px;height:100px; border: 1px solid red;"></div>
	</body>
</html>

②鍵盤事件
在這裡插入圖片描述
案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var text1=document.getElementById('txt1');
				var span=document.getElementById('span1');
				//新增某個鍵盤按鈕被按下
				text1.onkeydown=function(){
					//在鍵盤按下時,將資訊(填入完整的內容)寫進span中
					span.innerHTML='填入完整的內容';
				}
				//新增某個鍵盤按鈕被鬆開
				text1.onkeyup=function(){
					span.innerHTML='填入完整的內容 鬆開發生';
				}
				//新增某個鍵盤按鈕被按下並鬆開     需按回車鍵
				text1.onkeypress=function(){
					span.innerHTML='新增某個鍵盤按鈕被按下並鬆開'
				}
				//案例:(event:表示的是為事件提供資料)獲取上下鍵
				text1.onkeyup=function(event){
//					alert(event.keyCode);
					if(event.keyCode==38){
						alert('使用者按下鍵盤字元 上鍵');
					}else if(event.keyCode==39){
						alert('使用者按下鍵盤字元 右鍵');
					}else if(event.keyCode==40){
						alert('使用者按下鍵盤字元 下鍵');
					}else{
						alert('使用者按下鍵盤字元 左鍵');
					}
				}
					/*text1.onmousemove=function(event){
//					alert(event.pageX);
					//提供滑鼠的位置資訊
					document.write(event.pageX+'<br />');
				}*/
			}
			
		</script>
	</head>
	<body>
		<input type="text" id="txt1" />
		<span id="span1"></span>
	</body>
</html>

③事件物件 Event
什麼是事件物件
在觸發DOM上的某個事件時,會產生一個事件物件event,這個物件中包含所有與事件有關的資訊,包括導致事件的元素,事件的型別以及其他與特定事件相關的資訊
event物件的相容寫法

event 事件物件不能相容所有的瀏覽器，我們一般是採用下面這種方式進行相容。
var oEvent=ev || event; 如果引數不是 ev 而是 event 的時候，相容方式也可以寫成下面這種格式。
document.onclick=function(event){
var oEvent=event || window.event; console.log(oEvent);
測試程式碼:
<script>
window.onload=function(){
document.onclick=function(ev){
var oEvent=ev || event;
console.log(event);
}
</script>

event常用的屬性有哪些?
1,oEvent.type----獲取繫結的事件型別
2,oEvent.target(在低版本中用event.srcElement)----返回觸發事件的元素
3,oEvent.currentTarget(ie低版本中不存在)----表示當前所繫結事件的元素
案例:

<script type="text/javascript">			
	window.onload=function(){
	document.onclick=function(ev){
	//將事件的物件引數ev 或者event新增給變數oEvent;
	var oEvent=ev || event;
	//通過設定oEvent.target 或者oEvent.srcElement 返回觸發事件的元	var onCurrent=oEvent.target || oEvent.srcElement;
	console.log(onCurrent);  //返回結果為:"[object TMLInputElement]"
	//表示當前所繫結事件的元素
	console.log(oEvent.currentTarget); //返回結果為:"[object TMLDocument]"
	console.log(oEvent.type); //輸出結果為:"click"
	}
}
</script>

④目標事件
在這裡插入圖片描述
⑤表單事件
在這裡插入圖片描述
JavaScript 中常用事件的使用案例
onsubmit：表單中的確認按鈕被點選時發生的事件，如下案例。
案例解析：彈出表單中提交的內容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//獲取form表單,從而新增提交事件
				var form=document.getElementById('form1');
				form.onsubmit=function(){
					//表示通過name獲取表單元素的值
					var name=document.form1.text1.value;
					//alert(name);
				}
			}
		</script>
	</head>
	<body>
		<form name="form1" action="" id="form1" method="post">
			<input type="text" value="" name="text1" />
			<br />
			<input type="submit"  name="submit_01" value="提交"/>
		</form>
	</body>
</html>

onblur：在物件失去焦點時發生的事件，onfoucs：在物件獲得焦點時發生的事件，案例為滑鼠離開(失去焦點)文字框1的時候,將其文字框值轉換為大寫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function blur_01(value){
				//函式之間的呼叫
				textupper(value);  //在一個函式中呼叫另外的一個函式
			}
			//以下的這個函式是用來轉換大寫的函式
			function textupper(value){
				document.write(value.toUpperCase());
			}
			function focus_01(color){
//				   document.getElementById('fname').style.background=color;
                var color1=document.getElementById('fname');
                color1.style.background=color;
			}		
		</script>
	</head>
	<body>
		<!--blur_01(this.value):this指向的是事件的目標,這裡是第一個input文字框-->
		<p>請輸入你的英文名字:<input type="text" id="fname" onfocus="focus_01('red');" onblur="blur_01(this.value)"/></p>
		<p>請輸入你的年齡:<input type="text" id="age"/></p>
	</body>
</html>

相關推薦

JavaScript 中的事件介紹以及相容

**JavaScript 中的事件介紹以及相容 事件型別 (1)事件的定義 指的是文件或者瀏覽器視窗中發生的一些特定互動瞬間。我們可以通過偵聽器（或者處理程式）來預定事件，以便事件發生的時候執行相應的程式碼。 ①事件型別：事件型別是一個用來說明發生什麼型別事件的字串。像滑鼠懸浮，

JavaScript中事件的相容(事件的繫結addEventListener/移除removeEventListener,阻止冒泡/預設)

一.事件相容 1.事件繫結:addEventListener 用於註冊事件處理程式(為文件節點).IE 中為 attachEvent,我們為 什麼講addEventListener而不講attachEvent呢?一來attachEvent比較簡單,二來addEventListener才是

javascript中事件流，事件相容，事件繫結

1，事件流 事件流描述的是從頁面中接收事件的順序。 事件流是描述的從頁面接受事件的順序，當幾個都具有事件的元 素層疊在一起的時候，那麼你點選其中一個元素，並不是只有當前被 點選的元素會觸發事件，而層疊在你點選範圍的所有元素都會觸發事 件。事件流包括兩種模式： 冒泡和捕獲。 事件捕獲：

JavaScript中事件的target屬性

button name 點擊事件 .html hasclass alert -c color min target 事件屬性可返回事件的目標節點(哪個 DOM 元素觸發了該事件)，如生成事件的元素、文檔或窗口。 語法：event.target <html> &

JavaScript中事件綁定的三種方式

element blog href 轉載 pre 模型 www. 初學者 進行 JavaScript使得網頁與用戶友好交互，在使用 js 進行時間綁定的時候有三種綁定方式。 第一種：初學者以及普通寫法 1 <div id="dom0"> 2 &

javascript——touch事件介紹與例項演示

前言   諸如智慧手機和平板電腦一類的移動裝置通常會有一（capacitive touch-sensitivescreen），以捕捉使用者的手指所做的互動。隨著行動網路的發展，其能夠支援越來越複雜的應用，web開發者需要一種方法來處理這些事件。例如，幾乎所有的快節

Javascript中事件繫結的函式加括號和不加括號的區別

今天在學習javascript中的時候遇到了一個問題,我將此問題簡化，抽取部分程式碼，如下： 說明:#fname為一個按鈕,test是一個普通函式 test函式 function test() { alert("執行test函式"); }

javascript中的name以及關鍵字

做表單驗證時，將name命名為變數“var name=document.getElementById("name");”,用谷歌瀏覽器 開啟頁面，還未輸入文字時檢測使用者名稱輸入文字長度，應該長度為0的，但是發現沒有什麼卵用，將變數名改為name1之後就好了。 這讓身為小白的我很好奇，

JavaScript中=、==、===以及!=、!==的區別與聯絡

JavaScript中=、==、===以及!=、!==的區別與聯絡   在JavaScript中，“=”代表賦值操作；“==”先轉換型別再比較，“===”先判斷型別，如果不是同一型別直接為false。其中“==”和“===”都可以用在布林表示式中，但兩者有很大的區別，下面對三者進行具體介紹：

JavaScript中scope介紹

對於一個JavaScript初學者（甚至是有經驗的JavaScript開發者）而言，JavaScript語言中關於“域”（scope）的一些概念並不是那麼直白或是容易理解的。由此，這篇文章旨在幫助那些在聽說過諸如域（scope），閉包（closure），關鍵字this，名稱空間（namespace），函式域（

Javascript中事件機制詳解

起JSON和JSONP，想必很多人一開始會認為這兩者是有一定的聯絡的，然而JSON和JSONP雖然只有一個字母的差別，但其實他們根本不是一回事，這讓我想起一句話“JSON和JSONP的區別就是雷鋒和雷鋒塔的區別”，那麼雷鋒和雷鋒塔的有什麼樣的區別呢？當然是沒有區別！！！

Javascript中void介紹

Javascript中void是一個操作符，該操作符指定要計算一個表示式但是不返回值。 void 操作符用法格式如下： 1. javascript:void (expression) 2. javascript:void expression expression 是一個要計算的 Javascript 標

JavaScript原生事件委託以及JQuery事件委託on()的程式碼片段

<!DOCTYPE html> <html> <head><title></title>   <style type="text/css">     .container{       width:10

javascript中事件對象註冊與刪除

ie8 ply 設置 als google 一個 標簽設置 this ... 事件對象 註冊事件 直接給dom對象設置屬性，只能給對象設置一個屬性，如果設置多個事件處理函數，則最後的生效； 給html標簽設置屬性，（若法1和法2同時使用，則法1生效）； 事件註冊 綁定事件

正則表示式簡單介紹以及JavaScript中的使用

什麼是正則 在常見的字串檢索或替換中，我們需要提供一種模式表示檢索或替換的規則。正則表示式使用單個字串來描述、匹配一系列符合某個句法規則的字串。 這裡只講解簡單的內容。 簡單的正則 /abc/ 匹配包含 “abc” 的字串，如 “abcd”

JavaScript 中的函數介紹

所有 calculate 曾經 什麽 乘法 函數表達式 second 數字 brush 簡而言之函數只不過是一組執行某個操作的語句。函數可能會有一些輸入參數（在函數體中使用），並在執行後返回值。 　　JavaScript函數也具有這些特性，但它們不僅僅是常規函數。Java

maven 主要介紹以及 javaee 中構建一詞的概念

maven javaee構建 1、maven 的主要介紹： maven 是 Apache 軟件基金會組織維護的一款自動化構建工具，專註服務於 java 平臺的項目構建和依賴管理。 其功能主要為了應付在實際開發的過程中遇到的下列的問題： a、如果項目非常龐大，就不適合繼續使用packa

javascript中的常用表單事件用法

round onload tel logs () case span onsubmit change 下面介紹幾種javascript中常用的表單事件； 一，onsubmit：表單中的確認按鈕被點擊時發生的事件，如下案例。 案例解析：彈出表單中提交的內容

【RegExp】JavaScript中正則表達式判斷匹配規則以及常用方法

返回 空字符串 tro true 正則表達式 str 本地 大小 表示範圍 字符串是編程時涉及到的最多的一種數據結構，對字符串進行操作的需求幾乎無處不在。 正則表達式是一種用來匹配字符串的強有力的武器。它的設計思想是用一種描述性的語言來給字符串定義一個規則，凡是符合規則的字

javascript中的事件問題的總結

att list 原型鏈 font n) 交互 函數 onclick 定義 一.什麽是事件？ 　　事件就是DOM和瀏覽器之間的交互行為(只要觸發了這個行為，也就相當於觸發了事件)，我們可以通過事件監聽來綁定事件，例如：box.onclick=function(){}，如果我