與瀏覽器進行交互的時候瀏覽器就會觸發各種事件。比如當我們打開某一個網頁的時候，瀏覽器加載完成了這個網頁，就會觸發一個 load 事件；當我們點擊頁面中的某一個“地方”，瀏覽器就會在那個“地方”觸發一個 click 事件。
這樣，我們就可以編寫 JavaScript，通過監聽某一個事件，來實現某些功能擴展。例如監聽 load 事件，顯示歡迎信息，那么當瀏覽器加載完一個網頁之后，就會顯示歡迎信息。
基礎事件操作
監聽事件
瀏覽器會根據某些操作觸發對應事件，如果我們需要針對某種事件進行處理，則需要監聽這個事件。監聽事件的方法主要有以下幾種：
1,HTML 內聯屬性（避免使用）on+事件動作( onclick )
2,DOM 屬性綁定 on+事件動作( onclick )
2,使用事件監聽函數 事件動作( click ) 不需要添加on
HTML 內聯屬性（避免使用）
HTML 元素里面直接填寫事件有關屬性，屬性值為 JavaScript 代碼，即可在觸發該事件的時候，執行屬性值的內容。
<button onclick="event()">點擊這個按鈕</button>
function event(){
alert('HTML 內聯屬性')
}
DOM 屬性綁定
也可以直接設置 DOM 屬性來指定某個事件對應的處理函數，這個方法比較簡單：
var dd = document.getElementById('id')
dd.onclick = function(){
alert('你點擊了這個按鈕');
};
上面代碼就是監聽 element 節點的 click 事件。它比較簡單易懂，而且有較好的兼容性。但是也有缺陷，因為直接賦值給對應屬性，如果你在后面代碼中再次為 element 綁定一個回調函數，會覆蓋掉之前回調函數的內容。
雖然也可以用一些方法實現多個綁定，但還是推薦下面的標準事件監聽函數。
使用事件監聽函數
標準的事件監聽函數如下：
element.addEventListener(<event-name>, <callback>, <use-capture>);
var dd = document.getElementById('id')
dd.addEventListener('click',function(){
alert('使用事件監聽函數')
})
用標準事件監聽函數改寫上面的例子：
var btn = document.getElementsByTagName('button');
btn[0].addEventListener('click', function() {
alert('你點擊了這個按鈕');
}, false);
這里最好是為 HTML 結構定義個 id 或者 class 屬性，方便選擇，在這里只作為演示使用。
移除事件監聽
當我們為某個元素綁定了一個事件，每次觸發這個事件的時候，都會執行事件綁定的回調函數。如果我們想解除綁定，需要使用 removeEventListener 方法：
var dd = document.getElementById('id')
dd .removeEventListener('click',function(){
alert('移除事件監聽')
});
需要注意的是，綁定事件時的回調函數不能是匿名函數，必須是一個聲明的函數，因為解除事件綁定時需要傳遞這個回調函數的引用，才可以斷開綁定。例如：
var fun = function() { // function logic};
element.addEventListener('click', fun,false);
element.removeEventListener('click', fun, false);
pc電腦端 事件動作 （jquery一樣）
| 事件屬性 | 當發生以下情況，出現此事件 | 重要性 |
| -- | -- |
| onclick | 點擊某個對象的時候 | 重要 |
| onchange | 用戶改變域的內容 | 重要 |
| onload | 某個頁面或圖像被完成加載 | 重要 |
| onmousemove | 鼠標被移動 | 重要 |
| onmousedown | 某個鼠標按鍵被按下 | 一般 |
| onmouseout | 鼠標從某元素移開 | 一般 |
| onmouseover | 鼠標被移到某元素之上 | 一般 |
| onmouseup | 某個鼠標按鍵被松開 | 一般 |
| onsubmit | 提交按鈕被點擊 | 一般 |
| onreset | 重置按鈕被點擊 | 一般 |
| onresize | 窗口或框架被調整尺寸 | 一般 |
| onfocus | 元素獲得焦點 | 一般 |
| onblur | 元素失去焦點 | 一般 |
| ondblclick | 鼠標雙擊某個對象 | 不重要 |
| onkeydown | 某個鍵盤的鍵被按下 | 不重要 |
| onkeypress | 某個鍵盤的鍵被按下或按住 | 不重要 |
| onkeyup | 某個鍵盤的鍵被松開 | 不重要 |
| onabort | 圖像加載被中斷 | 不重要 |
| onselect | 文本被選定 | 不重要 |
| onunload | 用戶退出頁面 | 不重要 |
移動端端 事件動作
| 事件屬性 | 當發生以下情況，出現此事件 | 重要性 |
| -- | -- |
| tap | 手指放到屏幕上的時候觸發，zepto等移動端插件 | 重要 |
| touchstart | 手指放到屏幕上的時候觸發 | 重要 |
| touchmove | 手指在屏幕上移動的時候觸發 | 重要 |
| touchend | 手指從屏幕上拿起的時候觸發 | 重要 |
| touchcancel | 系統取消touch事件的時候觸發。不詳 | 不重要 |
這個可以不看，這個是移動端的事件
client / clientY：// 觸摸點相對于瀏覽器窗口viewport的位置
pageX / pageY：// 觸摸點相對于頁面的位置
screenX /screenY：// 觸摸點相對于屏幕的位置
identifier： // touch對象的unique ID
js 手機端觸發事事件、javascript手機端/移動端觸發事件
http://blog.sina.com.cn/s/blog_6d3f840a0101mchu.html
