e.target和e.event和event.srcElement
e.target 是目标对象,e.event是目标所发生的事件,event.srcElement捕获当前事件作用的对象
1.
$(function(){
$("li:has(ul)").click(function(e){
if(this==e.target){
$(this).children().toggle();
$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
}
return false; //避免不必要的事件混绕
}).css("cursor","pointer").click(); //加载时触发点击事件 //对于没有子项的菜单,统一设置
$("li:not(:has(ul))").css({
"cursor":"default",
"list-style-image":"none"
});
});
具体问题具体分析;当前目标
在event事件中代表点击对象;
loader事件:加载对象;
e只是参数,任意取值;对应即可;
$(function(){
$(document).bind("click", function (e) {
$(e.target).closest("p").css("color","red");
})
});
e.target就是事件源,比如点击<input type='button' value='确定' />,那么这个事件源就是这个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=GO title="?page=1">
<script language="JavaScript">
function f()
{
alert('index.asp'+event.srcElement.title)
location.href='index.asp'+event.srcElement.title
}
</script>
<a 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="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
event.srcElement的子标签 和父标签:
第一个子标签为
event.srcElement.firstChild
最后个一个是
event.srcElement.lastChild
当然也可以用
event.srcElement.children[i]
event.srcElement.ChildNode[i]
至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象.
最新文章
- 微软往年校招招面试题AC全解。
- 《Entity Framework 6 Recipes》中文翻译系列 (37) ------ 第六章 继承与建模高级应用之独立关联与外键关联
- python字典
- java运算符
- Linux学习一:安装/配置vi,熟悉gcc/vi
- Jsp servlet 值传递。。
- svn备份脚 本
- iOS新特性引导页
- hdu 3746 Cyclic Nacklace KMP循环节
- forEach、map、 for-in 、 for 、some 对比 break
- TypeScript和JavaScript哪种语言更先进
- [HDFS Manual] CH3 HDFS Commands Guide
- HDU 6162 Ch’s gift
- inoremap nnoremap vnoremap
- Git介绍及安装配置
- 主键冲突异常 DuplicateKeyException
- Ceph学习之路(二)之Ceph的工作原理及流程
- 20154327 Exp4 恶意代码分析
- ES6新特性学习(一)
- 用nodepad++生成导入数据的SQL
热门文章
- LOJ#10065. 「一本通 3.1 例 2」北极通讯网络
- java并发编程(更新)
- 可变大小、颜色边框、样式的UISwitch
- HTML中&;nbsp; &;ensp; &;emsp; &;thinsp;等6种空白空格
- 三种timer控件的简单实例
- SDUT OJ 数据结构实验之二叉树八:(中序后序)求二叉树的深度
- JAVA Web从前端到后台常用框架介绍
- JAVA基础——Java 中必须了解的常用类
- python基础03-循环结构及函数基础
- window环境下安装Python2和Python3