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

Posted 2023-03-05

【中文标题】如何在 HTML 本身中配置事件监听器？

【英文标题】：How to configure event listeners in HTML itself?

【发布时间】：2019-01-16 10:32:37

【问题描述】：

举个例子，我们可以做如下的事情来让我们的监听器只在事件捕获阶段触发：

element.addEventListener(event, function, true);

或者，

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

..使听众被动。但是，所有这些设置都仅限于通过 javascript 代码设置它们。如果我们在 html/Template 代码中为 DOM 元素添加监听器，例如：

<element onevent="function">

在这种情况下，我们如何在侦听器上进行所有这些设置？这些设置是可取的，尤其是当我们使用像 React 这样的框架时，我们只在模板中直接附加事件处理程序，几乎从不使用element.addEventListener()。

【问题讨论】：

我不认为你可以用 HTML 属性来做到这一点。如果您需要这种级别的控制，则必须使用 Javascript。

在这种情况下，您只能检查处理函数中的eventPhase，然后根据该决定是否/如何继续。但是你真的还想在这个时代使用“内联”事件处理吗……？

@Barmar 谢谢你，先生。但是，我会等待可能知道这个答案的人（如果存在）。你介意点赞这篇文章，以便其他用户可以注意到这一点并在他们真正知道的情况下发布答案吗？ :)

顺便说一句，event="function" 应该是 onevent="function()"。

@Barmar 已更正！谢谢:)

【参考方案1】：

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

根据docs：

事件处理程序由冒泡阶段的事件触发。到 为捕获阶段注册一个事件处理程序，将捕获附加到 事件名称；例如，不使用onClick，而是使用 onClickCapture 处理捕获阶段的点击事件。

【讨论】：

让听众被动怎么办？

@UtkarshPramodGupta 在 react github 中有一个线程支持这一点。然而，它仍然是 WIP。 github.com/facebook/react/issues/6436 浏览器也支持被动：滚轮和滚动事件默认为真

【参考方案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>