javascript - 更改事件委托的 currentTarget

Question

我正在尝试在网站上添加一些委托事件，但我没有与传统侦听器回调签名 ( function( event ) {}) 匹配的函数，并且要获取当前侦听元素，我需要将另一个参数传递给函数。

这是我设法实现的目标：

const delegate = function( element, events, target, callback ) {
    events.split( " " ).forEach( event => element.addEventListener( event, function( e ) {
        let initiator;
        if ( e.target && ( initiator = e.target.closest( target ) ) ) {
            callback( e, initiator );
        }
    } ) );
};

let count = 0;

delegate( document, "click", ".js-test-delegate", function( event, elem ) {
  elem.innerHTML = `you click on this container ${++count} time(s)`;
} );


const div = document.createElement("div")
div.classList.add( "js-test-delegate" );

document.querySelector( ".container" ) .appendChild( div );

.container{
  width: 300px;
  height: 300px;
  background: rgba(256,0,0,.2);
}

.js-test-delegate{
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  left: 100px;
  background: rgba(0,256,0,.2);
}

<div class="container"></div>

有没有办法elem在事件中传递该元素，让他替换currentTarget属性以获得更简单的行为？

我尝试修改 Event，但属性如currentTarget只读或克隆事件，event = new Event( "click", e)但此时未设置。targetcurrentTarget

当然，这需要在 vanilla js 中。

谢谢 ！

标签： javascriptdom-events

Answer 1

用于.call()以元素引用作为 的值调用回调this：

    if ( e.target && ( initiator = e.target.closest( target ) ) ) {
        callback.call(initiator, e);
    }

在回调中，this将引用“发起者”，您不需要其他参数。