console 命令行工具 X clear

console

(() => {

    if (Element.prototype.created) {
        return;
    }

    window.addEventListener("created", function (e) {
        if (window.$) {
            const $e = new window.$.Event(e);
            $e.isImmediatePropagationStopped = function () {
                return this.target !== this.currentTarget;
            }
            jQueryBubble(window.$, e.target, $e);
        }
    }, true);

    /**
     * 模拟jQuery中的事件冒泡
     * @param {jQuery} $ jQuery 主函数
     * @param {Element} elem 事件元素
     * @param {jQuery.Event} event 事件 
     */
    function jQueryBubble($, elem, event) {
        $(elem).triggerHandler(event);
        if (elem === document.documentElement) {
            jQueryBubble($, document, event);
        } else if (elem.parentElement) {
            jQueryBubble($, elem.parentElement, event);
        }
    }

    // 当观察到变动时执行的回调函数
    function callback(mutationsList) {
        const array = [];
        for (let i = 0; i < mutationsList.length; i++) {
            const nodes = mutationsList[i].addedNodes;
            for (var j = 0; j < nodes.length; j++) {
                const node = nodes[j];
                if ("tagName" in node) { // 忽略没有 tagName 的元素，如：#text 等
                    array.push(node);
                }
            }
        }
        // 触发数组中所有元素的 created 事件
        if (array.length > 0) {
            oncreated(array);
        }
    };


    // 页面加载事件
    window.addEventListener("load", function () {
        // 创建一个观察器实例并传入回调函数
        const observer = new MutationObserver(callback);
        observer.observe(document, { childList: true, subtree: true });

        // 将创建观察器之前的就已经创建元素全部处理一遍
        oncreated(document.children);

        setInterval(() => callback(observer.takeRecords()), 100);
    });

    /**
     * 以事件方式执行指定代码
     * @param {Element} elem 需要触发事件的元素 
     * @param {Event} event 需要触发的事件参数
     * @param {String} code 需要触发的时间代码 
     */
    function dispatchByCode(elem, event, code) {
        try {
            new Function("event", code).apply(elem, [event]); // 修改 this 作用域，并传入参数 event
        } catch (e) {
            console.error(e);
        }
    }

    /**
     * 触发元素的created事件
     */
    Element.prototype.created = function () {
        const event = new Event('created');
        dispatch(this, event);
    }

    /**
     * 触发元素事件
     * @param {Element} elem 需要触发事件的元素 
     * @param {Event} event 需要触发的事件参数
     */
    function dispatch(elem, event) {
        const eventType = "on" + event.type;
        if (!(eventType in elem.__proto__)) {
            const code = elem.getAttribute(eventType);
            if (code) {
                dispatchByCode(elem, event, code);
            }
        }
        elem.dispatchEvent(event);
    }


    /**
     * 递归循环元素的子元素, 并在 hookeds 中返回钩子元素
     * @param {Array} elements 元素数组
     * @param {Set} [hookeds] 需要触发 oncreated 事件的元素集合
     */
    function oncreated(elements, hookeds) {
        if (hookeds == null) {
            hookeds = new Set();
            oncreated(elements, hookeds);
            hookeds = Array.from(hookeds);
            while (hookeds.length > 0) {
                const topN = hookeds.splice(0, 1000);
                setTimeout(() => topN.forEach(x => x.created()));
            }
        }
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            if (isHooking(element)) {
                hookeds.add(element);
            }
            if (element.childElementCount > 0) {
                oncreated(element.children, hookeds);
            }
        }
    }

    /**
     * 判断一个元素是否是钩子元素
     * @param {Element} element 待判断的元素 
     * @returns {boolean} 是/否
     */
    function isHooking(element) {
        return true; // 预留后期优化，页面元素不多的情况下直接返回true即可
    }


})();

<!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>Document</title>
    <script src="//cdn.staticfile.org/jquery/1.9.1/jquery.js"></script>
    <script src="//jsrun.net/nRcKp.js"></script>
</head>

<body>
    <form action="" id="from">
        <input id="a" type="text" autocomplete="off"> <br />
        <input id="b" type="text"> <br />
        <input id="c" type="text"> <br />
        <input id="d" type="text"> <br />
        <input id="e" type="text"> <br />
    </form>

    <button onclick='document.body.appendChild(document.createElement("input"))'>动态添加元素</button>
    <script>

        $(document.body).on("created", "*", function (e) {
            console.log("$(document).on >> ", `${e.target.tagName}[${e.target.id}]`);
        });

    </script>
</body>

</html>