事件(JavaScript中的事件)
事件的型別
事件的定義
指的是文件或者瀏覽器視窗中發生的一些特定互動瞬間。我們可以通過偵聽器(或者處理程式)來預定事件,以便事件發生的時候執行相應的程式碼。
事件型別
事件型別是一個用來說明發生什麼型別事件的字串。像滑鼠懸浮,按下鍵盤等。
事件目標
事件目標是發生的事件或與之相關的物件。當講事件時,我們必須同時指定型別和目標。像 window 上的 load 事件或者連結的 click 事件。
事件處理程式或事件監聽程式
我們使用者在頁面中進行的點選這個動作,滑鼠移動的動作,網頁頁面載入完成的動作等,都可以稱之為事件名稱,即:click、mousemove、load 等都是事件的名稱。
響應某個事件的函式則稱為事件、處理程式,或者叫做事件偵聽器。
事件物件
事件物件是與特定事件相關且包含有關該事件詳細資訊的物件。事件物件作為引數傳遞給事件處理程式函式。
所有的事件物件都有用來指定事件型別的 type 屬性和指定事件目標的 target 屬性。每個事件型別都為其相關的事件物件定義一組屬性。
事件傳播
事件傳播是瀏覽器決定那個物件觸發其事件處理程式的過程
事件模型
內聯模型
這種模型是最傳統接單的一種處理事件的方法。在內聯模型中,事件處理函式是 HTML 標籤的一個屬性,用於處理指定事件。
雖然內聯在早期使用較多,但它是和 HTML 混寫的,並沒有與 HTML 分離。
指令碼模型
由於內聯模型違反了 HTML 與 JavaScript 程式碼層次分離的原則。為了解決這個問題,我們可以在 JavaScript 中處理事件。
這種處理方式就是指令碼模型。
DOM2 模型
“DOM2 級事件”定義了兩個方法,用於新增事件和刪除事件處理程式的操作:
addEventListener(), removeEventListener()。所有 DOM 節點中都包含這兩個方法,並且它們都接受 3 個引數;事件名、函式、冒泡或捕獲的布林值(true 表示捕獲,false 表示冒泡)。
傳統的事件型別
滑鼠事件
HTML文件的head部分的JavaScript程式碼
<script type="text/javascript">
//滑鼠事件
/* onclick: 單擊事件 僅滑鼠左鍵按下
ondblclick: 雙擊事件
onmouseenter: 滑鼠懸浮
onmouseover: 滑鼠懸浮
onmousedown: 滑鼠按鈕被按下 滑鼠左右鍵皆可
onmouseleave: 滑鼠離開
onmouseout: 滑鼠離開
onmouseup: 滑鼠按鍵被鬆開
onmousemove: 滑鼠移動
onmousewheel: 滑鼠滑輪事件 */
window.onload=function(){
//獲取頁面元素
//onclick: 單擊事件 僅滑鼠左鍵按下
var myClick=document.getElementsByClassName('div1')[0];
myClick.onclick=function(){
myClick.style.background="skyblue";
alert('你單擊了按鈕');
}
//ondblclick: 雙擊事件
var myDblclick=document.getElementsByClassName('div1')[1];
myDblclick.ondblclick=function(){
myDblclick.style.background="pink";
alert('你雙擊了按鈕');
}
//onmouseenter: 滑鼠懸浮
var myMouseEnter=document.getElementsByClassName('div1')[2];
myMouseEnter.onmouseenter=function(){
myMouseEnter.style.background="lawngreen";
alert('滑鼠懸浮(onmouseenter)');
}
//onmouseenter: 滑鼠懸浮
var myMouseOver=document.getElementsByClassName('div1')[3];
myMouseOver.onmouseover=function(){
myMouseOver.style.background="red";
alert('滑鼠懸浮(onmouseenter)');
}
//onmousedown: 滑鼠按鈕被按下 滑鼠左右鍵皆可
var myMouseDown=document.getElementsByClassName('div1')[4];
myMouseDown.onmousedown=function(){
myMouseDown.style.background="yellow";
alert('滑鼠按鈕被按下');
}
//onmouseleave: 滑鼠離開
var myMouseLeave=document.getElementsByClassName('div1')[5];
myMouseLeave.onmouseleave=function(){
myMouseLeave.style.background="hotpink";
alert('滑鼠離開(onmouseleave)');
}
//onmouseout: 滑鼠離開
var myMouseOut=document.getElementsByClassName('div1')[6];
myMouseOut.onmouseout=function(){
myMouseOut.style.background="cornflowerblue";
alert('滑鼠離開(onmouseout)');
}
//onmouseup: 滑鼠按鍵被鬆開
var myMouseUp=document.getElementsByClassName('div1')[7];
myMouseUp.onmouseup=function(){
myMouseUp.style.background="tomato";
alert('滑鼠按鍵被鬆開');
}
//onmousemove: 滑鼠移動
var myMouseMove=document.getElementsByClassName('div1')[8];
myMouseMove.onmousemove=function(){
myMouseMove.style.background="orangered";
alert('滑鼠移動');
}
//onmousewheel: 滑鼠滑輪事件
var myMouseWheel=document.getElementsByClassName('div1')[9];
myMouseWheel.onmousewheel=function(){
myMouseWheel.style.background="plum";
alert('滑鼠滑輪事件');
}
}
</script>
body中的程式碼塊
<button class="div1">滑鼠單擊</button>
<button class="div1">滑鼠雙擊</button>
<button class="div1">滑鼠懸浮(onmouseenter)</button>
<button class="div1">滑鼠懸浮(onmouseover)</button>
<button class="div1">滑鼠按鈕被按下</button>
<button class="div1">滑鼠離開(onmouseleave)</button>
<button class="div1">滑鼠離開(onmouseout)</button>
<button class="div1">滑鼠按鍵被鬆開</button>
<button class="div1">滑鼠移動</button>
<button class="div1">滑鼠滑輪事件</button>
鍵盤事件
keydown:按鍵按下
keyup:按鍵擡起
keypress:按鍵按下擡起
body中的程式碼塊
input id="name" type="text" onkeydown="myKeyDown()" onkeyup="myKeyUp()">
HTML文件的head部分的JavaScript程式碼
// keydown:按鍵按下
// keyup:按鍵擡起
/*輸出輸入的字元*/
function myKeyDown() {
console.log(document.getElementById('name').value);
}
/*按鍵結束,字型轉換為大寫*/
function myKeyUp() {
var text1 = document.getElementById('name').value;
document.getElementById('name').value = text1.toUpperCase();
}
事件物件 Event
JavaScript的Event物件用來描述JavaScript事件,Event代表事件狀態,如事件發生的元素,鍵盤狀態,滑鼠位置和滑鼠按鈕狀態。一旦事件發生,便會生成Event物件,如單擊一個按鈕,瀏覽器的記憶體中就產生相應的event物件。
Event物件的主要屬性和方法、
Event是JavaScript的重要事件,event代表事件的狀態,專門負責對事件的處理,其屬性和方法能幫助使用者完成很多和使用者互動的操作。
type:事件的型別,就是HTML標籤屬性中,沒有on字首之後的字串,例如Click就代表單擊事件。
srcElement:事件源,就是發生事件的元素
button:聲明瞭被按下的滑鼠鍵,是一個整數。0代表沒有按鍵,1代表滑鼠左鍵,2代表滑鼠右鍵,4代表滑鼠的中間鍵,如果按下了多個滑鼠鍵,就把這些值加在一起,所以3就代表左右鍵同時按下。
clientX/clientY:是指事件發生的時候,滑鼠的橫縱座標,返回的是整數,它們的值是相對於包容視窗的左上角生成的。
offsetX/offsetY:滑鼠指標相對於源元素位置,可確定單擊image物件的哪個畫素。
altKey,ctrlKey,shiftKey:指滑鼠事件發生時,是否同時按住了Alt,Ctrl或者shift鍵,返回一個布林值。
keyCode:返回keydown和keyup事件發生時,按鍵的程式碼以及keypress事件的Unicode字元。
//JavaScript程式碼塊
window.onload=function(){
var text1=document.getElementById('txt1');
text1.onkeypress=function(event){
alert(event.keyCode);
}
}
//body中的程式碼
<input type="text" id="txt1" />
fromElement、toElement:前者是指mouseover事件移動過的文件元素,後者指在mouseout事件中滑鼠移動到的文件元素。
表單事件
onsubmit 提交事件
onfocus 獲取焦點事件
onblur 失去焦點事件
提交事件例子
<!--JavaScript程式碼塊-->
<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);
//
// }
document.getElementById('form1').onsubmit=function(){
var name=document.form1.text1.value;
alert(name);
}
}
</script>
<!--body中的程式碼-->
<body>
<form name="form1" action="" method="post" id="form1">
<input type="text" value="" name="text1" />
<br />
<input type="submit" name="submit_01" value="提交"/>
</form>
</body>
獲取焦點和失去焦點例子
<!--JavaScript程式碼塊-->
<script type="text/javascript">
//問題:滑鼠離開(失去焦點事件)文字框1的時候,將其文字框值轉換為大寫
//onblur: 表示的是失去焦點事件
function blur_01(value){
// alert(value);
//函式之間的呼叫
TextUpperCase(value); //在一個函式中呼叫另外的一個函式
}
//以下這個函式是用來轉換為大寫的函式
function TextUpperCase(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>
<!--body中的程式碼-->
<!--blur_01(this.value): this指向的是事件的目標 在這裡是第一個input文字框-->
<p>請輸入你的英文名字:
<input type="text" id="fname" onfocus="focus_01('skyblue');" onblur="blur_01(this.value)">
</p>
<p>請輸入你的年齡:
<input type="text" id="age">
</p>
2018年12月13日17:55:05