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 相关文章推荐
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 Javascript
JavaScript String.replace函数参数实例说明
Jun 06 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
使用node.js 制作网站前台后台
Nov 13 Javascript
Javascript中实现String.startsWith和endsWith方法
Jun 10 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
微信小程序支付PHP代码
Aug 23 Javascript
JavaScript实现省份城市的三级联动
Feb 11 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php设置编码格式的方法
2013/03/05 PHP
php+mysql数据库查询实例
2015/01/21 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
基于php+MySql实现学生信息管理系统实例
2020/08/04 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
2014/06/15 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python的exec、eval使用分析
2017/12/11 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Python如何获取文件路径/目录
2020/09/22 Python
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
奥巴马竞选演讲稿
2014/05/15 职场文书
学校消防安全责任书
2014/07/23 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
单位租房协议书范本
2014/12/04 职场文书
个人先进材料范文
2014/12/30 职场文书
考研复习计划
2015/01/19 职场文书
总经理岗位职责
2015/02/04 职场文书
房屋产权证明书
2015/06/19 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP
goland 清除所有的默认设置操作
2021/04/28 Golang
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript