JavaScript 中的事件触发

什么是事件？

事件是在我们进行编程的系统中发生的动作或事件，系统会告诉您这些信息，以便我们可以在需要时以某种方式响应这些事件。例如，如果用户选择网页上的一个按钮，则可能希望通过显示一个对话框来响应该操作。

了解事件的基础知识：

HTML

  

    Button 1
    Button 2
    Button 3
  
    
        const firstBtn = document.querySelector(".first");
        const secondBtn = document.querySelector(".second");
        const thirdBtn = document.querySelector(".third");
  
        firstBtn.addEventListener('click', ()=>{
            console.log("Button 1 is Clicked");
        });
        secondBtn.addEventListener('click', ()=>{
            console.log("Button 2 is Clicked");
        });
  
        thirdBtn.addEventListener('click', ()=>{
            console.log("Button 3 is Clicked");
        });
  
    

  

输出：

Button 1 is Clicked
Button 2 is Clicked
Button 3 is Clicked

当单击按钮 1 时，我们在控制台中获得输出，因为单击按钮 1并且类似地取决于单击的按钮。在这里，我们有一个与查找单击事件的按钮相关联的事件处理程序。

在 JavaScript 中，我们有一个事件对象，它包含与事件相关的所有信息，可用于找出正在触发的事件。考虑上面的示例，现在我们进行以下修改。

HTML

  

    Button 1
    Button 2
    Button 3
  
    
        const firstBtn = document.querySelector(".first");
        const secondBtn = document.querySelector(".second");
        const thirdBtn = document.querySelector(".third");
  
        firstBtn.addEventListener('click', (e)=>{
            console.log(e.target);
        });
  
        secondBtn.addEventListener('click', (e)=>{
            console.log(e.target);
        });
  
        thirdBtn.addEventListener('click', (e)=>{
            console.log(e.target);
        });
    

输出：

Button 1
Button 2
Button 3

我们已将事件对象作为参数传递给将在触发事件时执行的函数。 target 属性告诉我们触发事件的元素，因此我们得到了我们想要的答案。这就是我们如何使用 JavaScript 中的事件对象来知道哪个元素被触发或什么类型的元素被触发。

如果我们只用e替换e.target ，我们将获得事件对象作为输出，可用于提取有关事件的任何信息。

HTML

  

    Button 1
    Button 2
    Button 3
  
    
        const firstBtn = document.querySelector(".first");
        const secondBtn = document.querySelector(".second");
        const thirdBtn = document.querySelector(".third");
  
        firstBtn.addEventListener('click', (e)=>{
            console.log(e.type);
        });
  
        secondBtn.addEventListener('click', (e)=>{
            console.log(e.type);
        });
  
        thirdBtn.addEventListener('click', (e)=>{
            console.log(e.type);
        });
    

  

输出：

click
click
click