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

最初，我编写了标准函数，该函数由放置在HTML中的输入上的

事件处理程序触发。然而，有人建议我使用jQuery来“监听”事件（以获得更可读的代码）

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

最初我有这样的想法：

HTML:

以下是重构后的代码：

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

提及

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

如果您使用JQuery，它也会有所帮助

区别在于：您可以以更复杂的方式处理本机硬件事件。这允许您创建自己的框架，提供更多合适的事件名称。
我已经尝试澄清了一点……主要区别在于必须定义回调的范围。在仅HTML版本中，它必须是全局作用域，而使用代码添加侦听器可以使用任何作用域。我认为这意味着，当您直接从元素调用处理程序时，您可以创建一个事件“代理”（即，该事件的另一个事件），如果使用JQuery间接观察，您将无法（轻松）做到这一点。JQuery方法允许分离关注点，这很好，并且允许更复杂的开发。这个摘要正确吗？是的，您实际上正在考虑使用适当的名称命名事件，比如jQuery Mobile onpagecreate、onpagechange等
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);