js中的触发事件对象event.srcElement与event.target详解


Posted in Javascript onMarch 15, 2017

介绍

IE下,event对象有srcElement属性,但是没有target属性;

Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:

firefox 下的 event.target = IE 下的 event.srcElement

解决方法

使用obj = event.srcElement ? event.srcElement : event.target;

或:var evtTarget = event.target || event.srcElement;

event.srcElement.id 
event.srcElement.tagname 
event.srcElement.type 
event.srcElement.value 
event.srcElement.name 
event.srcElement.classname 
event.srcElement.parentelement 
event.srcElement.getattribute 
event.srcElement.children 
event.srcElement.lastChild 
event.srcElement.ChildNode 
event.srcElement.selectedIndex

js将html的所有控件都看成是一个个对象,通过js的各个属性,就能对其进行操作处理,js里对象的整体结构是树形的结构。一层一层的追溯,即可获取需要的结果。

event.srcElement:表示的当前的这个事件源。

event.srcElement.parentNode:表示当前事件源的父节点。

parentNode:父节点,也就是上一层的节点。可以是任何一个标签。

event.srcElement.firstChild:当前事件的第一个节点,如果节点是input,通过event.srcElement.firstChild.value就可以获取此input的值。

event.srcElement.parentElement:是指在鼠标所在对象的上一个对象。

event.srcElement.children:当前节点下对象的个数,有多个的话就是个数组,如当前节点下有2个input的对象,要获取这两个可以用event.srcElement.children[0] event.srcElement.children[1]分别获取。

常用如下:

1、event.srcElement.parentNode.tagName;

<div> 
 <input type="button" value="父元素标签" onclick="alert(event.srcElement.parentNode.tagName)"> 
</div>

结果:DIV

第一个子标签为 event.srcElement.firstChild

最后个一个是   event.srcElement.lastChild

当然也可以用   event.srcElement.children[i] , event.srcElement.ChildNode[i]

2、event.srcElement.parentElement是指在鼠标所在对象的上一个对象

<table border=1 width="200"> 
 <tr title="tr测试"><td onclick="alert(event.srcElement.parentElement.title)">tr</td></tr> 
</table>

3、event.srcElement.tagName 得到点击位置的标签名称

4、event.srcElement.title 得到当前标签title属性值

5、event.srcElement.options[event.srcElement.selectedIndex].value

例1:

<select name="selectname" onchange="alert(event.srcElement.options[event.srcElement.selectedIndex].value)" > 
 <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>

例2:

<script>
function a(){ 
 alert("您点击的标记是:" + event.srcElement.tagName)
}
</script>

<body onclick="a()">
 点鼠标测试<br>     //BODY
 <input value='test input'/> //INPUT
 <a href=#>test</a>    //A
 <div>测试div</div>    //DIV
 <p>测试p</p>     //P
 <span>测试span</span><br /> //SPAN
 <div>
 <a href="/" rel="external nofollow" onmouseover="alert(event.srcElement.parentElement.tagName);">放在我上面</a>
         //DIV 
</body>

例3:

<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 += "\n" + "event.srcElement.id : " + event.srcElement.id;
srcElement += "\n" + "event.srcElement.tagName : " + event.srcElement.tagName;
srcElement += "\n" + "event.srcElement.type : " + event.srcElement.type;
srcElement += "\n" + "event.srcElement.value : " + event.srcElement.value;
srcElement += "\n" + "event.srcElement.name : " + event.srcElement.name;
srcElement += "\n" + "event.srcElement.className : " + event.srcElement.className;
srcElement += "\n" + "event.srcElement.parentElement.id : " + event.srcElement.parentElement.id;
srcElement += "\n" + "event.srcElement.parentNode.id : " + event.srcElement.parentNode.id;
srcElement += "\n" + "event.srcElement.getattribute : " + event.srcElement.getAttribute;
alert(srcElement)
}
</script>

结果如图:

js中的触发事件对象event.srcElement与event.target详解

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
浅析vue深复制
Jan 29 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
jQuery动态产生select option下拉列表
Mar 15 #Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 #Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 #Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 #Javascript
利用vue.js插入dom节点的方法
Mar 15 #Javascript
js实现彩色条纹滚动条效果
Mar 15 #Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 #Javascript
You might like
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
js 动态修改css文件的方法
2014/08/05 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
Python Queue模块详细介绍及实例
2016/12/27 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python绘制随机网络图形示例
2019/11/21 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
小学国庆节活动方案策划书
2014/09/16 职场文书
公司安全管理制度范本
2015/08/05 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
idea下配置tomcat避坑详解
2022/04/12 Servers