锋言锋语

NferZhuang的自留地

此target非彼target

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.targetinputDOM节点;点击父元素div其他区域的时候,打印出来的event.targetdivDOM节点。

因此可以看出,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.targetevent.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.idform.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元素,如:divinput之类的,就无法直接通过属性访问target,只能使用jQuery的attr()函数或原生的getAttribute()函数。

文 / nfer
LEAVE A REPLY

loading