javascript，DOM事件，传统事件和事件监听详解

事件三要素

事件源、事件类型、事件处理函数

传统事件

传统事件只能拿到冒泡阶段，不能拿到捕获阶段（onblur、onmouseleave没有冒泡阶段）

同一个元素的同一个事件多次注册，只会执行最后一次

传统事件类型

input事件	作用
onblur	失去焦点
onchange	修改内容（跟上一次的内容相比，内容被改变），并且失去焦点触发
onfocus	获取焦点
oninput	每次修改内容就会触发，无需失去焦点

键盘事件	作用（如果input作为事件源，当获取焦点时按键盘会触发）
onkeydown	键盘按下触发（不区分大小写）
onkeypress	键盘按下触发，只识别字符输入键，不识别功能键（区分大小写）
onkeyup	键盘弹起时触发（不区分大小写）

鼠标事件	功能
onmousedown	鼠标按下
onmouseup	鼠标弹起
onmousemove	鼠标进入移动的时候触发，不停的移动就不停的触发
onmouseenter	鼠标只要进入就触发（没有冒泡效果，推荐）
onmouseleave	鼠标移出（没有冒泡效果，推荐）
onmouseover	鼠标移入触发（有冒泡效果）
onmouseout	鼠标移出触发（有冒泡效果）

其它事件	功能
onclick	点击元素时触发
onscroll	元素滚动时触发
onsubmit	表单提交行为时被触发

鼠标经过事件：

mouseover 和 mouseout 会有冒泡效果

mouseenter 和 mouseleave 没有冒泡效果 (推荐)

设置传统事件

在行内设置onclick属性：

 <button onclick="handleClick()">点击我</button>
 ​
 <script>
 function handleClick() {
   // 当按钮被点击时执行的代码
 }
 </script>

在JavaScript中设置onclick属性：

 element.onclick = function() {
   // 当元素被点击时执行的代码
 };

事件监听

addEventListener（）

• addEventListener （事件类型，事件处理函数，布尔值）

• add（增加）event （事件） Listener （监听）

• 既有捕获阶段，也有冒泡阶段

• 布尔值=true，开启捕获阶段

• 布尔值=false 或者不写（默认为false），开启冒泡阶段

• 同一个元素注册多个相同的事件监听，都会被执行，从上到下执行

   <button>点击</button>
   <script>
     btn = document.querySelector('button')
     btn.addEventListener('click', function () {
       console.log('点击了按钮');
     })
   </script>

在实际开发中，使用addEventListener来监听事件是更现代和推荐的做法，因为它提供了更好的灵活性，允许添加多个事件监听器，而不会覆盖之前设置的处理函数。而onclick属性虽然简单，但只能绑定一个处理函数，如果多次设置，会覆盖之前的处理函数

事件类型

JavaScript 支持多种类型的事件，包括但不限于以下几种：

• click: 当用户点击一个元素时触发

• dblclick: 当用户双击一个元素时触发

• mouseover: 当用户的鼠标指针滑过一个元素时触发（会有冒泡效果）

• mouseout: 当用户的鼠标指针移出一个元素时触发（会有冒泡效果）

• mousemove: 当用户的鼠标指针在元素内部移动时触发

• mousedown: 当用户按下鼠标按钮时触发

• mouseup: 当用户释放鼠标按钮时触发

• keypress: 当用户按下并释放一个键时触发

• keydown: 当用户按下一个键时触发

• keyup: 当用户释放一个键时触发

• focus: 当元素获得焦点时触发（例如输入框被点击）

• blur: 当元素失去焦点时触发

• change: 当元素的值发生变化时触发（如输入框内容改变）

• submit: 当表单提交时触发

• load: 当页面或元素加载完成时触发

• scroll: 当元素或窗口滚动时触发

移除传统事件和事件监听

移除传统事件

 // 按钮点击一次后，点击事件就失效
 btn.onclick=function(){
       alert('被点击了')
       btn.onclick=null
     }

移除事件监听

 // 按钮点击一次后，点击事件就失效 
  <button>点击</button>
   <script>
     btn = document.querySelector('button')
     btn.addEventListener('click', fun )
     function fun() {
       alert('被点击了')
       btn.removeEventListener('click',fun)
     }
   </script>

click、click()、onclick区别

在JavaScript中，click、click()和onclick都与点击事件相关，但它们有不同的用途和上下文。下面是对这三个概念的详细解释：

click 事件

click 是一个事件类型，它表示用户点击了某个元素。这个事件可以通过addEventListener方法来监听和处理。

 element.addEventListener('click', function() {
   // 当元素被点击时执行的代码
 });

click() 方法

click() 是一个DOM（文档对象模型）方法，它模拟了对元素的点击操作。调用这个方法会触发该元素的click事件。

 element.click();

使用click()方法通常是在编程逻辑中需要模拟用户点击行为时，而不是由用户的实际点击触发的。

onclick 属性

onclick 是一个DOM属性，用于指定当元素被点击时要执行的JavaScript函数。它是一个事件处理器属性，可以直接在HTML元素中设置，或者在JavaScript代码中为元素设置。

三者的区别

• click：是一个事件类型，需要通过addEventListener来监听。

• click()：是一个DOM方法，用于模拟点击事件，触发元素的click事件。

• onclick：是一个DOM属性，用于指定点击事件的处理函数。

通常，click()方法用于在编程逻辑中触发点击事件，而不是在响应用户交互时使用。如果你需要在用户点击时执行代码，应该使用addEventListener来监听click事件，或者使用onclick属性来指定处理函数。