起因
定义一个点击监听事件 ,可以用事件event.preventDefault();来阻止点击a默认跳转,刷新页面导致结果不能输出来的一个作用。
< script >
var ul = document.getElementById("ul");
ul.onclick = function(event) {
var tar = event.target;
var tagName = tar.nodeName.toLowerCase();
console.log("你点击了:" + tagName);
event.preventDefault();
}
< /script>
e.target与e.currentTarget的作用
— current:有当前的/现在的意思,currentTarget可理解当前的目标对象
网上某文章博主 的观点:结合事件捕获和事件冒泡的概念,e.currentTarget指的是注册了事件监听器的对象,而e.target指的是该对象里的子对象,也是触发这个事件的对象!
个人理解:
- e.target— 永远指向触发这个监听事件的对象。
- e.currentTarget时动态的,只要有对象注册了相同的事件监听器,那么,结合事件捕获/事件冒泡,随着事件执行到某一个对象,e.currentTarget便显示当前对象。
可通过事件的方式,获取节点、id值。
var tar = event.target;
1. var tagName = tar.nodeName;
2. var tagId = tar.id;
<body>
<div id = "fa"onmousedown = "getEventTrigger(event)">
<p id = "son"onmousedown = "getEventTrigger(event)"> 点我试试 </p>
</div>
</body>
<script type="text/javascript ">
var fa = document.getElementById('fa');
var son = document.getElementById('son');
function getEventTrigger(event)
{
x=event.currentTarget;
y=event.target;
alert("currentTarget指向:" + x.id + ",target指向:" + y.id);
}
</script>
事件捕获/事件冒泡概念
补充:
- 事件捕获 w3c标准下,事件发生都是从顶层开始捕获去查找触发源,最终指向的是 触发目标 ,即e.target;
- 事件冒泡 是找到触发target后向上冒泡触发相同监听事件,最终指向的是 当前目标, 即e.currentTarget。