javascript - "Hiding"DOM 中的 JavaScript 事件

Question

我正在开发一个自定义订购流程，并且经常使用 AJAX 请求和动态表单来完成部分订购流程，但我想将我的操作方式清理为 HTML 。我也在使用 jQuery。

在查看 Google 文字处理器等应用程序时，我可以看到 DOM 和源都没有表现出 javascript 事件属性。例如:

<div id="docs-file-menu" role="menuitem" class="menu-button goog-control goog-inline-block" aria-disabled="false" aria-expanded="false" aria-haspopup="true" style="-webkit-user-select: none;">File</div>

我的猜测是脚本根据 HTML 属性在事后注册 Javascript 事件。

我的网站要简单得多，但我想知道如何解决这个问题，因为我目前的按钮样式为 <a><img></a>调用 Javascript 函数的标签(或类似的)，效果很好，但似乎是次要的(和老式的)方法。例如:

<a href="javascript:Customisation.beginNewPair()">
    <img src="images/begin-new.gif" />
</a>

Answer 1

下面是一个关于如何在点击时使用数据属性和事件监听器的简单示例:

var a = document.getElementById('docs-file-menu');
a.addEventListener('click', test);

function test () {
var dis = a.getAttribute('aria-disabled');
var exp = a.getAttribute('aria-expanded');
var has = a.getAttribute('aria-haspopup');


    if (dis == 'true') {
        alert('disabled = true');
    }
     if (exp == 'true') {
        alert('expanded = true');
    }
    if (has == 'true') {
        alert('haspopup = true');
    }

}

您还可以在页面加载时访问不同的数据属性，并且根据它们，您可以运行不同的功能。

这是一个简单的 DEMO使用 onclick 事件，只需单击"file"