JavaScript 中的事件

最新推荐文章于 2024-07-11 20:55:36 发布

娃哈哈哈哈呀

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量418

点赞数 9

分类专栏： JavaSpring 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/karlaofsky/article/details/135708211

版权

JavaSpring 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、鼠标事件：

鼠标单击事件（click）：

方法一（on+click）

 <button id="btn" onclick="alert('88888')">点击弹框</button>

方法二（利用addEventListener）

document.getElementById("btn").addEventListener('click', function(event) {
  console.log('鼠标单击了页面');
});

方法三:(箭头函数)

  document.getElementById("btn").onclick = () => { 
          alert('88888')
        };

鼠标悬停事件（mouseover）：

document.getElementById("name").addEventListener('mouseover', function(event) {
  console.log('鼠标悬停在页面上');
});

鼠标移出事件（mouseout）：

document.getElementById("name").addEventListener('mouseout', function(event) {
  console.log('鼠标移出页面了');
});

鼠标移入事件（mouseenter）：
鼠标移出事件（mouseleave）：

2、键盘事件：

键盘按下事件（keydown）：

<body>
     <input type="text" value="" id="name">
</body>
<script>
      document.getElementById("name").addEventListener("keydown", function (event) {
            console.log(event.key);
            if (event.key === "Control") {

                event.preventDefault(); // 阻止默认行为（例如表单提交）
                document.getElementById("name").style.color = "blue";
            }
        });
</script>

键盘松开事件（keyup）：

<body>
     <input type="text" value="" id="name">
</body>
<script>
      document.getElementById("name").addEventListener("keyup", function (event) {
            console.log(event.key);
            if (event.key === "Control") {

                event.preventDefault(); // 阻止默认行为（例如表单提交）
                document.getElementById("name").style.color = "red";
            }
        });
</script>



//箭头函数
   document.getElementById("name").onkeyup = () => {
            console.log(event.key);
            if (event.key == "p") {

                event.preventDefault(); // 阻止默认行为（例如表单提交）
                document.getElementById("name").style.color = "red";
            }
        };

3、焦点事件：

获取焦点事件（focus）：

document.getElementById('myInput').addEventListener('focus', function() {
  console.log('输入框获得了焦点');
});

失去焦点事件（blur）：

document.getElementById('myInput').addEventListener('blur', function() {
  console.log('输入框失去了焦点');
});

4、表单事件：

表单提交事件（submit）：

<form onsubmit="submitForm(event)">
  <input type="text" id="name" placeholder="请输入姓名" required>
  <input type="email" id="email" placeholder="请输入邮箱" required>
  <button type="submit">提交</button>
</form>

<script>
function submitForm(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  
  // 获取表单数据
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  
  // 执行数据验证或其他处理
  if (name !== "" && email !== "") {
    // 验证通过，执行提交操作或其他逻辑
    console.log("表单提交成功");
  } else {
    // 验证失败，给出提示或执行其他操作
    console.log("请填写完整的姓名和邮箱");
  }
}
</script>