jQuery封裝自定義事件--valuechange(動態的監聽input，textarea)之前值，之後值的變化

龍恩0707發表於2014-05-17
jQuery封裝事件

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>

相關文章