Detailed explanation of the difference between this and event in js

This article mainly brings you an article based on the difference between this and event in js (detailed explanation). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Today I saw the two parameter passing forms of this and event in the chapter "Introduction to JavaScript Classic - Events". Because as a junior front-end developer, I have only used this to pass parameters, so I really want to figure out what is the difference between this and event, and which one is more appropriate to use under what circumstances.

onclick = changeImg(this) vs onclick = changeImg(event)

<img src=&#39;usa.gif&#39; onclick="changeImg(event)" />
<script>
　　var myImages = [
　　　　'usa.gif'，'canada.gif','jamaica.gif','mexico.gif'
　　];
　　function changeImg(e) {
　　　　var el = e.target;
　　　　var newImgNumber = Math.round(Math.round()*3);
　　　　while(el.src.indexOf(myImages[newImgNumber]) != -1){
　　　　　　el.src =myImages[newImgNumber];
　　　　}
　　}
</script>

1.this is a keyword in the Javascript language.

2.this represents an internal object automatically generated when the function is running and can only be used inside the function.

3. The difference between this and event.target:

Events in js will bubble up, so this can change, but event.target will not change (when the event is triggered , only passing the reference of the current event object), it is always the target DOM element that directly accepts the event;

In addition, this and event.target are both DOM objects. If you want to use the method in jquey, you can convert them For jquery objects: $(this) and $(event.target);

Related recommendations:

detailed explanation of event bus non-parent-child component communication in vue

Detailed explanation of the use of addEventListener in JavaScript

Detailed introduction to events

The above is the detailed content of Detailed explanation of the difference between this and event in js. For more information, please follow other related articles on the PHP Chinese website!