绑定JavaScript的最佳jQuery插件实现'；s oninput事件
我知道jQuery不支持oninput事件，所以我自己开始编写一个插件来完成这项工作。虽然我不太了解jQuery或JavaScript中与事件相关的所有内容，但我最终得到了目前满足我需求的可用代码 不幸的是，我认为我当前的实现可能会崩溃，特别是当它与其他库一起使用时，因为我直接设置DOM元素的oninput成员 您知道一种更好的、可移植的方法来解决这个问题吗，可以使用jQuery的“on”或JavaScript的“addEventListener”等方法吗 下面是我当前使用的代码的工作示例：绑定JavaScript的最佳jQuery插件实现'；s oninput事件,javascript,jquery,jquery-plugins,Javascript,Jquery,Jquery Plugins,我知道jQuery不支持oninput事件，所以我自己开始编写一个插件来完成这项工作。虽然我不太了解jQuery或JavaScript中与事件相关的所有内容，但我最终得到了目前满足我需求的可用代码 不幸的是，我认为我当前的实现可能会崩溃，特别是当它与其他库一起使用时，因为我直接设置DOM元素的oninput成员 您知道一种更好的、可移植的方法来解决这个问题吗，可以使用jQuery的“on”或JavaScript的“addEventListener”等方法吗 下面是我当前使用的代码的工作示例： &
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
////////////////////////////////////////////////////////////////////////////
// jQuery plugin to bind an event handler to the "oninput" JavaScript event.
(function ($) {
// Add an "input" method to all jQuery objects
$.fn.input = function (handler) {
// iterate over all DOM elements in the jQuery object
this.each( function () {
// set a new method to run when "oninput" is fired
this.oninput = function (prevHandler) {
return function (ev) {
// call previous handler if exists
if( typeof prevHandler === 'function' ) {
prevHandler.call (this, ev);
}
// call new handler
handler.call (this, ev);
};
}(this.oninput); // immediate evaluation, pass current handler as argument
});
};
} (jQuery));
////////////////////////////////////////////////////////////////////////////
</script>
<script type="text/javascript">
// Test the plugin
$(document).ready (function () {
$('#one').input (function () {
alert ('Input on one: ' + $(this).val());
});
$('#three,#four').input (function () {
alert ('Input on three or four: ' + $(this).val());
});
$('#one,#two,#three').input (function () {
alert ('Input on one, two, or three: ' + $(this).val());
});
$('#one,#two,#three,#four').input (function () {
alert ('Input on any: ' + $(this).val());
});
});
</script>
</head>
<body>
<input id='one'/><br/>
<input id='two'/><br/>
<input id='three'/><br/>
<input id='four'/><br/>
</body>
</html>
////////////////////////////////////////////////////////////////////////////
//jQuery插件将事件处理程序绑定到“oninput”JavaScript事件。
（函数（$）{
//向所有jQuery对象添加“输入”方法
$.fn.input=函数（处理程序）{
//迭代jQuery对象中的所有DOM元素
这个。每个（函数（）{
//设置在触发“oninput”时运行的新方法
this.oninput=函数（prevHandler）{
返回功能（ev）{
//如果存在，则调用上一个处理程序
if（prevHandler的类型==='function'）{
prevHandler.call（this，ev）；
}
//调用新处理程序
handler.call（this，ev）；
};
}（this.oninput）；//立即求值，将当前处理程序作为参数传递
});
};
}（jQuery））；
////////////////////////////////////////////////////////////////////////////
//测试插件
$（文档）.ready（函数（）{
$（'#一'）。输入（函数（）{
警报（'Input on one:'+$（this.val（））；
});
$（'#三，#四'）。输入（函数（）{
警报（'三个或四个输入：'+$（this.val（））；
});
$（'一，'二，'三'）。输入（函数（）{
警报（'1、2或3的输入：'+$（this.val（））；
});
$（'一，'二，'三，'四'）。输入（函数（）{
警报（'Input on any:'+$（this.val（））；
});
});
提前谢谢 jQuery的“on”可以处理任何事件，因此您可以简单地执行以下操作：
(function() {
var outputElement = document.getElementById('mirror-input');
$('#input-stuff').on('input', function (event) {
outputElement.innerText = event.target.value;
});
}())
jQuery的“on”可以处理任何事件，因此您可以简单地执行以下操作：
(function() {
var outputElement = document.getElementById('mirror-input');
$('#input-stuff').on('input', function (event) {
outputElement.innerText = event.target.value;
});
}())
如果所述浏览器不支持输入事件，则不会，尽管给定的插件似乎也不提供该支持。如果所述浏览器不支持输入事件，则不会，尽管给定的插件似乎也不提供该支持。