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是指在鼠标所在对象的上一个对象.
e.target和e.event和event.srcElement的更多相关文章
- Event/window.Event属性和方法
type:事件的类型,如onlick中的click:srcElement/target:事件源,就是发生事件的元素:button:声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下 ...
- js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性
js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...
- event.keyCode|| event.which.的用法
HTML 用户名:<input type="text" id="UserAccount" onKeyPress="JumpByEnter(Use ...
- 如何更好的理解(pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY,offsetLeft,style.left)
1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条.(火狐特有) 2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X ...
- flume sink两种类型 file_rool 自定义sing com.mycomm.MySink even if there is only one event, the event has to be sent in an array
mkdir /data/UnifiedLog/; cd /data/UnifiedLog/; wget http://mirror.bit.edu.cn/apache/flume/1.8.0/apac ...
- javascript & global event & custom event
javascript & global event & custom event new CustomEvent object let event = new CustomEvent( ...
- Event Bus & Event Emitter
Event Bus & Event Emitter Event Bus https://code.luasoftware.com/tutorials/vuejs/parent-call-chi ...
- Jquery 中的 event、event.target 和原生JS的 event、event.target 对比
先看下原生的 event,如图: 再看下 Jquery 中的 event,如图: 明显不一样,也符合常理,比较结果: 那么如何把 Jquery 中的 event 转成原生的呢? event.orig ...
- Javascript中event.srcElement和event.target的区别
event.srcElement 可以捕获当前事件作用的对象,如event.srcElement.tagName可以捕获活动标记名称.注意获取的标记都以大写表示,如"TD",&qu ...
随机推荐
- LoadRunner监控Linux条件和解决方法
注:内容来自网络 需要下载3个包: (1)rsh-0.17-14.i386.rpm (2)rsh-server-0.17-14.i386.rpm (3)rpc.rstatd-4.0.1.tar.gz ...
- django中ImageField模块使用
https://blog.csdn.net/meylovezn/article/details/47124923
- clickonce发布方式创建桌面快捷方式
1.工程属性->发布->选项->清单:创建桌面快捷方式打勾 2.工程属性->应用程序->清单:下拉列表选择Properties\app.manifest(其中的图标可以选 ...
- PHP选项和运行
PHP运行模式 五大运行模式 1.cgi 通用网关接口 2.fast-cgi cgi升级 3.cli (Command Line Interface) 4.isapi 微软提供的面向Internet服 ...
- 1. UML统一建模语言
(1)UML概述: 建模: 对现实系统进行适当的过滤, 用适当的表现规则描述出简洁的模型. 建模是一种深入解决问题的方法. UML: UML(United Modeling Language, 统一建 ...
- SDUT OJ 学密码学一定得学程序
学密码学一定得学程序 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description ...
- 微信小程序获取用户手机号,服务器解码demo
原理:通过微信登陆接口wx.login得到encryptedData . iv .code.经过接口处理code得到sessionkey.最后官方demo得到解密后的手机号.(接口处理这一步也可以在 ...
- BI中的报表业务功能授权使用"自定义主题"
- 【算法笔记】B1008 数组元素循环右移问题
1008 数组元素循环右移问题 (20 分) 一个数组A中存有N(>0)个整数,在不允许使用另外数组的前提下,将每个整数循环向右移M(≥0)个位置,即将A中的数据由(A0A1⋯AN ...
- HDU - 2256 矩阵快速幂 带根号的递推
题意:求$ [(\sqrt{2}+\sqrt{3})^{2n}] mod 1024 $ 分析: 把指数的2带入 原式等于 $ [(5+2\sqrt{6})^n] $ 有一个重要的结论是n次运算后其结果 ...