首页 > 代码库 > e.target和e.event和event.srcElement

e.target和e.event和event.srcElement

e.target 是目标对象,e.event是目标所发生的事件,event.srcElement捕获当前事件作用的对象

1.

 1 $(function(){ 2     $("li:has(ul)").click(function(e){ 3         if(this==e.target){ 4             $(this).children().toggle(); 5             $(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)")) 6         } 7         return false;    //避免不必要的事件混绕 8     }).css("cursor","pointer").click();    //加载时触发点击事件 9    10     //对于没有子项的菜单,统一设置11     $("li:not(:has(ul))").css({12         "cursor":"default",13         "list-style-image":"none"14     });15 });

具体问题具体分析;当前目标
在event事件中代表点击对象;
loader事件:加载对象;
e只是参数,任意取值;对应即可;

1 $(function(){2     $(document).bind("click", function (e) {3         $(e.target).closest("p").css("color","red");4     })5   });

e.target就是事件源,比如点击<input type=‘button‘ value=http://www.mamicode.com/‘确定‘ />,那么这个事件源就是这个button。$(e.target)这里的意思是传入事件源,获得button这个对象,相当于document.getElementById()这类方法。

2.

与Flex类似,JavaScript中的事件也同样存在,捕获--触发--冒泡 三个节点.比较常见的情况是,在子DIV触发事件时,如果父DIV也监听同类事件,那么也会一起触发,并向上冒泡

jQuery对事件监听函数,都会默认传递一个参数,一般命名为event或e(非必须,也可以任意命名)

e,event参数中支持下列属性: 
event.stopPropagation(); 停止事件冒泡的方法 
event.preventDefault(); 组织默认行为--如超链接的跳转

更简单的方式: 
return false,对上面两种都起同样的作用


event.type ---事件的类型,如click 
event.target---事件的html元素对象 
event.relatedTarget() --如在mouseover事件触发时,相关的元素,如另外一个mouseout元素 
event.pageX()/event.pageY() --相对于页面的x,y坐标 
event.which() --获取与事件相关的键盘或鼠标的按键值 
event.metaKey()--判断事件是否包含ctrl按键 
event.originalEvent()--指向原始的事件对象

3.event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称。

注意获取的标记都以大写表示,如"TD","TR","A"等。

 <script type="text/javascript"> function tdclick(){ if(event.srcElement.tagName.toLowerCase()==‘td‘) alert("行:"+(event.srcElement.parentNode.rowIndex+1)+"列:"+(event.srcElement.cellIndex+1)); } </script> 

  IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target. 

event.srcElement.selectedIndex一般使用在select对像上:

<input type=button value=http://www.mamicode.com/GO title="?page=1"> <script language="JavaScript"> function f() { alert(‘index.asp‘+event.srcElement.title) location.href=http://www.mamicode.com/‘index.asp‘+event.srcElement.title "a测试" >a测试</a> <br> <table border=1 width="200"> <tr title="tr测试" ><td>tr</td></tr> </table> <table border=1 width="200"> <tr><td title="td测试" >td</td></tr> </table> <select > <option value="http://www.mamicode.com/1">1</option> <option value="http://www.mamicode.com/2">2</option> <option value="http://www.mamicode.com/3">3</option> <option value="http://www.mamicode.com/4">4</option> <option value="http://www.mamicode.com/5">5</option> </select> 

event.srcElement的子标签 和父标签: 
第一个子标签为 
event.srcElement.firstChild 
最后个一个是 
event.srcElement.lastChild 
当然也可以用 
event.srcElement.children[i] 
event.srcElement.ChildNode[i] 
至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象. 

e.target和e.event和event.srcElement