Question

举个例子，我们可以做类似下面的事情，使监听器仅在事件捕获阶段触发：

element.addEventListener(event, function, true);

或者，

element.addEventListener(event, function, {passive: true});

..使监听器成为被动。但是，所有这些设置仅限于通过JavaScript代码进行设置。如果，我们在HTML / Template代码中将侦听器添加到DOM元素，例如：

<element onevent="function">

在这种情况下，如何在监听器上进行所有这些设置？这些设置是理想的，特别是当我们使用诸如 React 之类的框架时，在该框架中，我们仅将事件处理程序直接附加到模板中，而几乎从未使用element.addEventListener()。

Answer 1

通过在事件名称的末尾附加Capture，React为您提供了一种在捕获阶段使用事件的方法。

按照docs：

事件处理程序由冒泡阶段中的事件触发。至为捕获阶段注册一个事件处理程序，然后将Capture附加到事件名称；例如，您可以使用onClick来代替 onClickCapture来处理捕获阶段的点击事件。

Answer 2

直接在HTML中是不可能的。

但是使用JavaScript，这非常简单，如下所示：

您必须将所有事件设置写入HTML元素属性；
然后，您可以读取所有这些属性并创建事件侦听器。

代码段示例

function myFunction()
{
    console.log('it works!');
}

var myelements = document.querySelectorAll('myelement');
for(var i = myelements.length; i--;)
{
    var eventName = myelements[i].getAttribute('event-name'),
        eventFunction = myelements[i].getAttribute('event-function-name'),
        eventSetting = myelements[i].getAttribute('event-setting');

    eventFunction = window[eventFunction];
    eventSetting = eventSetting.indexOf('{') == 0 ? JSON.parse(eventSetting) : !!eventSetting;
    //if e.g. eventSetting == "true" then after !!eventSetting it will be a boolean true

    myelements[i].addEventListener(eventName, eventFunction, eventSetting);
}

myelement
{
    width:50px;
    height:50px;
    background:green;
    display:block;
}

<myelement event-name="click"
        event-function-name="myFunction"
        event-setting='{"passive":true}'></myelement>

如何在HTML /模板中设置事件监听器属性？

2 个答案: