# 1、什么是事件 浏览网页时，当我们做出点击鼠标、按键盘、移动鼠标等行为时，这些行为会被浏览器内置的JavaScript引擎所捕获，并执行对应的某些操作（函数）。那么你的行为（动作）+ JavaScript引擎捕获 + 执行对应的操作 = 事件。 所以，一个完整的事件应该包括： * 用户行为； * 浏览器捕获你的行为； * 执行对应的操作（函数） 常见行为有：鼠标点击、鼠标的移动、鼠标的移入和移出、键盘控制等等。 事件的作用是：通过事件，我们（浏览网页的人）就可以和浏览器进行一些交互了。 # 2、事件绑定方式 语法： ``` node.事件名 = function(){ //事件被触发时，执行这个函数。 }; //例如 document.getElementById('btn').onclick = function(){ console.log('你点击我了'); } ``` ``` <input type="button" value="点我试试" id="btn" /> <input type="text" id="username" value="请输入用户名" /> <script> //找到要绑定事件的元素节点 var btn = document.getElementById('btn'); //单击事件 btn.onclick = function(){ alert('你真敢点'); }; //找到username，绑定获取焦点事件 document.getElementById('username').onfocus = function () { document.getElementById('username').value = ''; }; </script> ``` 在事件处理函数中，this表示绑定事件的那个元素： 所以上面获得焦点的事件可以优化代码为：  练习： 页面中有很多个td，点击td的时候，让td的背景颜色发生变化： > HTML代码： ``` <table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> ``` > css代码： ``` <style> table,td{ border:solid 1px #ccc; border-collapse: collapse; /*合并边框*/ } td{ width:150px; height:50px; /*color:rgb(30,50,10);*/ } table{ margin:10px auto; /*让表格左右居中对齐*/ } </style> ``` > JS代码： ``` <script> //点击页面中的td，点击之后，让被点击的td背景颜色改变成红色 //先找到所有的td var tds = document.getElementsByTagName('td'); // 返回数组 //循环，为每个td都绑定一个单击事件 for(var i=0; i<tds.length; i++){ tds[i].onclick = function () { //alert(123); //this 表示绑定事件的那个td var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); this.style.backgroundColor = 'rgb('+r+', '+g+', '+b+')'; /*if(this.style.backgroundColor != 'red'){ this.style.backgroundColor = 'red'; }else{ this.style.backgroundColor = 'white'; }*/ }; } </script> ``` > 效果：  # 3、常用事件列举 * 页面事件： oonload ：当页面载入完毕（页面中的标签和外部资源）后触发 * 焦点事件 oonfocus ：当获取焦点时触发 oonblur ：当失去焦点时触发 * 鼠标事件 oonmouseover ：当鼠标悬浮时触发 oonmouseout ：当鼠标离开时触发 * 键盘事件 oonkeypress ：当键盘按下时触发（如果按住某个键不松开，会一直触发press事件） oonkeydown ：当键盘按下时触发 oonkeyup ：当键盘弹起时触发 * 其他事件： oonchange ：内容改变时会触发，常用于select>option。 oonsubmit ：表单提交时触发，这个事件要给form绑定而不是给提交按钮绑定 oonresize ： 页面窗口改变大小时会触发 oonscroll ：滚动条滚动时触发 # 4、什么是事件对象 事件对象也是一个对象，它提供了一些属性，这些属性描述了当前事件的特点； 不同的事件中，事件对象也有所差异，比如单击事件中，事件对象会提供pageX和pageY属性，表示点击的点距离页面的距离，比如键盘事件中，事件对象会提供keyCode属性，表示按的是什么键。 总之，事件对象中提供了一些属性，这些属性可以很好的描述当前的事件的特点。 # 5、如何获取对象 * IE浏览器：window.event; * 火狐浏览器：传递给事件处理函数的形参 下面代码演示获取事件对象的方式： ``` <input type="text"> <script> document.getElementsByTagName('input')[0].onclick = function(a){ //console.log(a); // IE8+ 支持，获取事件对象的方法 //console.log(window.event); // IE8浏览器 //兼容各个浏览器的获取事件对象的方法 /*var e; if(window.event){ e = window.event; //IE8 }else{ e = a; // IE8+ }*/ var e = window.event||a; }; </script> ``` # 6、事件对象常用属性 下面列举一些事件对象中的常用属性： * keyCode：表示键盘上的键对应的数值。 * altKey：表示是否按了alt键，按了结果为true，没按结果为false（组合按键的时候，才会有作用） * shiftKey：表示是否按了shift键，按了结果为true，没按结果为false（组合按键的时候，才会有作用） * ctrlKey：表示是否按了ctrl键，按了结果为true，没按结果为false（组合按键的时候，才会有作用） * pageX: 鼠标距离页面左边的距离 * pageY: 鼠标距离页面上面的距离 * screenX: 鼠标距离屏幕左边的距离 * screenY: 鼠标距离屏幕上面的距离 下面的代码是获取keyCode的代码： ``` <script> //在页面中任何位置，按键，当键盘弹起的时候，执行函数 document.onkeyup = function(evt){ //先获取事件对象 var e = window.event||evt; //兼容各个浏览器的获取事件对象的方式 //获取键盘对应的数字 var keyCode = e.keyCode; //alert(keyCode); if(keyCode == 13){ alert('您按了回车键'); } } </script> ```