jquery 自定义插件， 监听元素插件

Posted 2022-12-13 猎人在吃肉

1、开发场景说明

写一个 jquery 插件，有如下要求：

• 能监听 input 、checkbox、radio、select 元素值的变化 ；
• 有回调函数；
• 当 html 页面加载完毕后，能够立即执行回调函数；
• 当 监听元素值发生变化时，能够立即执行回调函数。

如果没有第3条的要求，那么使用 onchange、onclick 的函数就能满足要求，这个插件没必要开发；

增加了第3条后，就要求在页面加载完毕后也能调用函数，函数里面的业务逻辑与 onchange、onclick 完全一样。代码完全重复了！

因此决定开发一个插件，既满足上面要求、又不让代码冗余。

2、插件

$.fn.listenValue = function(callback) 
    return this.each(function() 
        var $this = $(this);
        if (typeof(callback) == 'function') 
            callback.apply(this);
        
        $this.bind('input propertychange change',function()
            if (typeof(callback) == 'function') 
                callback.apply(this);
            
        )
    );
;

3、使用示例

$(function() 

	// 监听 input 、select 元素
	$("#deptId").listenValue(function() 
		var deptId = $(this).val();
		if(deptId=="1")
			//.......
		else if(deptId=="2")
			//.......
		else
			//.......
		
	);	
	
	
	// 监听 radio 元素
	$("[name='menuType']").listenValue(function()
		var menuType = $("[name='menuType']:checked").val();
		if(menuType=="1")
			//.......
		else if(menuType=="2")
			//.......
		else
			//.......
		
	)

);