Event对象
Event种类
- mouseEvent
- keyboardEvent
- focusEvent
-
<body> <input type="text" onfocus="doFocus(event)">//这里的参数必须写event(也就是window.event)，如果不写则console的结果就是undefined。 <script> function doFocus(ev){ console.log(ev);//类型是focusEvent } </script> </body> /*onblur（失去焦点时触发）同onfocus（得到焦点时触发）都是 焦点事件（focusEvent）*/
属性
-
clientX 只有鼠标事件才有，鼠标指针相对于当前窗口（文档）的水平坐标。
-
clientY 只有鼠标事件才有
-
keyCode 只有键盘事件才有
-
target 具体触发事件的元素（不管是什么类型的事件都可以用。用target可以得到具体点了哪一个元素）
具体代码如下(点document中的任何元素都会变绿)： document.onclick=function(ev){ ev.target.style.backgroundColor="green"; } //可以给新添加的元素绑定事件 代码： css样式： <style> ul{样式};li{样式};li.current{样式}; </style> html文件： <ul class="myList">多个<li></li></ul> <button onclick="addLi()">添加</button> js文件： var myList=document.getElementById("myList"); var lis=myList.getElementsByTagName("li"); //循环 for（var i=0;i<lis.length;i++）{ lis[i].onmouseover=function(){this.className="current";} lis[i].onmouseout=function(){this.className="";} } //添加li function addli(){ var liObj=document.createElement("li");//创建元素 liObj.innerHTML="我是新的li"; myList.appendChild(liObj);//添加 } /*新添加之后的效果:点击button按钮会新添加li,但是新添加的li当鼠标滑过时不会改变颜色，原因是：绑定事件时，新的元素还没有创建。*/ //解决方案如下： myList.onmouseover=function(ev){var e=ev||window.event; var currentEle=e.target;//得到具体触发的那个元素 //console.log(currentEle.tagName);//得到当前鼠标滑过的元素名 if(currentEle.tagName==="LI"){currentEle.className="current";} } myList.onmouseout=function(ev){var e=ev||window.event;//兼容IE var currentEle=e.target;//得到具体触发的那个元素 //console.log(currentEle.tagName);//得到当前鼠标滑过的元素名 if(currentEle.tagName==="LI"){currentEle.className="";} } /*分析如下：把事件绑定给ul,通过target来获得当前鼠标滑过的元素，因li是ul的子元素，所以滑过li就等于滑过了ul*/
事件的冒泡和捕获
- 捕获：浏览器由最外层向内捕获，直到找到被触发的那个元素。
- 冒泡：浏览器由内向外冒泡（找子元素的父元素的...父元素）。
- 只有冒泡的时候才触发事件，捕获的时候不会触发事件。
- bigEle.addEventListener("click",function(){alert("big");},true)//第三个参数写true是捕获阶段触发，不写（默认是false）则是冒泡阶段触发。
- IE8以及以下不存在事件的捕获，只有事件的冒泡。
方法
-
stopPropagation() 阻止冒泡
-
preventDefault() 阻止默认动作
<a href="http://www.so.com" onclick="fn(event)">我是超链接</a> <script> function fn(ev){ alert("弹出")； ev.preventDefault();//阻止a的默认动作，也就是说不会跳转到http://www.so.com。。。 } </script>