當前位置：首頁 > 编程语言 > java >内容正文

java

Javascript知识——事件

發布時間：2024/8/24 java 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Javascript知识——事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

O(∩_∩)O~~又是新的一周開始了，今天還是在繼續學習Javascript知識，今天主要講了事件的知識。現在就總結下吧。

事件

事件一般是用于瀏覽器和用戶操作進行交互。最早是 IE 和 Netscape Navigator 中出現，作為分擔服務器端運算負載的一種手段。直到幾乎所有的瀏覽器都支持事件處理。而 DOM2級規范開始嘗試以一種復合邏輯的方式標準化 DOM 事件。IE9、Firefox、Opera、Safari 和Chrome 全都已經實現了“DOM2 級事件”模塊的核心部分。IE8 之前瀏覽器仍然使用其專有事件模型。

JavaScript 有三種事件模型：內聯模型、腳本模型和 DOM2 模型.

內聯模型：傳統接單的一種處理事件的方法，和 HTML 混寫的，并沒有與 HTML 分離。

在 HTML 中把事件處理函數作為屬性執行 JS 函數

<input type="button" value="按鈕" οnclick="box();" /> //執行 JS 的函數//函數不得放到 window.onload 里面，這樣就看不見了

腳本模型:由于內聯模型違反了 HTML 與 JavaScript 代碼層次分離的原則。為了解決這個問題，我們可以在 JavaScript 中處理事件。這種處理方式就是腳本模型。

注：通過匿名函數，可以直接觸發對應的代碼。也可以通過指定的函數名賦值的方式來執行函數(賦值的函數名不要跟著括號)?????????? ?input.onclick = box;???? //把函數名賦值給事件處理函數

事件處理函數：JavaScript 可以處理的事件類型為：鼠標事件、鍵盤事件、HTML 事件。

注：?所有的事件處理函數都會都有兩個部分組成， on + 事件名稱，例如click的事件處理函數是onclick

鼠標事件：頁面所有元素都可觸發

onclick

ondblclick雙擊事件

input.ondblclick = function () { alert(this.value); };

mousedown：當用戶按下了鼠標還未彈起時觸發

input.onmousedown = function () { alert(this.value); };

mouseup：當用戶釋放鼠標按鈕時觸發

input.onmouseup = function () { alert(this.value); };

mouseover：當鼠標移到某個元素上方時觸發

input.onmouseover = function () { alert(this.value); };

mouseout：當鼠標移出某個元素上方時觸發

input.onmouseout = function () { alert(this.value); };

mousemove：當鼠標指針在元素上移動時觸發

input.onmousemove = function () { alert(this.value); };

鍵盤事件：

keydown：當用戶按下鍵盤上任意鍵觸發，如果按住不放，會重復觸發

keypress：當用戶按下鍵盤上的字符鍵觸發，如果按住不放，會重復觸發

keyup：當用戶釋放鍵盤上的鍵觸發

HTML事件：

load：當頁面完全加載后在 window 上面觸發，或當框架集加載完畢后在框架集上觸發

window.onload = function () { alert(‘Hello World’); };

unload：當頁面完全卸載后在 window 上面觸發，或當框架集卸載后在框架集上觸發

window.onunload = function () { alert('Hello World'); };

select：當用戶選擇文本框(input 或 textarea)中的一個或多個字符觸發

input.onselect = function () { alert('Hello World'); };

change：當文本框(input 或 textarea)內容改變且失去焦點后觸發

input.onchange = function () {
alert('Hello World');
};

focus：當頁面或者元素獲得焦點時在 window 及相關元素上面觸發

input.onfocus = function () {alert('Hello World');};

blur：當頁面或元素失去焦點時在 window 及相關元素上觸發

input.onblur = function () {alert('Hello World');};

submit：當用戶點擊提交按鈕在<form>元素上觸發

form.onsubmit = function () {alert('Hello World');}

reset：當用戶點擊重置按鈕在<form>元素上觸發

form.οnreset= function () {alert('Hello World');}

事件對象：事件處理函數的一個標準特性是，以某些方式訪問的事件對象包含有關于當前事件的上下文信息。
事件處理三部分組成：對象.事件處理函數=函數

例：單擊文檔任意處

注：以上程序的名詞解釋：click 表示一個事件類型，單擊。onclick 表示一個事件處理函數或綁定對象的屬性(或者叫事件監聽器、偵聽器)。document 表示一個綁定的對象，用于觸發某個元素區域。function()匿名函數是被執行的函數，用于觸發后執行。

?????? 除了用匿名函數的方法作為被執行的函數，也可以設置成獨立的函數

document.onclick = SayHi; //直接賦值函數名即可，無須括號function SayHi() {alert('Hello World');}

事件對象，我們一般稱作為 event 對象，這個對象是瀏覽器通過函數把這個對象作為參數傳遞過來的。

function SayHi() { //普通空參函數 alert(arguments.length); //沒有得到任何傳遞的參數 } input.onclick = function () { //事件綁定的執行函數 alert(arguments.length); // 得到一個隱藏參數 };

通過上面兩組函數中，我們發現，通過事件綁定的執行函數是可以得到一個隱藏參數的。說明，瀏覽器會自動分配一個參數，這個參數其實就是 event 對象。

上面這種做法比較累，那么比較簡單的做法是，直接通過接收參數來得到即可。

input.onclick = function (evt) { //接受 event 對象，名稱不一定非要 eventvar e = evt || window.event; //實現跨瀏覽器兼容獲取 event 對象 alert(e); //MouseEvent，鼠標事件對象 };

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

事件冒泡，是從里往外逐個觸發。（默認）

事件捕獲，是從外往里逐個觸發。

上面這個例子，是這樣執行的：

阻止事件冒泡：

function stopPro(evt) {var e = evt || window.event;window.event ? e.cancelBubble = true : e.stopPropagation();}

好了，今天就先寫到這里了。。。。O(∩_∩)O~~~

轉載于:https://www.cnblogs.com/ysaw/p/4219943.html

總結

以上是生活随笔為你收集整理的Javascript知识——事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：今天写的上传类，纯练手之作，供新人学习
下一篇： cocoapods Analyzing