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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 Javascript
完美解决JS文件页面加载时的阻塞问题
Dec 18 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
js中arguments对象的深入理解
May 14 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
Vue formData实现图片上传
Aug 20 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
JavaScript 绘制饼图的示例
Feb 19 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实现的下载css文件中的图片的代码
2010/02/08 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
分析javascript中9 个常见错误阻碍你进步
2017/09/18 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Python字符串切片操作知识详解
2016/03/28 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python 字符串追加实例
2019/07/20 Python
python实现计算图形面积
2021/02/22 Python
GIVENCHY纪梵希官方旗舰店:高定彩妆与贵族护肤品
2018/04/16 全球购物
学校安全工作制度
2014/01/19 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
MySQL去除密码登录告警的方法
2022/04/20 MySQL
nginx之内存池的实现
2022/06/28 Servers