當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript --- js中的事件
生活随笔
收集整理的這篇文章主要介紹了
javascript --- js中的事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
事件實現松耦合:
// JS和HTML之間的交互是通過事件實現的. // 事件,就是文檔或瀏覽器窗口中發生一些特定的交互瞬間. // 可以使用偵聽器來預定事件,以便事件發生時執行相應的代碼. // 這種在傳統軟件工程中被稱為觀察員模式的模型,支持頁面的行為與頁面的外觀之間的松耦合事件流:
// 多個瀏覽器開發團隊在看待瀏覽器事件上都保持同一個理念 // 當你點擊了某個按鈕,他們都認為單擊事件不僅僅發生在按鈕上 // 換句話說,在單擊按鈕的同時,你也單擊了按鈕的容器元素,甚至也單擊了整個頁面. // 這樣會產生多個事件,按從頁面中接收事件的順序,產生了事件流的概念. // 一個有趣的現象是,IE和Netscape2個開發團隊提出了完全相反的事件流的概念:事件冒泡和事件捕獲事件冒泡:
// IE開發團隊定義的事件流,稱為事件冒泡,即: // 事件開始時由最具體的元素接收,然后逐級向上傳播到較為不具體的節點. <!DOCTYPE html> <html><head><title>Event Bubbling Example</title></head><body><div id="myDiv">Click Me</div></body> </html>// 以上DOM結構中,倘若你點擊了div元素,事件會按如下順序,依次執行: // (1)div > (2)body > (3) html > (4)document // 就像一個泡泡逐漸浮起來...
事件捕獲:
DOM事件流:
事件處理程序:
// 事件:就是用戶或瀏覽器自身執行的某種動作.諸如:click、load和mouseover都是事件的名字. // 事件處理程序:響應事件的函數HTML事件處理程序:
// 某個元素支持的每種事件,都可以使用一個與相應事件處理程序同名的HTML特性來指定. // 例如:要在按鈕被單擊時執行一些JavaScript <input type="button" value="Click Me" onclick="alert('Clicked')" />// 在HTML中定義的事件處理程序既可以包含要執行的具體動作,也可以調用在頁面其他地方定義的腳本, <script>function showMessaget(){alert('Hello Wordl!');}<input type='button' value="Click Me" onclick="showMessage()" /> </script> // 在上面例子中,單擊按鈕就會調用showMessage()函數.這個函數是在一個獨立的<script>元素中定義的,當然也可以是一個外部文件. // 事件處理程序中的代碼在執行時,有權訪問全局作用域中的任何代碼. // 值得一提的是,在使用以上方法定義事件處理程序的同時,會有一個event的局部變量.使用如下將其打印出來: <script>function showEvent(msg){console.log(msg);} </script><input type="button" value="Click Me" onclick="showEvent(event)" /> // 還可以注意到上面input中有個value="Click Me". 可以通過this.value訪問到. <input type="button" value="Click Me" onclick="console.log(this.value)" />參考《JavaScript高級程序設計》(第3版)P346~P349
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的javascript --- js中的事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【原创】MySQL Replay线上流量
- 下一篇： javascript --- DOM0