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 ul标签下拉菜单演示代码
Dec 11 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
JavaScript数组去重的几种方法效率测试
Oct 23 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php集成动态口令认证
2016/07/21 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
layui table去掉右侧滑动条的实现方法
2019/09/05 Javascript
深入分析jQuery.one() 函数
2020/06/03 jQuery
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
Python多线程实现同步的四种方式
2017/05/02 Python
python pandas库的安装和创建
2019/01/10 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python中SQLite如何使用
2020/05/27 Python
简单了解Python多态与属性运行原理
2020/06/15 Python
python3的pip路径在哪
2020/06/23 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
幼师自我鉴定
2014/02/01 职场文书
年度考核自我鉴定
2014/02/02 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
世博会口号
2014/06/20 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
使用Python脚本对GiteePages进行一键部署的使用说明
2021/05/27 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL