[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();`