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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
jquery ajax执行后台方法
Mar 18 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
JS回调函数的应用简单实例
Sep 17 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
vue 解决循环引用组件报错的问题
Sep 06 Javascript
layui扩展上传组件模拟进度条的方法
Sep 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
使用php4加速网络传输
2006/10/09 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
javascript中this指向详解
2016/04/23 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
2020/08/30 Javascript
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
ssh批量登录并执行命令的python实现代码
2012/05/25 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Flask-Mail用法实例分析
2018/07/21 Python
python实现剪切功能
2019/01/23 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
双立人加拿大官网:Zwilling加拿大
2020/08/10 全球购物
大学生通用个人的自我评价
2014/02/10 职场文书
保护环境建议书400字
2014/05/13 职场文书
环保小标语
2014/06/13 职场文书
安全责任书模板
2014/07/22 职场文书
微信搭讪开场白
2015/05/28 职场文书
蜗居观后感
2015/06/11 职场文书
入党自传范文2015
2015/06/26 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers