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

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

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

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

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

兼容性:

eventtarget: Ie9+ 火狐、谷歌;

eventsrcElement:ie 678;

srcElement 是 IE 下的属性

target 是 Firefox 下的属性

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

一、利用eventsrcElement 获取标签:

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

二、 利用eventsrcElement 获取子对象:

第一个子标签 :eventsrcElementfirstChild;

最后个一个是: eventsrcElementlastChild;

第几个孩子: eventsrcElementchildren[i];

所有孩子: eventsrcElementchildren;

所有孩子节点: eventsrcElementchildNodes;

三、利用eventsrcElement 获取父对象:

eventsrcElementparentElement; 可以理解成是在鼠标所在对象的上一个对象。

四、venttarget的 判断使用  

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

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

var targetId = eventtarget eventtargetid : eventsrcElementid;

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

谢谢观读~

��

$('')click(function(e) {

if (etarget == this) {

consolelog('is me' + etargetnodeName + thisnodeName);

estopPropagation();

} else {

consolelog('not me' + etargetnodeName + thisnodeName); // 其实上面阻止了冒泡,这里是不会走到的。

}

});

documentgetElementById();//获取id

documentgetElementsByClassName('')[];//获取class

documentgetElementsByTagName('')[];//获取标签

documentgetElementById('')innerHTML;//获取标签内的内容

documentgetElementById('')innerText;//获取标签内的文本

innerHTML和innerText是有区别的,自己百度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width,height=device-height, initial-scale=10, maximum-scale=10, user-scalable=0, shrink-to-fit=no">

    <title>Title</title>

</head>

<body>

<div id="container">

    <div id="id_1">textContent_1</div>

    <div id="id_2">textContent_2</div>

    <div id="id_3">textContent_3</div>

    <div id="id_4">textContent_4</div>

    <div id="id_5">textContent_5</div>

    <div id="id_6">textContent_6</div>

    <div id="id_7">textContent_7</div>

    <div id="id_8">textContent_8</div>

    <div id="id_9">textContent_9</div>

    <div id="id_10">textContent_10</div>

    <div id="no_1">textContent_no_event_call</div>

    <div id="no_2">textContent_no_event_call</div>

    <div id="no_3">textContent_no_event_call</div>

    <div id="no_4">textContent_no_event_call</div>

    <div id="no_5">textContent_no_event_call</div>

</div>

<script type="text/javascript">

    //采用代理方式处理

    var divs = documentquerySelectorAll("div[id^='id_']");

    var ids = Arrayprototypeslicecall(divs)map(function (div) {

        return divid;

    });

    documentquerySelector('#container')addEventListener('click', function (e) {

        if (idsindexOf(etargetid) > -1) {

            alert(etargettextContent);

        }

    }, false);

</script>

</body>

</html>

通过dom对象的id进行判断

举例:

1

2

3

4

var a = documentgetElementById('dom对象的id');//通过getelementbyid方法获取dom节点

if(a){//如果a非null,则表示获取到了dom对象

//存在

}

补充:

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

比如说onclick=doClick(this);

function doClick(obj){

alert(objid);

}

这样就可以通过obj这个形参范文触犯事件的控件的属性,比如哦说id之类的

以上就是关于JS轻松获取对象之srcElement与target篇全部的内容,包括:JS轻松获取对象之srcElement与target篇、jquery 怎样获得 event.currentTarget的第一个元素、javascript怎么获取元素的所有内容等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9313703.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存