修改事件委托的 mouseEvent 对象的 `target`答案

【问题标题】：Modify `target` of mouseEvent object for Event Delegation修改事件委托的 mouseEvent 对象的 `target`
【发布时间】：2015-03-11 21:43:57
【问题描述】：

是否可以修改 mouseEvent 的 target 属性？我有一个事件委托函数，delegator(parentSelector, childSelector, event, callback)，用于将事件监听器绑定到父 dom 节点（在动态替换子节点时很有用）。

这很好用，除非单击发生在 childSelector 的 childNode 上。例如，一个事件绑定到body，用于监听a.clickHere 上的点击，其中还包含一个span。如果单击跨度，则返回为event.target，而不是a.clickHere 节点。

我尝试在委托函数中向事件对象添加属性（有效），但无法覆盖现有属性target：

e.myProperty = "hello world" //works
e.target = currentTarget; //doesn't seem to work

这是我的事件委托函数，带有用于 element.matches 函数的 polyfill：

//Event Delegator function
delegator = function(parentSelector, childSelector, event, callback){

    //get a nodelist of each possible parent
    var parents = document.querySelectorAll(parentSelector);

    //bind event listener to each possible parent
    for(var i = 0; i < parents.length; i++){

        parents[i].addEventListener(event, function(e){
            var currentTarget = e.target;

            //loop while the currentTarget isn't the parent selector or the html tag
            while(!matches(currentTarget, parentSelector) && !matches(currentTarget,'html')){

                //found it! currentTarget is what I was looking for
                if(matches(currentTarget,childSelector)){
                    //try to overwrite e.target with the "intended" target
                    e.target = currentTarget;
                    //execute the callback function and end
                    callback.call(this, e);
                    break;
                }

                //didn't find it yet. walk up the dom
                currentTarget = currentTarget.parentNode;
            }

        }, false);
    }
};

//Matches polyfill
matches = function(element, selector){
    var api = ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector'];
    for(var a in api){
        if(typeof element[api[a]] === 'function'){
            return element[api[a]](selector);
        }
    }
};

这段代码会这样调用：

delegate('body', '.search-filter a', 'click', function(event){
    var theLink = event.target; //might be a node inside the a, such as a span.
});

有了这个html

<div class="search-filter">
    <a>Do Work <span>(or not!)</span></a>
</div>

那么，有没有办法写入该属性，或者返回具有修改值的事件对象的副本？

【问题讨论】：

event.target 被指定为只读。 // 我不确定你在这里实际上要解决什么问题 - 事件通过 DOM 冒泡是正常的和预期的行为，那么为什么要首先尝试解决这个问题呢？那只会让你的实现less 可用恕我直言。
是的，我正在利用气泡性质来执行委托。问题是当我需要对childSelector 参数中请求的节点的特定引用时。特别是如果该节点包含要读取的数据属性或其他值。
我想我可以对返回的事件对象添加自定义属性感到满意。 e.requestedTarget = currentTarget; 或类似的
你看过其他图书馆是如何做到这一点的吗？ jQuery f.e.不会将“本机”event 对象传递给处理函数，而是将其自己的 jQuery.Event 对象传递给 ...

标签： javascript dom-events

【解决方案1】：

mouseEvent 的目标是只读的，因此您无法使用传统方法对其进行修改。但是，您可以设置一个新变量，例如：

e.desiredTarget = currentTarget;

然后你可以在任何你想使用e.target的地方引用e.desiredTarget。

【讨论】：

传统方法你看到了什么？怎么可能呢？ :)