本文實例總結了JavaScript常見事件處理程序。分享給大家供大家參考，具體如下：

事件指的是使用者或者瀏覽器自身執行的某種動作（比如點擊事件）。響應這些事件的函數就叫做事件處理程序（或者叫事件監聽器）。事件處理程序的名字以“on”為前綴，比如 click 事件的事件處理程序就是 onclick。

1 HTML 事件處理程序

如果某個元素支持某個事件，那么它都有一個與相應的事件處理程序同名的 HTML 屬性，我們可以通過這個屬性來指定 JS：

<input type="button" value="點我" onclick="alert('點擊過咯')"/>

因為這里的腳本是嵌入在 HTML 元素的屬性中，所以使用了單引號！

也可以調用在頁面的其他地方定義的腳本：

<input type="button" value="Click me" onclick="showMessage()"><script type="text/javascript">  function showMessage() {    console.log("Hello World!");  }</script>

事件處理程序的代碼在執行時，可以訪問到全局作用域中的任何代碼！

這樣指定的事件處理程序，會創建一個封裝著元素屬性值的函數，它有一個局部變量 event，就是事件對象：

<input type="button" value="點我" onclick="alert(event.type)"/>

通過 event 變量，可以直接訪問事件對象。在這個函數內部，this 值等于事件的目標元素：

<input type="button" value="點我" onclick="alert(this.value)"/>

可以通過這個動態創建的函數，來擴展它的作用域。在這個函數內部，可以訪問 document 以及該元素本身的成員，這個函數是像這樣使用 with 來擴展作用域的：

function(){  with(document){    with(this){      //元素屬性值    }  }}

所以，在事件處理程序中，要訪問自己的屬性就變得很容易啦 O(∩_∩)O~：

<!-- 輸出 “點我” --><input type="button" value="點我" onclick="alert(value)"/>

如果當前元素是一個表單輸入元素，則作用域中還會包含訪問表單元素（父元素）的入口，所以這個函數應該是這樣的：

function(){  with(document){    with(this.form){       with(this){        //元素屬性值       }    }  }}

這樣事件處理程序就無需引用表單元素，就可以直接訪問到表單中的其他字段啦O(∩_∩)O~：

<form method="post">  <input type="text" name="username" value="">  <input type="button" value="Echo Usernmame" onclick="console.log(username.value);"></form>

在 HTML 中直接指定事件處理程序會有這些缺點：