Table of Contents
Interface events
Mouse events
Form events
W3C events
Microsoft events
Mozilla events
Event handler
Continue
Home Web Front-end JS Tutorial JavaScript Event Learning Chapter 2 Event Browser Compatibility_javascript skills

JavaScript Event Learning Chapter 2 Event Browser Compatibility_javascript skills

May 16, 2016 pm 06:35 PM
event compatibility Browser

The events presented here have names that are recognized by most browsers when they occur on a specific HTML element. That is, the browser will look for the event handler script you registered for this HTML element, and it will be executed immediately.
There are only a few events in the beginning. These events work in almost all JavaScript browsers, even very old ones. Note that those early events only work on links or forms, and sometimes on the entire window, but not most other HTML elements.
Times have changed, and many new events have been introduced to you. Fourth generation browsers and higher allow events to be registered on any HTML element.
So you can basically bind any event on any element, although binding a keydown on

doesn’t make much sense.
See the full browser event compatibility list here.

Interface events

Interface events are not triggered by user actions, but by the results of user actions.
When the user clicks on any element, a click time will be triggered. When a click occurs on an element with special meaning, additional interface events will be triggered.
For example, when the user clicks on a link, the click time is triggered. Click this link and a new page will be loaded, so this special click event causes the interface event unload to be triggered.
Other interface events include resize, scroll and focus/blur.

Mouse events

Starting from Netscape 2, all browsers have noticed these two facts. When the mouse enters a link area, the mouseover event is triggered. When he clicks on this link, the click event is triggered. Soon after mouseout was added, it will be triggered when the mouse leaves the link area. Therefore the Traditional Mouse Event Triad (Traditional Triad) was established.
The third generation of browsers has made some extensions to mouse events. dbclick has been added, and the click event is divided into mousedown and mouseup: the user presses and pops up the mouse button. Finally, mousemove tracking the trajectory of the mouse
has also become possible
In the following chapters, mouse events will be explained in detail.

Form events

Forms can recognize submit and reset events. Submit is triggered when the user submits the form. Reset is triggered when the form is reset. The submit event is the core of all form validation code. When the user submits the form, the form is traversed to check for incorrect data. If an error is found, stop submitting the form and issue a warning to the user.
The form can also identify focus and blur events, as well as keyboard events and click events when an item gains or loses focus. Additional compatibility lists can be viewed.
Generally be careful when using these events. It's entirely possible to use onblur to validate data when the user navigates away from an item in a form, but this is often annoying. Users don’t want to see any pop-up prompts when they are busy filling out a form.

W3C events

In W3C’s DOM 2 event specification also defines some Mutation events. These events are triggered when the document's DOM structure changes. The most common one is the DOMSubtreeModified event, which is triggered when the DOM changes.
Mozilla sets this event to subtreemodified. Mozilla also does not support other w3c events that we have not mentioned.

Microsoft events

Microsoft has created a lot of events. Some are very interesting.
The comtextmenu event will be triggered when the user clicks the right mouse button at any time. This is useful enough to abuse. Mozilla also supports this event.
When an XML file is imported, the readystatechange event is served like some load events. When the readyState of the XML document becomes 4, the document is loaded. (Don’t ask me what readyState is, it works and is enough)
What is surprising is that there is a beforeunload event before the unload event occurs. It was designed to cancel closing the page, but no one cared.
Finally, Microsoft also invented the mouseenter and mouseleave events, which are almost the same as the mouseover and mouseout events.See chapter Mouse Events.
Of course the above events are only supported by IE.

Mozilla events

Mozilla, of course, also has a lot of its own events. I haven't studied it carefully yet.

Event handler

All events will be detected by the browser whenever they are triggered. Browsers also typically execute default procedures, such as when a user clicks on a link. But sometimes nothing happens.

The whole point of event handlers is that you can make other things happen. You can have the browser execute your script when an event occurs. If you write it like this then your script will be executed whenever the event occurs. If these scripts are useful on a logical basis, your users will be very happy.

In order to ensure that your script can be executed when the event is triggered, you need to register the event for a certain action of the HTML element, like the following:


      这样脚本里的alert('I\'ve been clicked!')就会在click事件发生的时候执行。这就注册了一个事件处理程序。<br>
Copy after login

Continue

If you want to continue learning, please read the next chapter.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1664
14
PHP Tutorial
1268
29
C# Tutorial
1246
24
How to register an account on Ouyi Exchange Ouyi Exchange Registration Tutorial How to register an account on Ouyi Exchange Ouyi Exchange Registration Tutorial Apr 24, 2025 pm 02:06 PM

The steps to register an Ouyi account are as follows: 1. Prepare a valid email or mobile phone number and stabilize the network. 2. Visit Ouyi’s official website. 3. Enter the registration page. 4. Select email or mobile phone number to register and fill in the information. 5. Obtain and fill in the verification code. 6. Agree to the user agreement. 7. Complete registration and log in, carry out KYC and set up security measures.

Binance download link Binance download path Binance download link Binance download path Apr 24, 2025 pm 02:12 PM

To safely download the Binance APP, you need to go through the official channels: 1. Visit the Binance official website, 2. Find and click the APP download portal, 3. Choose to scan the QR code, app store, or directly download the APK file to download to ensure that the link and developer information are authentic, and enable two-factor verification to protect the security of the account.

Download the official website of Ouyi Exchange app for Apple mobile phone Download the official website of Ouyi Exchange app for Apple mobile phone Apr 28, 2025 pm 06:57 PM

The Ouyi Exchange app supports downloading of Apple mobile phones, visit the official website, click the "Apple Mobile" option, obtain and install it in the App Store, register or log in to conduct cryptocurrency trading.

Sesame Open Door Official Website Entrance Sesame Open Door Official Latest Entrance 2025 Sesame Open Door Official Website Entrance Sesame Open Door Official Latest Entrance 2025 Apr 28, 2025 pm 07:51 PM

Sesame Open Door is a platform that focuses on cryptocurrency trading. Users can obtain portals through official websites or social media to ensure that the authenticity of SSL certificates and website content is verified during access.

Binance official website entrance Binance official latest entrance 2025 Binance official website entrance Binance official latest entrance 2025 Apr 28, 2025 pm 07:54 PM

Visit Binance official website and check HTTPS and green lock logos to avoid phishing websites, and official applications can also be accessed safely.

How to register an account on Sesame Open Exchange? Tutorial on Registration of Sesame Open Exchange How to register an account on Sesame Open Exchange? Tutorial on Registration of Sesame Open Exchange Apr 24, 2025 pm 02:00 PM

Registering a Sesame Door Account requires 7 steps: 1. Prepare a valid email or mobile phone number and a stable network; 2. Visit the official website; 3. Enter the registration page; 4. Select and fill in the registration method; 5. Obtain and fill in the verification code; 6. Agree to the user agreement; 7. Complete registration and log in, it is recommended to carry out KYC and set security measures.

What is on-chain transaction? What are the global transactions? What is on-chain transaction? What are the global transactions? Apr 22, 2025 am 10:06 AM

EU MiCA compliance certification, covering 50 fiat currency channels, cold storage ratio 95%, and zero security incident records. The US SEC licensed platform has convenient direct purchase of fiat currency, a ratio of 98% cold storage, institutional-level liquidity, supports large-scale OTC and custom orders, and multi-level clearing protection.

What to do if the USDT transfer address is incorrect? Guide for beginners What to do if the USDT transfer address is incorrect? Guide for beginners Apr 21, 2025 pm 12:12 PM

After the USDT transfer address is incorrect, first confirm that the transfer has occurred, and then take measures according to the error type. 1. Confirm the transfer: view the transaction history, obtain and query the transaction hash value on the blockchain browser. 2. Take measures: If the address does not exist, wait for the funds to be returned or contact customer service; if it is an invalid address, contact customer service and seek professional help; if it is transferred to someone else, try to contact the payee or seek legal help.

See all articles