jQuery封装⾃定义事件--valuechange（动态的监听
input，textarea）之前
注：本⽂内容引⽤的jquery是1.9及以后的版本，1.9之前不⽀持on⽅法。
js监听输⼊框值的即时变化⽹上有很多关于 onpropertychange、oninput的讲解，但是他们都不是我想要的，我想要的是动态的监听input，textarea等之前值和之后改变的值，⽐如像KISSY中的valuechange事件⼀样，当我在输⼊框⾥⾯开始输⼊1的时候，那么之前值是undefined，现在的值是1，当我接着输⼊2时候，那么之前的值是1，现在的值是2.等，我想要获取这种效果，因为如果有这种⽅法的话，那么我以后做input，textarea等操作时候，是⾮常⽅便的，⽐如我想监听textarea值的变化，如果变化了我该做什么操作，如果值没有变化，我⼜该做什么事情，是⾮常⽅便的使⽤。我们可以看看效果如下：
JSFiddler链接如下：
其实就是⽤了下Jquery⾃定义事件操作，我们可以看看jquery源码中的⼀部分代码如下：
setUP⽅法是注册事件，teardown是删除事件⽅法。不多说，直接贴代码如下：
JS所有代码如下：
1$.event.special.valuechange = {
2
3  teardown: function (namespaces) {
jquery源码在线4    $(this).unbind('.valuechange');
5  },
6
7  handler: function (e) {
8    $.event.iggerChanged($(this));
9  },
10
11  add: function (obj) {
12    $(this).on('keyup.valuechange cut.valuechange paste.valuechange input.valuechange', obj.selector, $.event.special.valuechange.handler)
13  },
14
15  triggerChanged: function (element) {
16    var current = element[0].contentEditable === 'true' ? element.html() : element.val()
17      , previous = typeof element.data('previous') === 'undefined' ? element[0].defaultValue : element.data('previous')
18    if (current !== previous) {
19      igger('valuechange', [element.data('previous')])
20      element.data('previous', current)
21    }
22  }
23}
页⾯上调⽤⽅式如下：
1$(function () {
2      $('#text').on('valuechange', function (e, previous) {
3          $('#output').append('previous: ' +  previous +  '  --  current: ' + $(this).val() + '<br />')
4        })
5 })
HTML测试代码：
<input id="text" type="text" />
<div id="output"></div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。