Home Web Front-end JS Tutorial Summary of Javascript browser events_javascript skills

Summary of Javascript browser events_javascript skills

May 16, 2016 pm 06:34 PM
javascript event Browser

事件本身相当直观,常用的有:

事件 描述
abort 图片被阻止而不能加载
blur,focus 失去焦点,获得焦点
change 适用于表单元素,当元素使其焦点的时候判断是否发生改变
click,dblclick 单击,双击
keydown,keyup,keypress 按下键,键离开,按下键的时候触发,注意keypress只对数字字母键有效
load 加载图片或者页面的时候
mousedown,mouseup 按下键,放开键
mouseover,mouseout over是当鼠标进入的时候出发,out是离开的时候触发
mousemove 鼠标移动
reset,submit 重置和提交表单

The above is just a list of commonly used events. For a complete and specific list, you can find the relevant manual.

1. Event processing on level 0 DOM
The event processing method on level 0 DOM is relatively early and is currently widely used. It has been supported since IE4.0 class method.

1.1 Event Registration
The following mainly introduces how to add response events, that is, add handlers for events.

(1) Inline registration

This is the simplest one. Set the event responder as an attribute of the html tag, as in the following example, which can be code, Of course, more often than not it is a function call. The handle of an event is generally the name of the event plus the prefix on.

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

This method is very simple. Any browser supports it. The disadvantage is that Javascript code and HTML code are mixed together, and event responders cannot be added dynamically, nor can multiple responders be added.

(2) Traditional registration

This mode adds events as attributes of the object. For example:

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
]
1.2 Events Parameters (Event object)

Some event handlers need more information about the event, such as the location where the click event occurred, etc. This information is passed to the event handler through event parameters. The IE event model and the W3C event model implement this differently.

IE uses the event object as a property of the window object, while W3C uses the event object as a parameter of the handler. Taking the click event as an example, we write a program for IE and a browser that supports W3C standards.

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh it to execute
]

This page code can be All properties of the click event object are displayed. The above example is the method used by W3C browsers. To use it under IE, just change it to onclick="IEClick()". Note that the parameter name in W3CClick can only be event. There are many attributes printed out. I ran them in FF3.5, Chrome3, and IE8 (standard mode and compatibility mode). They don’t have many attributes in common. In fact, it is only these common attributes that are meaningful. They are:

altKey, shiftKey, ctrlKey: whether to press the alt, shift, ctrl key

clientX, clientY: client area coordinates (browser window), screenX, screenY: screen area coordinates
type: event type

Although the event parameters are passed in a slightly different way, it does not cause too much trouble when writing cross-browser code. You only need to judge at the beginning of the function Just check whether window.event is defined. Copy code
The code is as follows:


function BothClick(args) {
var evnt = window.event ? window.event : args;
alert(evnt.clientX);
}
注册句柄为:
a
如果采用第二种方式注册句柄,则不需要什么特别处理。

1.3 事件的浮升
页面上的对象通常是重叠的,比如一个div中可以包括若干div或者其他元素。当某一事件触发的时候,同时有多个元素受影响,并且它们都有相应的事件处理程序,那么这些事件处理程序执行哪些?以何种顺序执行?这就是本节要讨论的问题。通常情况下,一个事件被多个句柄捕获的情形并不多见。先看一个例子(CSS省略):

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

在body,外层div和内层div都响应了click事件,结果如下:
image 
可见,事件是由内向外层的元素依次触发的。(一般教材上的说法是向上浮升,bubbling,我觉得这个向上是有歧义的,我一开始就误认为内层的元素是上面的,因为它能覆盖外层的元素)用0级DOM注册的事件,它的浮升方法无论是IE还是W3C都是统一的。

1.4 浮升的取消
有时候我们需要在响应了一个事件之后,就不需要外层的元素再响应了,可以取消事件的浮升。取消的方法IE和W3C是不一致的。IE是通过设置事件对象的cancelBubble属性来实现,W3C则是调用事件对象的stopPropagation方法。

例如上面的例子改为:
复制代码 代码如下:

function inner_click(arg){
var evnt=window.event?window.event:arg;
var dis=document.getElementById("res");
dis.innerHTML+="Inner Click
";
if(evnt.stopPropagation){
evnt.stopPropagation();
}else{
evnt.cancelBubble=true;
}
}


其他不变,这样就只能看到一行输出。

1.5 事件处理函数中的this
这个this指向的是触发事件的对象。

下面介绍2级DOM的事件句柄。这种方式是比较新的方式,它不依赖于任何特定的事件句柄属性。W3C规定的方式是

object.addEventListener(‘event',function,boolean)

第一个参数是事件名,第二个是事件响应函数,第三个变量如果是true,则事件函数在事件冒泡阶段被触发,否则是在事件的捕获阶段被触发。W3C规定事件的发生有两个阶段,首先是捕获,即事件以此从最外层层的元素向内层传递,相应的事件处理函数被依次触发,然后是冒泡阶段,事件从最内层的元素向外层传递。 看一个例子:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

点击灰色框,会依次弹出body true,div true,div false,body false. 很遗憾,IE不支持这种方式,最新的IE8也不支持。不过IE也有类似的注册事件的方法,名字是attachEvent.不过这个方法没有第三个参数,它支持冒泡阶段的事件响应。attachEvent函数传递事件参数的时候是和W3C一致的,也是通过event参数传递,但是,其函数内部的this指向的不是触发事件对象,而永远指向window。在event对象中有一个属性指向触发该事件的对象,W3C中是target,IE中是srcElement, 在符合W3C规范的浏览器中,事件处理函数中的this和event.target指向的是同一个对象。下面的程序展示了一个IE和W3C兼容的事件处理程序:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

事件处理程序中W3C和IE还有诸多不一致之处,十分麻烦。好在大多都有较好的解决方案。更多信息请参考http://www.quirksmode.org/js/events_events.html
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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

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)

Coinbase Exchange Login Port 2025 Coinbase Exchange Login Port 2025 Mar 21, 2025 pm 05:51 PM

Coinbase Security Login Guide: How to Avoid Phishing Sites and Scams? Phishing and scams are becoming increasingly rampant, and it is crucial to securely access the Coinbase official login portal. This article provides practical guides to help users securely find and use the latest official login portal of Coinbase to protect the security of digital assets. We will cover how to identify phishing sites, and how to log in securely through official websites, mobile apps or trusted third-party platforms, and provide suggestions for enhancing account security, such as using a strong password and enabling two-factor verification. To avoid asset losses due to incorrect login, be sure to read this article carefully!

The latest registration portal for Ouyi official website The latest registration portal for Ouyi official website Mar 21, 2025 pm 05:54 PM

As the world's leading digital asset trading platform, Ouyi OKX attracts many investors with its rich trading products, strong security guarantees and convenient user experience. However, the risks of network security are becoming increasingly severe, and how to safely register the official Ouyi OKX account is crucial. This article will provide the latest registration portal for Ouyi OKX official website, and explain in detail the steps and precautions for safe registration, including how to identify the official website, set a strong password, enable two-factor verification, etc., to help you start your digital asset investment journey safely and conveniently. Please note that there are risks in digital asset investment, please make cautious decisions.

Ouyi Exchange app domestic download tutorial Ouyi Exchange app domestic download tutorial Mar 21, 2025 pm 05:42 PM

This article provides a detailed guide to safe download of Ouyi OKX App in China. Due to restrictions on domestic app stores, users are advised to download the App through the official website of Ouyi OKX, or use the QR code provided by the official website to scan and download. During the download process, be sure to verify the official website address, check the application permissions, perform a security scan after installation, and enable two-factor verification. During use, please abide by local laws and regulations, use a safe network environment, protect account security, be vigilant against fraud, and invest rationally. This article is for reference only and does not constitute investment advice. Digital asset transactions are at your own risk.

Ouyi Exchange web version registration portal Ouyi registration portal Ouyi Exchange web version registration portal Ouyi registration portal Mar 20, 2025 pm 05:48 PM

This article details how to register an account on the official website of Ouyi OKX Exchange and start cryptocurrency trading. As the world's leading cryptocurrency exchange, Ouyi provides a wide range of trading varieties, multiple trading methods and strong security guarantees, and supports convenient withdrawal of a variety of fiat and cryptocurrencies. The article covers the search methods for Ouyi official website registration entrance, detailed registration steps (including email/mobile registration, information filling, verification code verification, etc.), as well as precautions after registration (KYC certification, security settings, etc.), and answers common questions to help novice users quickly and safely complete Ouyi account registration and start a cryptocurrency investment journey.

Binance Exchange app domestic download tutorial Binance Exchange app domestic download tutorial Mar 21, 2025 pm 05:45 PM

This article provides a safe and reliable Binance Exchange App download guide to help users solve the problem of downloading Binance App in the country. Due to restrictions on domestic application stores, the article recommends priority to downloading APK installation packages from Binance official website, and introduces three methods: official website download, third-party application store download, and friends sharing. At the same time, it emphasizes security precautions during the download process, such as verifying the official website address, checking application permissions, scanning with security software, etc. In addition, the article also reminds users to understand local laws and regulations, pay attention to network security, protect personal information, beware of fraud, rational investment, and secure transactions. At the end of the article, the article once again emphasized that downloading and using Binance App must comply with local laws and regulations, and at your own risk, and does not constitute any investment advice.

Log in to the latest official website of BitMEX exchange Log in to the latest official website of BitMEX exchange Mar 21, 2025 pm 06:06 PM

This article provides safe and reliable guides to help users access the latest official website of BitMEX exchange and improve transaction security. Due to regulatory and cybersecurity threats, it is crucial to identify the official BitMEX website and avoid phishing websites stealing account information and funds. The article introduces the search for official website portals through trusted cryptocurrency platforms, official social media, news media, and subscribes to official emails. It emphasizes the importance of checking domain names, using HTTPS connections, checking security certificates, and enabling two-factor verification and changing passwords regularly. Remember, cryptocurrency trading is high risk, please invest with caution.

binance official website real-name authentication portal 2025 binance official website real-name authentication portal 2025 Mar 18, 2025 pm 01:51 PM

Binance official website real-name authentication tutorial: Improve account security, unlock more transaction functions and higher amounts! This article guides you in detail to complete Binance account authentication, including logging in to the official website, entering the verification page, selecting the authentication level (basic, intermediate, and advanced, covering uploading of ID cards, passports and other documents and video verification), and viewing review results. Quickly complete Binance real-name authentication to ensure the safety of your account and enjoy a more convenient transaction experience!

Detailed explanation of the issuance price and issuance time of LOOM coins Detailed explanation of the issuance price and issuance time of LOOM coins Mar 20, 2025 pm 06:21 PM

LOOM Coin, a once-highly-known blockchain game and social application development platform token, its ICO was held on April 25, 2018, with an issue price of approximately US$0.076 per coin. This article will conduct in-depth discussion on the issuance time, price and important precautions of LOOM coins, including market volatility risks and project development prospects. Investors should be cautious and do not follow the trend blindly. It is recommended to refer to the official website of Loom Network, blockchain browser and cryptocurrency information platform to obtain the latest information and conduct sufficient risk assessment. The information in this article is for reference only and does not constitute investment advice. Learn about LOOM coins, start here!

See all articles