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中,为什么要尽可能使用局部变量?
Apr 06 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
javascript数组去重小结
Mar 07 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 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注销代码(session注销)
2012/05/31 PHP
PHP5函数小全(分享)
2013/06/06 PHP
php获取根域名方法汇总
2014/10/28 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python创建学生成绩管理系统
2019/11/22 Python
python如何实现不用装饰器实现登陆器小程序
2019/12/14 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
J2EE中常用的名词进行解释
2015/11/09 面试题
文秘专业自荐信
2013/10/14 职场文书
2014社区三八妇女节活动总结
2014/03/01 职场文书
一年级小学生评语
2014/04/22 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
销售工作决心书
2015/02/04 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
趣味运动会标语口号
2015/12/26 职场文书
教师听课学习心得体会
2016/01/15 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js