JQuery encapsulates custom events -- valuechange (Dynamic listening input, textarea) values before and after

There are a lot of online explanations on onpropertychange and oninput about the real-time changes in the value of the js listening input box, but they are not what I want. What I want is dynamic listening input, textarea and other previous values and subsequently changed values, such as the valuechange event in KISSY. When I start to enter 1 in the input box, the previous value is undefined, the current value is 1. When I enter 2, the previous value is 1 and the current value is 2. etc. I want to obtain this effect, because if there is such a method, it is very convenient for me to perform input, textarea, and other operations later, for example, if I want to monitor the changes in the textarea value, what operations should I do? If the value does not change, what should I do? It is very convenient to use. Let's take a look at the effect as follows: JSFiddler link: view the effect, please click me! In fact, the Jquery Custom Event operation is used. The setUP method is to register the event, and teardown is to delete the event. Not to mention, paste the following code directly: All JS Code is as follows: Copy code $. event. special. valuechange = {teardown: function (namespaces) {$ (this ). unbind ('. valuechang');}, handler: function (e) {$. event. special. valuechange. triggerChanged ($ (this);}, add: function (obj) {$ (this ). on ('keyup. valuechange cut. valuechange paste. valuechange input. valuechang', obj. selector, $. event. special. valuechange. handler)}, triggerChanged: function (element) {Var current = element [0]. contentEditable = 'true '? Element.html (): element. val (), previous = typeof element. data ('previous ') = 'undefined '? Element [0]. defaultValue: element. data ('previous ') if (current! = Previous) {element. trigger ('valuechange', [element. data ('previous')]) element. data ('previous', current) }}copy the code page using the following method: Copy code $ (function () {$ ('# text '). on ('valuechange', function (e, previous) {$ ('# output '). append ('previous: '+ previous +' -- current: '+ $ (this ). val () + '<br/>')}) copy the code HTML test code: <input id = "text" type = "text"/> <div id = "output"> </div>