JavaScript事件与交互

事件与交互

事件监听与处理

在网页中，可以使用JavaScript来监听和处理各种事件，例如点击、鼠标移动、键盘输入等。

<!DOCTYPE html>
<html>
<head>
    <title>事件示例</title>
</head>
<body>
    <button id="myButton">Click me</button>

    <script>
        // 监听按钮点击事件
        var button = document.getElementById("myButton");
        button.addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>
</body>
</html>

修改元素内容与样式

通过JavaScript，可以修改元素的内容和样式。

<!DOCTYPE html>
<html>
<head>
    <title>修改元素内容与样式</title>
</head>
<body>
    <p id="myParagraph">这是一个段落。</p>

    <script>
        // 修改元素内容
        var paragraph = document.getElementById("myParagraph");
        paragraph.innerHTML = "这是修改后的内容。";

        // 修改元素样式
        paragraph.style.color = "red";
        paragraph.style.fontSize = "18px";
    </script>
</body>
</html>

表单交互与验证

JavaScript可以用于处理表单的交互和验证。

<!DOCTYPE html>
<html>
<head>
    <title>表单交互与验证</title>
</head>
<body>
    <form id="myForm">
        <input type="text" id="name" placeholder="姓名">
        <input type="email" id="email" placeholder="邮箱">
        <button type="submit">提交</button>
    </form>

    <script>
        var form = document.getElementById("myForm");

        form.addEventListener("submit", function(event) {
            var nameInput = document.getElementById("name");
            var emailInput = document.getElementById("email");

            if (nameInput.value === "" || emailInput.value === "") {
                alert("请填写所有字段。");
                event.preventDefault();
            }
        });
    </script>
</body>
</html>

在这个章节中，你学习了如何使用JavaScript监听和处理事件、修改元素内容和样式，以及处理表单的交互和验证。下面是一个示例代码，演示了如何监听按钮点击事件，并根据点击次数改变按钮的文本：

<!DOCTYPE html>
<html>
<head>
    <title>按钮点击示例</title>
</head>
<body>
    <button id="myButton">点击我</button>

    <script>
        var button = document.getElementById("myButton");
        var clickCount = 0;

        button.addEventListener("click", function() {
            clickCount++;
            button.innerHTML = "点击次数：" + clickCount;
        });
    </script>
</body>
</html>

这个示例展示了如何监听按钮点击事件，并在每次点击后改变按钮的文本内容。在下一个章节中，我们将学习模块化编程和ES6。

上篇 JavaScript对象与属性 JavaScript模块化编程与ES6 下篇

JavaScript事件与交互

网友评论0