Event对象+事件的冒泡和捕获
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>