开发中,当执行一个事件时需要去知道触发这个事件的对象是谁?那么,如何获取,在这里我就对 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怎么获取元素的所有内容等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)