JavaScript ??? ??? ?? ??? ? ?????? ??? ?????. ?? ??? ??(?: addEventListener)? ????? ?? ??? ?? ???? ??? ?????, ??? ??? ?? ??? ????, ?? ???? ?? ??? ??? ? ????.

? ????? JavaScript? ?? ??? ?? ??? ???? ??? ?? ??? ???? ? ?? ?? ?? ?????.

1. ????

??????? ??????

??? ??? ?? ??? ???? ?? ??? ???? ?? ?? ??? ?? ???? ???? ?? ?????. ? ??? ???? ??? ? DOM? ???? ???? ??? ?? ?????.

?:

document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("點(diǎn)擊了子元素：", event.target.textContent);
    }
});

??? ??? ???? ??? ??????

• ??? ??? ?? ??? ??? ??????.
• ???? ??? ??? ??? ??????.

2. ??? ? ??? ??

??????

• ????? ?? ??? ??? ?? ? ? ????? ???.
• ?? ????? ??? ?? ?? ??? ??? ??? ?? ??? ?????.

?:

??

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已調(diào)整！");
    }, 200)
);

??? ??

function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

const searchInput = document.getElementById("search");
searchInput.addEventListener(
    "input",
    debounce(() => {
        console.log("輸入事件觸發(fā)！");
    }, 300)
);

? ??????

• ?? ?? ???? ???? ?? ??? ?? ??? ?? ???? ?? ??? ?? ??? ?????.

3. ?? ??? ???

??????

??? ?? ??? ???? ???? ???? ???? ??? ?? ?? ???? ??, ?? ? ?? ? ????.

const eventEmitter = {
    events: {},
    on(event, listener) {
        if (!this.events[event]) this.events[event] = [];
        this.events[event].push(listener);
    },
    emit(event, data) {
        if (this.events[event]) {
            this.events[event].forEach((listener) => listener(data));
        }
    },
};

eventEmitter.on("dataReceived", (data) => {
    console.log("收到數(shù)據(jù)：", data);
});

eventEmitter.emit("dataReceived", { id: 1, message: "Hello!" });

? ??????

• ??? ??? ? ?? ?? ??.
• ??????? ?? ?? ?? ??????? ?????.

4. ??? ??? ??

??? ??? ??? ??????

? ?? ???? ?? ??? ???? ??? ??? ????. ?? JavaScript? ? ??? ???? ??? ??? ?????.

?

const button = document.getElementById("myButton");

button.addEventListener(
    "click",
    () => {
        console.log("按鈕被點(diǎn)擊！");
    },
    { once: true }
);

? ??????

• ??? ???? ??? ??????.
• ???? ???? ???? ??? ??? ?????.

5. ??? ??? ??

??? ??? ?????

??? ??? ???? ???? ????? ???? ?? ?? ???? ???? ??? ?????.

?

function composeHandlers(...handlers) {
    return function(event) {
        handlers.forEach((handler) => handler(event));
    };
}

function logClick(event) {
    console.log("點(diǎn)擊：", event.target);
}

function changeBackground(event) {
    event.target.style.backgroundColor = "yellow";
}

document.getElementById("myElement").addEventListener(
    "click",
    composeHandlers(logClick, changeBackground)
);

? ??????

• ???? ?? ??? ???? ?????.
• ???? ?? ??? ??? ??? ?????.

6. ?? ? ???

??????

JavaScript ??? ??? ? ??? ????.

• ?? ??: ???? ?? ???? ?? ??? ????.
• ??? ??: ???? ?? ???? ?? ??? ?? ????.

?

document.getElementById("parent").addEventListener("click", function(event) {
    if (event.target && event.target.matches(".child")) {
        console.log("點(diǎn)擊了子元素：", event.target.textContent);
    }
});

? ??????

• ??? ?? ??? ???? ?????.

7. ?? ?? ?? ? ?? ??

??????

• preventDefault() ?? ???? ??(?: ?? ??)? ?????.
• stopPropagation() ???? ?? ????? ???? ?? ?????.

?

function throttle(func, limit) {
    let lastCall = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastCall >= limit) {
            lastCall = now;
            func.apply(this, args);
        }
    };
}

window.addEventListener(
    "resize",
    throttle(() => {
        console.log("窗口大小已調(diào)整！");
    }, 200)
);

? ??????

• ??? ??? ?? ???? ??? ? ????.

??

?? ??? ?? ??? ????? ????? ?? ??? ?? JavaScript ??????? ???? ? ??????. ??? ??, ??, ??? ?? ???, ?? ?? ?? ??? ??? ??? ?? ??? ?? ??? ? ????.

? ??? JavaScript? ?? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!