使用jQuery侦听DOM事件与html句柄

Using jQuery to listen for DOM events vs html handles

本文关键字：html 句柄 事件 DOM jQuery 侦听 使用      更新时间：2023-09-26

最初，我编写了由放置在HTML中的on input事件处理程序触发的标准函数。然而，建议我使用jQuery来"监听"事件（以获得更可读的代码）。

问题：两者在处理方面有什么区别？（如每个样式的代码如何与DOM交互）。

最初我有这样的东西：

HTML:

<input type='range' oninput='doStuff()'../>

JS:

function doStuff() {
  //Things happen
}

以下是重构后的代码：

var makeMusic = {
    var1: val,
    var2: val,
    var3: val,
    init: function() {      
        makeMusic.watchExperience();
    },
    watchExperience: function() {
        $(document).on('input change', '#input_experience', function() {
            //do stuff
        }
    },
    anotherFunction: function() {
    },
    etc
}
var otherScript = {
    init: function() {
    },
    etc
}

var Main = {
    run: function() {
        makeMusic.init();
        otherScript.init();
    }
}
$(document).ready(Main.run);

我认为您正在讨论自定义事件调度器并将其重定向到标准事件

根据您的示例，浏览器DOM给出的原始事件onchange如果您想为其做代理，那么您肯定会捕获该事件并触发您的oninput

请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

您可以在文档级别或wilcard*****选择器级别捕获所有事件，并使用自定义代码在输入时重新触发

如果你使用JQuery，它也将有助于

区别在于：您可以用更复杂的方式处理本机硬件事件。这允许您创建自己的框架，从而提供更合适的事件名称。

相关文章：