JS轻松获取对象之srcElement与target篇

    开发中,当执行一个事件时需要去知道触发这个事件的对象是谁?那么,如何获取,在这里小编就对event.srcElement与event.target操作获取略作区分

event.srcElement:表示可以获取当前作用事件的对象。

event.target:事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口。

兼容性:

event.target:Ie9+ 火狐、谷歌;

event.srcElement:ie 678;

srcElementIE下的属性

targetFirefox下的属性

Chrome浏览器同时有这两个属性

一、利用event.srcElement获取标签:

event.srcElement.tagName:因为它获取出来的都是以大写的形式,例如(“A”,“DIV”)所以需要转换obj.tagName.toLowerCase()="a"

二、利用event.srcElement获取子对象:

第一个子标签:event.srcElement.firstChild;

最后个一个是:event.srcElement.lastChild;

第几个孩子:event.srcElement.children[i];

所有孩子:event.srcElement.children;

所有孩子节点:event.srcElement.childNodes;

三、利用event.srcElement获取父对象:

.event.srcElement.parentElement;可以理解成是在鼠标所在对象的上一个对象。

四、vent.target的判断使用  

 js中事件是会泡的,event.target它永远是直接接受事件的目标DOM元素  

一般是获取这个对象的id,兼容的写法如下:

var targetId = event.target ? event.target.id : event.srcElement.id;

获取id后再拿到事件中去判断。

谢谢观读~





��

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,086评论 6 13
  • 我们首先要明白,我们给页面添加效果用到的js到底是什么?js其实包含三部分:dom 文档对象模型 bom 浏览...
    一直以来都很好阅读 817评论 0 0
  • 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课...
    前端进阶之旅阅读 12,722评论 13 94
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 902评论 0 0
  • 题目描述 Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorde...
    KrisBento阅读 205评论 0 1