Question: What's the difference between `event.stopPropagation()` and `event.stopImmediatePropagation()`?

Answer: 
I am a late comer, but maybe I can say this with a specific example:

Say, if you have a `<table>`, with `<tr>`, and then `<td>`. Now, let's say you set 3 event handlers for the `<td>` element, then if you do `event.stopPropagation()` in the first event handler you set for `<td>`, **then all event handlers for `<td>` will still run**, but the event just won't propagate to `<tr>` or `<table>` (and won't go up and up to `<body>`, `<html>`, `document`, and `window`).

Now, however, if you use `event.stopImmediatePropagation()` in your first event handler, then, **the other two event handlers for `<td>` WILL NOT run**, and won't propagate up to `<tr>`, `<table>` (and won't go up and up to `<body>`, `<html>`, `document`, and `window`).

Note that it is not just for `<td>`. For other elements, it will follow the same principle.
Here is a demo to illustrate the difference:

```js
document.querySelectorAll("button")[0].addEventListener('click', e=>{
  e.stopPropagation();
  alert(1);
});
document.querySelectorAll("button")[1].addEventListener('click', e=>{
  e.stopImmediatePropagation();
  alert(1);
});
document.querySelectorAll("button")[0].addEventListener('click', e=>{
  alert(2);
});
document.querySelectorAll("button")[1].addEventListener('click', e=>{
  alert(2);
});
```

```html
<div onclick="alert(3)">
   <button>1...2</button>
   <button>1</button>
</div>
```

Notice that you can attach multiple event handlers to an event on an element.