在 DOM 中“隐藏”JavaScript 事件

"Hiding" javascript events in DOM

本文关键字：JavaScript 事件 隐藏 DOM      更新时间：2023-09-26

我正在开发一个自定义排序过程，我经常使用 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>

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

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');
    }
}

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

这是一个带有点击事件的简单演示，只需单击文件

你想要的是addEventListener。

您如何访问元素是另一个问题，但假设您希望每次有人单击框时收到警报。

var box = document.getElementById('box');
box.addEventListener('click', function(){ alert(); });
<div id="box" style="width:150px;height:150px;background:blue;"></div>

你也可以把发生的情况放在一个实际函数中：

function doSomething(){ 
    alert();
}
var box = document.getElementById('box');
box.addEventListener('click', doSomething);
<div id="box" style="width:150px;height:150px;background:blue;"></div>

相关文章：