JavaScript大廈之JS事件

時間 2019-12-13

原文原文鏈接

一、js事件簡介
事件(Event) 是 JavaScript 應用跳動的心臟，進行交互，使網頁動起來。也是把全部東西粘在一塊兒的膠水。當咱們與瀏覽器中 Web 頁面進行某些類型的交互時，事件就發生了。事件多是用戶在某些內容上的點擊、鼠標通過某個特定元素或按下鍵盤上的某些按鍵。事件還多是 Web 瀏覽器中發生的事情，好比說某個 Web 頁面加載完成，或者是用戶滾動窗口或改變窗口大小。經過使用 JavaScript ，你能夠監聽特定事件的發生，並規定讓某些事件發生以對這些事件作出響應javascript

二、主要做用html

1）、驗證用戶輸入窗體的數據
2）、增長頁面的動感效果 html5

三、事件名稱與事件處理程序(事件偵聽器)
事件源: 誰觸發的事件
事件名: 觸發了什麼事件
事件監聽: 誰管這個事情，誰監視？
事件處理:發生了怎麼辦？java

如咱們用戶在頁面中進行的點擊這個動做，鼠標移動的動做，網頁頁面加載完成的動做等，均可以稱之爲事件名稱，即：click、 mousemove、 load瀏覽器

<body onload="loadWindow();"></body>
    <script>
        function loadWindow() {
            alert("加載窗體");
        }
    </script>

四、處理事件的方式
1）、行內事件（耦合度高）dom

<span id="main" onclick="test();">點我</span>
<script type="text/javascript">
// 此處 click，點擊，是一種事件的名稱，onclick 就叫作事件處理程序。
//下面這段代碼，咱們經過處理程序(onclick)爲 main 這個元素預約了點擊(click)，
//這樣在點擊(click)發生的時候，執行函數中的代碼(彈出一個對話框)。
    function test() {
        alert('別點我。。。 ');
    }
</script>

2）、DOM 0級事件（解耦）函數

<span id="main" onclick="test();">點我</span>
    <script>
        //dom 事件級處理 
        var obj = document.getElementById("main");
        obj.onclick = function() {
            alert('點擊了此處哦！');
        }
        obj.onclick = function() {
            alert('點擊了此處哦 2！');
        }
    </script>

三、DOM2級事件（可爲同一個元素綁定多個同類型事件）this

<span id="main" onclick="test();">點我</span> 
    //dom02 事件級處理：綁定 3 個事件
    <script>
        var obj = document.getElementById("main");
        obj.addEventListener("click", test, false);

        function test() {
            alert(this.innerHTML);
        }
        obj.addEventListener("click", function() {
            alert("第二個事件");
        }, false);
    </script>

以上是咱們對js中事件的處理方式，下節咱們將結合具體的事件演示效果。spa

歡迎閱讀上海尚學堂其餘更多有關Javascript大廈的技術文章：
《JavaScript工做體系中不可或缺的函數》；
《JS之location詳解》；
《JavaScript大廈之JS運算符》；
《JavaScript工做原理：內存管理 + 如何處理4個常見的內存泄露》；
《JavaScript 和 Web 開發都應該知道的10個概念》。。。code