[toc] ### 自調函數 ``` (function(){ alert(20); }()) ``` ### 鼠標點擊事件 onfocus-->獲取焦點 onblur-->失去焦點 onchange-->當輸入框的內容發生改變的時候觸發 onsubmit-->當表單的submit按鈕被點擊的時候，表單會觸發onsubmit事件 ``` /*簡書搜索欄*/ $("#txt").focus(function(){ $("#txt").animate({width: "300px"}, 500); }) $("#txt").blur(function(){ $("#txt").animate({width: "200px"}, 500); }) ``` ### 鼠標滾動事件 內聯事件: `onclick="go()"` onmouseover--鼠標移入 onmouseout--鼠標移除 onscroll--鼠標滾動 ``` /*獲取滾動距離*/ window.onscroll = function(){ var height = document.documentElement.scrollTop; // var height = window.scrollY; console.log(height); } ``` ### 鍵盤事件 onkeydown-->用戶按下鍵盤上的一個鍵的時候發生 keyCode-->鍵盤對應的編碼 ``` document.onkeydown = function(event){ alert(event.keyCode); } ``` #### 小demo：輸入框字數顯示 ``` <p>你還可以輸入<em id="em" style="color:red">0</em>/300字</p> <textarea id="txt" cols="30" rows="10"></textarea> <script> var em = document.getElementById("em"); var txt = document.getElementById("txt"); txt.onkeydown = function(){ var len = this.value.length; em.innerHTML = len; } </script> ``` ### 阻止默認行為 場景 a, form 阻止默認行為 return false; event.preventDefault(); ``` var a = document.getElementById("test"); a.onclick = function(event){ window.location.href = "https://www.sogou.com"; event.preventDefault(); } ``` #### IE下阻止默認行為： ``` var a = document.getElementById("test"); a.onclick = function(event){ // var event = event || window.event(); var event; try{ // chrome event = event; }catch(err){ // ie9以下 event = window.event(); } window.location.href = "https://www.sogou.com"; event.preventDefault(); } ``` #### IE下點擊獲取當前元素 ``` var test = document.getElementById("test"); test.onclick = function(){ var target; try{ //chrome target = event.target; }catch(err){ //ie9以下 target = window.event.srcElement; } alert(target); } ``` ### 事件冒泡 阻止事件冒泡 `event.stopPropagation();`