基于jQuery的事件绑定插件

ningh_ai

已于 2022-03-11 18:51:15 修改

阅读量920

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2022-03-11 18:44:52 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45610510/article/details/123431024

版权

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个遵循UMD规范的jQuery事件绑定插件，支持自定义属性绑定和多种事件类型。插件在浏览器环境中需支持ES6，使用时需要先引入jQuery库。示例代码展示了如何初始化插件并绑定输入框的输入事件、按钮的点击和双击事件。插件会根据元素上的特定属性自动绑定对应的函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于jQuery的事件绑定插件

遵循UMD规范，浏览器环境需支持ES6

使用说明

引用文件前需引入jQuery.js
第一个参数为需要绑定事件函数的对象
支持自定义属性绑定，属性前缀默认值为v，传值通过初始化第二个参数传入字符串
支持多种事件类型，传值通过初始化第三个参数传入数组，默认值为[‘click’, ‘dblclick’, ‘contextmenu’, ‘mousedown’, ‘mouseup’, ‘keyup’, ‘focus’, ‘blur’, ‘change’, ‘input’]
初始化插件方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>demo</title>
	</head>
	<body>
		<div>
			<input type="text" v-input="doing"/>
			<button class="btn" v-click="confirm">确认</button>
			<button class="btn" v-dblclick="cancel">取消</button>
		</div>
	</body>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="./event_bind.js"></script>
	<script type="text/javascript">
		// 初始化插件
		new $.eventBind({
			doing() {
				console.log('输入框正在输入...');
			},
			confirm() {
				console.log('点击确认按钮');
			},
			cancel() {
				console.log('双击取消按钮');
			}
		});
	</script>
</html>

event_bind.js：

/**
 * 绑定事件插件
 * create by ningh at 20220222
 */
!function (root, factory) {
    if (typeof exports === 'object' && typeof module !== 'undefined') {
        module.exports = factory(require('jquery'));
    } else if (typeof define === 'function' && define.amd) {
        define(['jquery'], factory);
    } else {
        factory(root.jQuery);
    }
}(this, function ($) {
    $.extend({
        eventBind: class {
            constructor(fnObj, prefix, events) {
                this.prefix = prefix || 'v'; // 属性名前缀
                this.events = events || ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'keyup', 'focus', 'blur', 'change', 'input']; // 默认支持的事件类型
                this.eventBind(fnObj);
            }
    
            /**
             * @param {object} fnObj 装有绑定函数的对象
             */
            eventBind (fnObj) {
                let prefix = this.prefix,
                    events = this.events,
                    selector = events.map(e => `[${prefix}-${e}]`),
                    $eles = this.$eles = $(selector.join(',')),
                    attrBinds = this.attrBinds = {},
                    attrName = '',
                    attrValue = '',
                    eventType = '';
    
                $eles.each(function () {
                    let attr;
                    for (let i = 0, len = events.length; i < len; i++) {
                        attr = this.attributes[`${prefix}-${events[i]}`];
                        if (attr) { // 属性存在
                            attrName = attr.name;
                            attrValue = attr.value;
                            eventType = events[i];
                            break;
                        }
                    }
                    if (!attr) {
                        console.warn('没有配置该事件类型', this);
                        return true;
                    }
                    if (!attrValue) {
                        console.warn(`${prefix}-${eventType}属性值不能为空`, this);
                        return true;
                    }
                    if (!fnObj[attrValue]) {
                        console.warn(`找不到事件绑定函数：${attrValue}()`);
                        return true;
                    }
                    if (typeof fnObj[attrValue] !== 'function') {
                        console.warn(`请声明正确的事件绑定函数：${attrValue}()`);
                        return true;
                    }
                    if (attrBinds[attrValue] && attrBinds[attrValue] == attrName) { // 相同属性值只绑定一次
                        return true;
                    }
                    $($eles.context).off(eventType, `[${attrName}="${attrValue}"]`).on(eventType, `[${attrName}="${attrValue}"]`, $(this).data(), fnObj[attrValue].bind(fnObj));
                    attrBinds[attrValue] = attrName;
                });
            }
        }
    });
});