JavaScript 中的事件

1、鼠标事件：

• 鼠标单击事件（click）：

        方法一 （on+click）

 点击弹框

         方法二（利用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）： 

•  键盘松开事件（keyup）：

 

     





//箭头函数
   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）：

  
  
  提交

 

常见的表单事件包括：

1. onsubmit：当表单被提交时触发，可以用于验证表单数据的有效性、进行表单数据的处理或发送表单数据到服务器。

2. onreset：当表单被重置时触发，可以用于清空表单中的输入内容或执行其他重置操作。

3. onfocus：当表单元素获得焦点时触发，可以用于在用户输入前提供提示或执行其他操作。

4. onblur：当表单元素失去焦点时触发，可以用于验证用户输入、执行数据处理或执行其他操作。

5. onchange：当表单元素的值发生改变时触发，适用于下拉列表、复选框等需要监听选项选择改变的情况。

总结： 

• 在 HTML 元素的事件属性上，需要加on，再加事件名称。
• 在 JavaScript 中通过事件监听器（addEventListener）或直接赋值事件处理函数时，不需要加on。