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

JavaScript016

JS轻松获取对象之srcElement与target篇,第1张

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

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

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

兼容性:

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

event.srcElement:ie 678;

srcElement 是 IE 下的属性

target 是 Firefox 下的属性

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后再拿到事件中去判断。

谢谢观读~

��

1、新建一个html文件,命名为test.html,用于讲解JS如何获取指定DIV下的子元素LI的值。

2、在test.html文件内,在div标签内,使用ul、li标签创建两个项目列表,li元素的值分别为项目一、项目二。

3、在test.html文件内,设置div标签的id为mydiv,主要用于下面通过该id获得mydiv对象。

4、在test.html文件内,使用button标签创建一个按钮,按钮名称为“获取LI的值”。

5、在test.html文件中,给button按钮绑定onclick点击事件,当按钮被点击时,执行getli

6、通过获得li对象,使用each()方法遍历每一个li对象,通过text()方法获得li的值,使用push()方法将获得li值存进数组中。最后,使用alert()方法将所有li值输出。

7、在浏览器打开test.html文件,点击按钮,查看结果。