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

JavaScript020

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。

2、在test.html文件内，创建一个div模块，并设置其id属性为mydiv，用于下面使用js获得标签对象。

3、在test.html文件内，在div标签内，填写一段文字，并加入一个span标签。

4、在test.html文件内，创建一个button按钮，按钮名称为“获取html”。

5、给button绑定onclick点击事件，当按钮被点击时，执行myfun()函数。

6、在test.html文件内，在js标签内，创建myfun（）函数，在函数内，使用getElementById（）方法获得div对象，通过innerHMTL属性获得div内的html内容，最后，使用alert方法将获得的html内容以弹窗形式显示

7、在浏览器打开test.html文件，点击按钮，查看获得的html标签内容。

/* 

* 取得对应类和标签的HTML元素 

* clsName:给定类名 

* tagName：给定的HTML元素，如果为任意 tagName='*' 

*  

*/  

function getElementsByClassName(clsName, tagName) {  

    var ClassElements = []  

    selElements = document.getElementsByTagName(tagName)  

  

    for (var i = 0 i < selElements.length i++) {  

        if (selElements[i].className == clsName) {  

            ClassElements[ClassElements.length] = selElements[i]  

        }  

    }  

    return ClassElements  

}