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 数组的 uniq 方法
Jan 23 Javascript
jQuery 在光标定位的地方插入文字的插件
May 10 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
Sep 09 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
jquery append与appendTo方法比较
May 24 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
微信小程序progress组件使用详解
Jan 31 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP+shell脚本操作Memcached和Apache Status的实例分享
2016/03/11 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
解析javascript 浏览器关闭事件
2013/07/08 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python安装第三方库的3种方法
2015/06/21 Python
python从入门到精通(DAY 1)
2015/12/20 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Django models.py应用实现过程详解
2019/07/29 Python
法国足球商店:Footcenter
2019/07/06 全球购物
师范生实习的个人自我鉴定
2013/10/20 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
个人廉洁自律承诺书
2014/03/27 职场文书
中文专业自荐书
2014/06/29 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
领导欢迎词范文
2015/01/26 职场文书
委托书的样本
2015/01/28 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS
Ajax实现三级联动效果
2021/10/05 Javascript