event.srcElement 用法笔记e.target


Posted in Javascript onDecember 18, 2009

注意获取的标记都以大写表示,如"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>

event.srcElement从字面上可以看出来有以下关键字:事件,源 他的意思就是:当前事件的源,
我们可以调用他的各种属性 就像:document.getElementById("")这样的功能,
经常有人问 firefox 下的 event.srcElement 怎么用,在此详细说明:
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:
firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)来代替IE下的event.srcElement或者Firefox下的event.target.
以下是几种常见到的情况(IE下测试通过,如要测试firefox下的event.target可以修改并保存代码后用firefox打开测试):

event.srcElement.X显示一个控件的各种属性

<div id="div_001"> 
<form id="form_001"> 
<input type="button" id="button_001_id" name="button_001_Name" value=" 单击查看" class="button_001_Class" onclick="Get_srcElement(this)"> 
</form> 
</div> 
<script> 
function Get_srcElement() 
{ 
var srcElement="" 
srcElement = srcElement + " " + "event.srcElement.id : " + event.srcElement.id 
srcElement = srcElement + " " + "event.srcElement.tagName : " + event.srcElement.tagName 
srcElement = srcElement + " " + "event.srcElement.type : " + event.srcElement.type 
srcElement = srcElement + " " + "event.srcElement.value : " + event.srcElement.value 
srcElement = srcElement + " " + "event.srcElement.name : " + event.srcElement.name 
srcElement = srcElement + " " + "event.srcElement.className : " + event.srcElement.className 
srcElement = srcElement + " " + "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id 
srcElement = srcElement + " " + "event.srcElement.getattribute : " + event.srcElement.getAttribute 
alert(srcElement) 
} 
</script>

event.srcElement.selectedIndex一般使用在select对像上:
<select name="selectname" onchange="alert(event.srcElement.options[event.srcElement.selectedIndex].value)" > 
<option value="001">1</option> 
<option value="002">2</option> 
<option value="003">3</option> 
<option value="004">4</option> 
<option value="005">5</option> 
</select>

第一个子标签为
event.srcElement.firstChild
最后个一个是
event.srcElement.lastChild
当然也可以用
event.srcElement.children[i]
event.srcElement.ChildNode[i]
至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象.
<div onclick="Get_srcElement()"> 
<div id="001" style="border:1px solid red;width:100%;height:500px"> <span id="node001">这是第1结点div001<span> 
<div id="002" style="border:1px solid red;width:80%;height:300px"> <span id="node002">这是第2结点div002<span> 
<div id="003" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div003<span> 
</div> 
<div id="004" style="border:1px solid red;width:50%;height:200px"> <span id="node003">这是第3结点div004<span> 
</div> 
</div> 
</div> 
<script> 
function Get_srcElement() 
{ 
var srcElement="" 
srcElement = srcElement + " " + "event.srcElement.children[0].tagName: " + event.srcElement.children[0].tagName 
srcElement = srcElement + " " + "event.srcElement.firstChild.id : " + event.srcElement.firstChild.id 
srcElement = srcElement + " " + "event.srcElement.lastChild.id : " + event.srcElement.lastChild.id 
alert(srcElement) 
} 
</script> 
</div> <div style="border:10px red solid"> 
<input type="button" value="父元素标签" > 
</div>

event.srcElement有关问题- -
event.srcElement的子标签 和父标签:
第一个子标签为
event.srcElement.firstChild
最后个一个是
event.srcElement.lastChild
当然也可以用
event.srcElement.children[i]
event.srcElement.ChildNode[i]
至于event.srcElement.parentElement是指在鼠标所在对象的上一个对象.
<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>
代码参考:
https://3water.com/article/566.htm
Javascript 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
实例详解带参数的 npm script
May 28 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
原生JS实现分页
Apr 19 Javascript
Javascript document.referrer判断访客来源网址
May 15 #Javascript
Javascript 中介者模式实例
Dec 16 #Javascript
js textarea自动增高并隐藏滚动条
Dec 16 #Javascript
javascript 动态设置已知select的option的value值的代码
Dec 16 #Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 #Javascript
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 #Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 #Javascript
You might like
星际争霸任务指南——人族
2020/03/04 星际争霸
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php判断正常访问和外部访问的示例
2014/02/10 PHP
浅析PHP微信支付通知的处理方式
2014/05/25 PHP
ecshop适应在PHP7的修改方法解决报错的实现
2016/11/01 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
分页栏的web标准实现
2011/11/01 Javascript
jquery.cookie.js使用指南
2015/01/05 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
Node.js和Express简单入门介绍
2017/03/24 Javascript
用Nodejs搭建服务器访问html、css、JS等静态资源文件
2017/04/28 NodeJs
深入理解Angular中的依赖注入
2017/06/26 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python实现自主查询实时天气
2018/06/22 Python
python函数参数(必须参数、可变参数、关键字参数)
2019/08/16 Python
使用python去除图片白色像素的实例
2019/12/12 Python
pytorch自定义二值化网络层方式
2020/01/07 Python
Python解析多帧dicom数据详解
2020/01/13 Python
tensorflow自定义激活函数实例
2020/02/04 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
东方电视购物:东方CJ
2016/10/12 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
会计系毕业个人自荐信格式
2013/09/23 职场文书
大学生水文观测实习自我鉴定
2013/09/29 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
党员十八大心得体会
2014/09/12 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
拾金不昧表扬稿
2015/01/16 职场文书