javascript - 通过代码检测对输入所做的更改

Question

在我的页面中的某个地方，我有一个按钮，单击该按钮会更改另一个输入的值。然而，我无法控制定义点击事件的代码(在客户端的 CDN 上)，而且我也懒得去查看。我只想在我的输入值通过代码更改时捕获事件。这是一个例子:
HTML

<input type="text" id="myinput" />
<input type="button" id="theonechanging" value="Click Me" />
<br />
<p id="message"></p>

JS

var i = 0;
$("#theonechanging").click(function(e) {
    // YOU CAN NOT CHANGE THIS FUNCTION
    $("#myinput").val("changed via button " + i++);
});
$("#myinput").on("input change bind",function(e) {
    $("#message").text("changed " + i++);
});

这是一个 fiddle ，您可以在其中测试情况:http://jsfiddle.net/fourat05/t9x6uhoh/

感谢您的帮助!

Answer 1

有一种非常巧妙的方法可以做到这一点。

您要做的就是用您自己的实现替换jQuery.fn.val 函数，并从新实现调用旧实现。这种技术是一种Monkey patching .

实现如下:

var i = 0;
$("#theonechanging").click(function(e) {
    // YOU CAN NOT CHANGE THIS FUNCTION
    $("#myinput").val("changed via button " + ++i);
});

var handleChanges = function(){
    $("#message").text("changed " + i);
}

var oldval = jQuery.fn.val;
jQuery.fn.val = function(){
    oldval.apply(this,arguments);
    if(this.attr('id') === 'myinput'){ //and possibly add a check for changes
        handleChanges();
    }
}

$("#myinput").on("input change bind",function(e) {
    i++;
    handleChanges();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="text" id="myinput" />
<input type="button" id="theonechanging" value="Click Me" />
<br />
<p id="message"></p>

但是，我强烈建议不要使用它，因为:

1. 这会改变广泛使用的库的行为，从而为为同一页面生成代码的开发人员带来可能的陷阱
2. 检测多个元素上的多个事件很快就会变得复杂。

请在实现之前了解此方法的副作用。