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

最初我编写了由放在 HTML中的on输入事件处理程序触发的标准函数.但是,建议我使用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给出的原始事件如果你想为它做一个代理,那么你肯定会抓住那个事件并触发你的oninput

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

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

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

不同之处在于：您可以以更复杂的方式处理本机硬件事件.这允许您创建自己的框架,以提供更合适的事件名称.