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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
js函数内变量的作用域分析
Jan 12 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
JavaScript隐式类型转换代码实例
May 29 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
PHP学习 运算符与运算符优先级
2008/06/15 PHP
PHP遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
从Python程序中访问Java类的简单示例
2015/04/20 Python
python中迭代器(iterator)用法实例分析
2015/04/29 Python
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
5.1手机促销活动
2014/01/17 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
给校长的建议书600字
2014/05/15 职场文书
关于教师节的广播稿
2014/09/10 职场文书
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS