Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

Time:2021-6-11

Hello, I’m Qiu Feng.

Well, I’m here again. This time, it’s a problem arising from the discussion between Nanxi and.

So what happened?

cause

Recently, Nanxi was reading articles related to events, and then came to discuss with me that the execution effect of the following code is inconsistent with the online articles, and the code is as follows:

<div>
    <button>123</button>
</div>
<script>
  var btn = document.querySelector('button');
  var div = document.querySelector('div');
  btn.addEventListener('click', function () {
    console.log('bubble', 'btn');
  }, false);
  btn.addEventListener('click', function () {
    console.log('capture', 'btn');
  }, true);
  div.addEventListener('click', function () {
    console.log('bubble', 'div');
  }, false);
  div.addEventListener('click', function () {
    console.log('capture', 'div');
  }, true);
</script>

The above is a very simple event registration code, and then we clickbutton

Don’t look at the results first, think about it.

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

Then let’s look at the results

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

For the vast majority of front-end old birds, they will blurt out the following order.

capture div
bubble btn
capture btn
bubble div

explore

But whether it’s MDN or most of the online tutorials, it’s in this order.

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

I am very confused about this phenomenon. I vaguely remember that a few months ago, chrome did not behave like this. Is it because of the chrome version?

The chrome version of the above animation is 90.0.4430.212

So I found a chrome version 84.0.4109.0 to test.

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

Sure enough, it’s a problem with the version, but it’s still very difficult to track things. Because I searched the specification and some information on Google, it didn’t help me to solve this problem. I’m not sure it’s because of the bug introduced by chrome or something wrong.

So I reported this to chromium.

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

Finally, with the help of chrome developers, we found these two discussions

https://github.com/whatwg/dom…

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

https://github.com/whatwg/dom…

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

As can be seen from the above issues, the reason is thathttps://bugs.webkit.org/show_…Some people point out that the current event model in WebKit will cause the capture event of child element to be triggered prior to that of parent element in the case of shadow dom.

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

In the old model, once at is reached_ Target, all registered listeners will be triggered in order, regardless of whether they are marked for capture or not. Because shadow DOM creates multiple targets, the sequence of events is wrong.

However, gecko (the typesetting engine of Mozilla Firefox) works normally (capture first, then bubble). to this endwhatwgA new model structure is proposed to solve this problem.

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

conclusion

All the questions have been solved. So far, let’s sort out our problems.

1. According to the old version of event trigger mechanism
performance The order of event triggered by the target element is related to the order of event registered
2. New event trigger mechanism
performance The sequence of target element triggering events is in the order of capturing first and then bubbling

The dividing line of this version is in chrome 89.0.4363.0 and 89.0.4358.0.

Chrome 89.0.4363.0 was released on December 22, 2020, which is what happened in recent months. Therefore, if you update chrome in recent months, you will encounter the same phenomenon as me.

In chrome 89.0.4363.0 and later,The trigger event sequence of the target element is no longer triggered in the order of registrationBut in accordance with the first capture and then bubble in the form of execution!

Then let’s see what kind of impact this change will have on us.

  1. First of all, we need to make it clear that most of the previous articles on the Internet are no longer applicable to the current new version of chrome!
  2. If there is a dependency related event trigger sequence in our business, please check it carefully!

For example

<div>
    <button>123</button>
</div>
<script>
  var a = [];
  var btn = document.querySelector('button');
  var div = document.querySelector('div');
  btn.addEventListener('click', function () {
    console.log('bubble', 'btn');
    a.push(1);
  }, false);
  btn.addEventListener('click', function () {
    console.log('capture', 'btn');
    a.push(2);
  }, true);
  div.addEventListener('click', function () {
    console.log('bubble', 'div');
  }, false);
  div.addEventListener('click', function () {
    console.log('capture', 'div');
  }, true);
</script>

In the new version, when the button element is clicked, the final result of a is [2,1], while in the old version, the result is [1,2].

How to reform some online code at this stage?

Improvement plan

So now we can’t control which version of browser users use, how to solve this problem to avoid online problems?

It’s very simple.

We only need to write the capture event code first, and then the bubble event code in the order of all the target element codes, so that we can be compatible with this update.

reflection

All things are not immutable, no matter for some relatively official articles or tutorials, we should be skeptical and believe what we see. Maybe my comment will be a wrong example in many years, but it is a record of the current problems. This article also has many shortcomings, if you have any questions, please point out in the comments.

reference material

https://chromium.cypress.io/

https://github.com/whatwg/dom…

https://bugs.webkit.org/show_…

https://github.com/whatwg/dom…

https://dom.spec.whatwg.org/#…

epilogue

❤️ Follow + like + collect + comment + forward ❤️It’s not easy to be original and encourage the author to create better articles

Official accountNotes of autumn windA front end official account focused on front-end interview, engineering and open source.

Chrome 89 updates the trigger sequence of events, resulting in 99% of articles being wrong (including MDN)

Recommended Today

The road of high salary, a more complete summary of MySQL high performance optimization in history

preface MySQL for many linux practitioners, is a very difficult problem, most of the cases are because of the database problems and processing ideas are not clear. Before the optimization of MySQL, we must understand the query process of MySQL. In fact, a lot of query optimization work is to follow some principles so that […]