input监听

js jquery 监听 input 输入 触发

一个小需求，监控input的值变化，一旦input值有变化就处罚事件的功能，查阅文档，发现很不方便。
一堆事件如，onpropertychange, input, keyup, paste, change, blur,又不能同时监听这些事件，因为当输入一个值时，可能同时出发多个，这样会造成多次业务逻辑的执行。

想着能不能一种简单有用的办法，又解决跨浏览器。想到只监听keyup，和paste事件，同时过滤掉无效的不改变值的keyup。怎么判断无效呢？很自然的一个办法就是在dom中缓存原先的值然后做对比。按照这个思路封装一个jquery的插件，致敬angularjs。

1. (function($) {  
2.     $.fn.watch = function(callback) {  
3.         return this.each(function() {  
4.             //缓存以前的值  
5.             $.data(this, ‘originVal’, $(this).val());  
6.   
7.             //event  
8.             $(this).on(‘keyup paste’, function() {  
9.                 var originVal = $(this, ‘originVal’);  
10.                 var currentVal = $(this).val();  
11.   
12.                 if (originVal !== currentVal) {  
13.                     $.data(this, ‘originVal’, $(this).val());  
14.                     callback(currentVal);  
15.                 }  
16.             });  
17.         });  
18.     }  
19. })(jQuery);  

调用：

1. $(“input:text”).watch(function(value) {  
2.   console.log(value);  
3. });  

一些感悟，学习不能仅仅浮躁与表面，更加注重基础知识的积累。扎实的基础，很多时候事情就会变得简单。

最近在看clojure，非常不错的一门优雅的语言。fp确实很棒，一门语言不仅仅是语言更重要的是对思维的启发，对解决问题思路的启发。了解clojure更加适宜jquery的一些特性，比如强大的选择器。以前不明白为什么jquery要这样，比如，first，last，:nth(), not(), filter, $.map, $.grep, $.each, 这都是fp的特性啊。underscore更是强化到极限。

http://bee1314.iteye.com/blog/2067556

jquery自带监听事件，可以兼容IE7以上浏览器

$('.tx').bind('input propertychange', function() {    
    document.title=$(this).val();
});