jquery encapsulates custom event--valuechange (Dynamic listener Input,textarea) values before values change

jquery encapsulates custom event--valuechange (Dynamic listener Input,textarea) values before values change

JS Monitoring input Box value of the instant changes online there are a lot of onpropertychange, Oninput, but they are not what I want, I want to be dynamic monitoring Input,textarea and other values before and after the change, Like the Valuechange event in Kissy, when I start typing 1 in the input box, the previous value is undefined, and now the value is 1, and when I enter 2, the previous value is 1, Now the value is 2. And so, I want to get this effect, because if there is this method, then I do input,textarea and other operations, it is very convenient, such as I want to monitor the change of textarea value, if the change of what I should do, if the value has not changed, I do what things, is very convenient to use 。 We can look at the results as follows:

Jsfiddler links are as follows:

To view the effects, please click on me!

In fact, with the next jquery custom event operation, we can look at some of the code in jquery sources as follows:

The Setup method is a register event, teardown is the Delete event method. Not much to say, the direct sticker code is as follows:

JS all the code is as follows:

$.event.special.valuechange ={teardown:function(namespaces) {$ ( This). Unbind ('. Valuechange '); }, Handler:function(e) {$.event.special.valuechange.triggerchanged ($ ( This)); }, add:function(obj) {$ ( This). On (' Keyup.valuechange cut.valuechange paste.valuechange input.valuechange ', Obj.selector, $.event.special.valuechange.handler)}, triggerchanged:function(Element) {varCurrent = Element[0].contenteditable = = = ' true '?element.html (): Element.val (), Previous=typeofElement.data (' previous ') = = = ' undefined '? Element[0].defaultvalue:element.data (' previous ')    if(Current!==Previous) {Element.trigger (' Valuechange ', [Element.data (' previous '))]) Element.data (' Previous ', current)} }}

The page is called as follows:

$ (function  () {      $(function  (e, previous) {          $ (' #output '). Append (' Previous: ' +  previous +  '  --current  : ' + $ (this). Val () + ' <br/> ')        }) 
    

HTML Test Code:

<input id= "text" type= "text"/>
<div id= "Output" ></div>