javascript中事件

Imagine this scenario: You are building a list of users. You’re displaying their names, favorite colors, and emails. When you click on a user (one row in the table), you want it to take you to the user record. Except for when you click on email, then it should pop up an email dialog.

想象一下这种情况：您正在建立一个用户列表。 您正在显示他们的姓名，最喜欢的颜色和电子邮件。 单击用户(表中的一行)时，您希望它带您到用户记录。 除了单击电子邮件时，它应该会弹出一个电子邮件对话框。

You might write some code like this (we’re using a table here because it’s easy to understand — though of course we might use something much more complicated in our project):

您可能会编写类似以下的代码(我们在这里使用表是因为它易于理解-尽管我们在项目中当然可以使用复杂得多的东西)：

    
       
        
           
Name
           
Colors
           
Email
        
       
       
        
           
Susie
           
Blue, Red
           
susie@hello.com
        
       
    

If you wanted to click on one of those rows, you’d probably add an onClick function to the row. That way if they click anywhere in the row, they can go straight to the user record.

如果您想单击这些行之一，则可能会向该行添加onClick函数。 这样，如果他们单击行中的任意位置，则可以直接进入用户记录。

To take care of the email, we’ll do an <a href> tag on the text.

为了处理电子邮件，我们将在文本上添加一个<a hr ef>标签。

But wait! The email dialog pops up, but we also navigate to the user record. That’s not what we want! How do we handle this? Enter event propagation.

可是等等！ 电子邮件对话框弹出，但我们也导航到用户记录 。 那不是我们想要的！ 我们该如何处理？ 输入事件传播。

简而言之，事件传播。 (Event propagation in a nutshell.)

Event propagation is a way to describe the “stack” of events that are fired in a web browser. In our table example above, clicking on the a tag is the first event that we will fire, but there are other events too.

事件传播是一种描述在Web浏览器中触发的事件“堆栈”的方式。 在上面的表格例如，点击a标签，我们将触发第一个事件，但也有其他的活动了。

To understand that concept, you must understand that the elements on a web browser are nested. They do not cover each other up. So a click on the a tag also clicks on the row, the table, the div in which the table is nested, and anything else all the way out to document , the complete container that holds everything in your browser.

要理解该概念，您必须了解Web浏览器上的元素是嵌套的。 它们不会互相掩盖。 因此，单击a标记也会单击行，表，嵌套表的div以及所有其他要document到document中的东西，即包含浏览器中所有内容的完整容器。

If we’ve put any other onClick events inside of these other elements, they will also be fired when we click on the a link in the table. That’s why we will be directed to the user record when we click on the email link. It’s going to perform both the onClick function for the a link and the onClick function for the row.

如果我们在这些其他元素中放置了其他onClick事件，则在单击表中a链接时也会触发它们。 因此，当我们单击电子邮件链接时，我们将被定向到用户记录。 这将执行双方onClick为函数a链接和onClick该行功能。

泡泡 (Bubbles)

The movement of events “up” from the most-nested element ( a) out to the least-nested ( document) is referred to as “bubbling.” If events start in the “outer-most” element and moved “down,” that is referred to as “trickling.” All you probably care about is the default behavior: bubbling.

事件从最嵌套的元素( a )“向上移动”到最不嵌套的( document )移动被称为“冒泡”。 如果事件从“最外层”元素开始并向“下层”移动，则称为“滴流”。 您可能只关心默认行为：冒泡。

如何利用事件传播来发挥自己的优势 (How to use event propagation to your advantage)

Honestly, I hadn’t run into any use-case for caring about event propagation until this week, when I needed to build a table with a checkbox in it. Unfortunately for me, when I tried to set up the checking functionality, it took me to the record. Fortunately, I did some training earlier (see references below) that gave me a clue on exactly what I had to Google.

老实说，直到本周，当我需要建立一个带有复选框的表时，我才碰到任何用例来关注事件传播。 对我来说不幸的是，当我尝试设置检查功能时，这使我进入了记录。 幸运的是，我之前进行了一些培训(请参阅下面的参考资料)，从而为我提供了有关Google的确切信息。

You probably already know that when you create an onClick event, it is passed to whatever function you call.

您可能已经知道，当创建onClick事件时，该事件会传递给您调用的任何函数。

So here, I was able to write:

所以在这里，我能够写：

handleCheck = e => {  e.stopPropagation()  // talk to my API, set the record as "done" or not}[]

That e.stopPropagation() halts this “bubbling” of events “up” through the DOM. We stop all of the other events in the stack. Awesome!

该e.stopPropagation()停止了通过DOM“向上”进行的事件“冒泡”。 我们停止堆栈中的所有其他事件。 太棒了！

So my whole row gets to behave as it should, and this one little checkbox can have a special functionality.

因此，我的整个行都将按应有的方式运行，并且这个小复选框可以具有特殊的功能。

preventDefault与stopPropagation (preventDefault vs. stopPropagation)

You may be thinking: why not just use e.preventDefault()? That is indeed the first thing I tried, but there simply is no default behavior for a span (unlike a form, whose default submit behavior will refresh the page).

您可能在想：为什么不只使用e.preventDefault() ？ 这确实是我尝试过的第一件事，但是跨度根本没有默认行为(与表单不同，表单的默认提交行为将刷新页面)。

剪切和粘贴示例 (Cut-and-paste example)

I write a lot of React, so I’m giving an example in React. But this would work the same in plain old HTML and JavaScript, using whatever method you’ve got to add event listeners:

我写了很多React，所以我在React中举一个例子。 但是，使用添加事件侦听器所需的任何方法，这在普通的旧HTML和JavaScript中也将相同：

    
      console.log('outer div')}>  
     
       console.log('middle div')}>    
      
        console.log('innermost div')}>      Click me!    
      
  
     
    

Event propagation: bubbles without the champagne.

事件传播：没有香槟的气泡。

参考文献 (References)

• Big shouts to who first introduced me to this concept in his #Javascript30 . I would have had no idea what to Google when I ran into the problem identified in the table example above if I hadn’t first seen it during the course.

  向大喊大叫，他首先在他的＃Javascript30 向我介绍了这个概念。 如果我没有在课程中第一次见到上面表格示例中确定的问题，我将不知道该如何处理Google。

• , which nicely sums up some of the more nuanced bits of event capture and propagation.

  很好地总结了事件捕获和传播的一些更细微的差别。

翻译自:

javascript中事件