jQuery封装自定义事件--valuechange(动态的监听input，textarea)以前值，以后值的变化

jQuery封装自定义事件--valuechange(动态的监听input，textarea)以前值，以后值的变化

  js监听输入框值的即时变化 网上有不少关于 onpropertychange、oninput的讲解，可是他们都不是我想要的，我想要的是动态的监听input，textarea等以前值和以后改变的值，好比像KISSY中的valuechange事件同样，当我在输入框里面开始输入1的时候，那么以前值是undefined，如今的值是1，当我接着输入2时候，那么以前的值是1，如今的值是2.等，我想要获取这种效果，由于若是有这种方法的话，那么我之后作input，textarea等操做时候，是很是方便的，好比我想监听textarea值的变化，若是变化了我该作什么操做，若是值没有变化，我又该作什么事情，是很是方便的使用。咱们能够看看效果以下：

JSFiddler连接以下：

查看效果，请点击我！

其实就是用了下Jquery自定义事件操做，咱们能够看看jquery源码中的一部分代码以下：

 

setUP方法是注册事件，teardown是删除事件方法。很少说，直接贴代码以下：

JS全部代码以下：

$.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) {
    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)
    }
  }
}

页面上调用方式以下：

$(function () {
      $('#text').on('valuechange', function (e, previous) {
          $('#output').append('previous: ' +  previous +  '  --  current: ' + $(this).val() + '<br />')
        })
 })

HTML测试代码：

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