如何在HTML本身中配置事件侦听器？

Question

给您一个示例，我们可以执行以下操作，使我们的侦听器仅在事件捕获阶段触发：

element.addEventListener(event, function, true);

或，

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

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

<element onevent="function">

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

Answer 1

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

根据docs：

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

Answer 2

直接在HTML中是不可能的。

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

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

片段示例

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>