[JavaScript知识库] JS 事件绑定方法封装聚合

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS 事件绑定方法封装聚合 -> 正文阅读

[JavaScript知识库]JS 事件绑定方法封装聚合

?主函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定封装</title>
</head>
<body>
    <input id="ipt1" type="text" />
    <hr>
    <input id="ipt2" type="text" />
    <hr>
    <select id="slt1">
        <option>1</option>
        <option selected>2</option>
        <option>3</option>
    </select>
</body>
<script src="../jquery.min.js"></script>
<script type="module">
    // 导入事件绑定的共通方法
    import bindEventCommon from './js/bindEventCommon.js'
    
    $(function() {
		
		// 项目的ID列表
        const inputItemIdList = [
            "ipt1",
            "ipt2",
            "slt1"
        ];
        bindEventCommon(inputItemIdList);
    })
</script>
</html>

???事件绑定的共通函数

// 事件绑定的共通函数,参数为id列表
async function bindEventCommon(itemIdList) {

    // 准备好要导入的模块地址
    const importModule = [];
    // 根据id来动态导入id所对应的模块
    for (const itemId of itemIdList.values()) {
        // 👨?💻ES2020新语法,动态模块导入
        importModule.push(import(`./${itemId}Event.js`))
    }
    
    // 存储导入模块的list
    let eventObjectList = [];
    try {
        eventObjectList = await Promise.all(importModule);
    } catch (error) {
        console.error('要导入的模块不存在,请检查ID名称或者模块名称!');
        return;
    }

    // 动态进行事件绑定
    for (const [index, itemId] of itemIdList.entries()) {
        /*
            itemIdList中元素的数量和eventObjectList中模块的数量相同
                因此可以通过itemIdList中元素的index获取到模块List中相对应的模块
            模块对象.default可以获取到模块中聚合的对象
        */ 
        $(`#${itemId}`).on(eventObjectList[index].default);
    }
}

export default bindEventCommon;

?各个项目所对应的事件封装函数
ipt1Event.js

// id为ipt1的元素的绑定事件聚合函数,该元素的所有事件都绑定到该对象中
const ipt1EventObject = {
    // 💪之所以命名为focus,是因为要和JQuery的on方法的事件名称保持一致
    focus: (event) => {
        console.log("ipt1的focus()方法执行了");
    },
    click: (event) => {
        console.log("ipt1的click()方法执行了");
    }
}

export default ipt1EventObject;

ipt2Event.js

const ipt2EventObject = {
    focus: (event) => {
        console.log("ipt2的focus()方法执行了");
    },
    click: (event) => {
        console.log("ipt2的click()方法执行了");
    }
}

export default ipt2EventObject;

slt1Event.js

const focusEvent = (event) => {
    console.log(event);
    console.log("slt1的focus()方法执行了");
}

function click(event) {
    console.log(event);
    console.log("slt1的click()方法执行了");
}

const slt1EventObject = {
    // 😒自定义函数的名称和事件名称不相同
    focus: focusEvent,
    // 😑想要把方法聚合到对象中
    blur: (event) => {
        console.log("slt1的blur()方法执行了");
    },
    // 😋自定义函数名称和事件名称相同
    click
}

export default slt1EventObject;