关于JS中target属性的使用
首先先介绍一下target这个属性——触发事件的元素
定义和语法
//定义
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素
//语法
event.target
小结:event.target可以理解为我们当下操作的这个对象,我们通过点击、键盘事件、change等等操作来触发target(理解深度不够 以后会继续完善)
可以不使用for()循环或者数组forEach()去判断我点击或者我需要找的是哪个元素,直接使用target点击就可获取
<ul>
<li>今天6.11</li>
<li>明天6.12</li>
<li>后天6.13</li>
</ul>
<script>
var ul = document.getElementsByTagName('ul');
ul[0].onclick = function (e) {
var event = e || window.event;
var tar = event.target || event.srcElement;
//判断我们点击的节点名是否和li相等,如果相等,则提示我们
if(tar.nodeName==='LI'){
console.log("你刚刚点击了我");
//打印我们点击的节点和节点内容
console.log(tar);
}else{
console.log('你没有点击我');
}
}
</script>
输出结果:
看到这里就能明白target会根据鼠标点击的元素来返回相应的数据,更快的获取该属性
最后,百度后找到相关属性,贴在这里
获取文本内容:tar.textContent
获取父级节点:tar.parentNode
获取节点名称:tar.nodeName
使用target获取到的节点名称全部为大写
还有CurrentTarget是绑定事件元素需要再做做功课,未完待续。。。