event.target
触发事件的DOM元素。
在使用jQuery的时候会有如下典型代码:
<input type="button" id="add" value="按钮">
$("#add").click(function (event) {
console.log(event.target);
});
当我们点击的时候,event.target
就表示当前触发事件的DOM节点,即input
元素。
如果事件是冒泡触发的呢?那么此时event.target
代表什么呢?
<div id="father" style="height: 100px; background-color: blue;">
<input type="button" id="child"value="子元素">
</div>
$("#father").click(function (event) {
console.log(event.target);
});
运行代码可以看到,点击子元素input
的时候,打印出来的event.target
是input
DOM节点;点击父元素div
其他区域的时候,打印出来的event.target
是div
DOM节点。
因此可以看出,event.target
并不表示事件处理函数的当前节点,而是表示事件触发的节点。
event.currentTarget
在事件冒泡过程中的当前DOM元素。
在上面的示例代码中,我们多打印一个event.currentTarget
:
<div id="father" style="height: 100px; background-color: blue;">
<input type="button" id="child"value="子元素">
</div>
$("#father").click(function (event) {
console.log(event.target, event.currentTarget);
});
可以看到,此时无论点击子元素input
还是父元素div
,打印出来的event.currentTarget
都是事件处理函数的当前节点,即父元素div
。
原生方法
注意,event.target
和event.currentTarget
都是html原生支持,并不是只在jQuery下才能使用,使用原生代码演示如下:
<div id="father" style="height: 100px; background-color: blue;">
<input type="button" id="child"value="子元素">
</div>
var father = document.getElementById('father');
father.addEventListener('click', function(event) {
console.log(event.target, event.currentTarget);
}, false);
form target
一个名字或关键字,用来表示在提交表单之后,在哪里显示收到的回复。可以是iframename,表示返回值在指定iframe中加载。
那么在js代码中如何获取这个关键字的值呢?
jQuery中使用attr
函数:$(event.target).attr('target')
;原生方法可以使用getAttribute()
函数:event.target.getAttribute('target')
<input type="button" id="add" target="test" value="增加">
$("#add").click(function (event) {
console.log(event.target, $(event.target).attr('target'));
});
var add = document.getElementById('add');
add.addEventListener('click', function(event) {
console.log(event.target, event.target.getAttribute('target'));
}, false);
常规属性
注意,对于form
元素,target
属性属于内置属性,因此可以像使用form.id
、form.name
一样,直接通过属性访问target
:
<form id="uploadForm" name="uploadForm" target="iframe1" style="height: 100px; background-color: blue;">
</form>
var uploadForm = document.getElementById('uploadForm');
uploadForm.addEventListener('click', function(event) {
const form = event.target;
console.log(form.id, form.name, form.target);
}, false);
但是对于一般的DOM元素,如:div
、input
之类的,就无法直接通过属性访问target
,只能使用jQuery的attr()
函数或原生的getAttribute()
函数。