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 面向对象编程基础:封装
Aug 21 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
jQuery事件对象的属性和方法详解
Sep 09 jQuery
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
Echarts如何重新渲染实例详解
May 30 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
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
python的常见命令注入威胁
2013/02/18 Python
python实现360的字符显示界面
2014/02/21 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
美术指导助理求职信
2014/04/20 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
自我推荐信格式模板
2015/03/24 职场文书
早安问候语大全
2015/11/10 职场文书
门面租赁合同范文
2019/08/06 职场文书
python - timeit 时间模块
2021/04/06 Python
在Django中使用MQTT的方法
2021/05/10 Python
Java基础——Map集合
2022/04/01 Java/Android
vue实现拖拽交换位置
2022/04/07 Vue.js
Go获取两个时区的时间差
2022/04/20 Golang