How to use js to bind DOM events in the project
Jun 15, 2018 pm 03:46 PM
This time I will show you how to use js to bind DOM events in the project. What are the precautions for using js to bind DOM events in the project? The following is a practical case, let's take a look.
js event binding
JavaScript has three event models:
Inline model
Script model
DOM2 model
##1. Inline model
//基本廢除不用 <input type="button" value="按鈕" onclick="alert('Lee');" /> <input type="button" value="按鈕" onclick="box();" />
2. Script model
//基本不用
var?input?=?document.getElementsByTagName('input')[0];?//得到?input?對(duì)象
?input.onclick?=?function?()?{?//匿名函數(shù)執(zhí)行
?alert('Lee');
};
事件處理函數(shù)?影響的元素?何時(shí)發(fā)生
onabort?圖像?當(dāng)圖像加載被中斷時(shí)
onblur?窗口、框架、所有表單對(duì)象?當(dāng)焦點(diǎn)從對(duì)象上移開(kāi)時(shí)
onchange?輸入框，選擇框和文本區(qū)域?當(dāng)改變一個(gè)元素的值且失去焦點(diǎn)時(shí)
onclick?鏈接、按鈕、表單對(duì)象、圖像映射區(qū)域?當(dāng)用戶單擊對(duì)象時(shí)
ondblclick?鏈接、按鈕、表單對(duì)象?當(dāng)用戶雙擊對(duì)象時(shí)
ondragdrop?窗口?當(dāng)用戶將一個(gè)對(duì)象拖放到瀏覽器窗口時(shí)
onError?腳本?當(dāng)腳本中發(fā)生語(yǔ)法錯(cuò)誤時(shí)
onfocus?窗口、框架、所有表單對(duì)象?當(dāng)單擊鼠標(biāo)或者將鼠標(biāo)移動(dòng)聚焦到窗口或框架時(shí)
onkeydown?文檔、圖像、鏈接、表單?當(dāng)按鍵被按下時(shí)
onkeypress?文檔、圖像、鏈接、表單?當(dāng)按鍵被按下然后松開(kāi)時(shí)
onkeyup?文檔、圖像、鏈接、表單?當(dāng)按鍵被松開(kāi)時(shí)
onload?主題、框架集、圖像?文檔或圖像加載后
onunload?主體、框架集?文檔或框架集卸載后
onmouseout?鏈接?當(dāng)圖標(biāo)移除鏈接時(shí)
onmouseover?鏈接?當(dāng)鼠標(biāo)移到鏈接時(shí)
onmove?窗口?當(dāng)瀏覽器窗口移動(dòng)時(shí)
onreset?表單復(fù)位按鈕?單擊表單的?reset?按鈕
onresize?窗口?當(dāng)選擇一個(gè)表單對(duì)象時(shí)
onselect?表單元素?當(dāng)選擇一個(gè)表單對(duì)象時(shí)
onsubmit?表單?當(dāng)發(fā)送表格到服務(wù)器時(shí)
3. Inline model
"DOM2-level events" defines two methods for adding events And operations to remove event handlers:addEventListener() and removeEventListener(). These two methods are included in all DOM nodes, and they both accept 3 parameters; event name, function, bubbling or captured Boolean value (true means capturing, false means bubbling)
window.addEventListener('load',?function?()?{
?alert('Lee');
},?false);
window.removeEventListener('load',?function?()?{
?alert('Mr.Lee');
},?false)PS: IE implements two methods similar to those in DOM: attachEvent() and detachEvent(). Both methods accept the same parameters: event name and function.
1.?IE?不支持捕獲，只支持冒泡；
2.?IE?添加事件不能屏蔽重復(fù)的函數(shù)；
3.?IE?中的?this?指向的是?window?而不是?DOM?對(duì)象。
4.?在傳統(tǒng)事件上，IE?是無(wú)法接受到?event?對(duì)象的，但使用了?attchEvent()卻可以，但有些區(qū)別。
"javascript
window.attachEvent('load',?function?()?{
?alert('Lee');
},?false);
window.detachEvent('load',?function?()?{
?alert('Mr.Lee');
},?false)
"PS: The event binding functions attachEvent() and detachEvent() in IE may not be used in practice There are several reasons for using: 1. IE9 will fully support the event binding function in W3C; 2. IE’s event binding function cannot pass this; 3. IE's event binding function does not support capture; 4. After the same function is registered and bound, it is not blocked; 5. There is a memory leak problemI believe I read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:
How to operate angularjs cache
The above is the detailed content of How to use js to bind DOM events in the project. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to bind a sub-account on Xiaohongshu? How does it check whether the account is normal?
Mar 21, 2024 pm 10:11 PM
In today's era of information explosion, the construction of personal brand and corporate image has become increasingly important. As the leading fashion life sharing platform in China, Xiaohongshu has attracted a large number of user attention and participation. For those users who want to expand their influence and improve the efficiency of content dissemination, binding sub-accounts has become an effective means. So, how does Xiaohongshu bind a sub-account? How to check whether the account is normal? This article will answer these questions for you in detail. 1. How to bind a sub-account on Xiaohongshu? 1. Log in to your main account: First, you need to log in to your Xiaohongshu main account. 2. Open the settings menu: click "Me" in the upper right corner, and then select "Settings". 3. Enter account management: In the settings menu, find the "Account Management" or "Account Assistant" option and click
BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange?
Apr 26, 2024 am 09:40 AM
MetaMask (also called Little Fox Wallet in Chinese) is a free and well-received encryption wallet software. Currently, BTCC supports binding to the MetaMask wallet. After binding, you can use the MetaMask wallet to quickly log in, store value, buy coins, etc., and you can also get 20 USDT trial bonus for the first time binding. In the BTCCMetaMask wallet tutorial, we will introduce in detail how to register and use MetaMask, and how to bind and use the Little Fox wallet in BTCC. What is MetaMask wallet? With over 30 million users, MetaMask Little Fox Wallet is one of the most popular cryptocurrency wallets today. It is free to use and can be installed on the network as an extension
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ??and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
How to create a stock candlestick chart using PHP and JS
Dec 17, 2023 am 08:08 AM
How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
How to bind the Cainiao app to Pinduoduo? How to add the Cainiao Wrap to Pinduoduo platform?
Mar 19, 2024 pm 02:30 PM
The Cainiao app is a platform that can provide you with various logistics information. The functions here are very powerful and easy to use. If you have any logistics-related problems, they can be solved here. Anyway, it can bring you a The one-stop service can solve everything in time. Checking the express delivery, picking up the express delivery, sending the express delivery, etc. are all without any problems. We have cooperated with various platforms and all the information can be queried. However, sometimes It will happen that the goods purchased on Pinduoduo cannot display the logistics information. In fact, you need to manually bind Pinduoduo to achieve this. The specific methods have been sorted out below, and everyone can take a look. . How to bind Cainiao to Pinduoduo account: 1. Open Cainiao APP and go to the main page
Steps and methods to bind Douyin in Toutiao
Mar 22, 2024 pm 05:56 PM
1. Open Toutiao. 2. Click My in the lower right corner. 3. Click [System Settings]. 4. Click [Account and Privacy Settings]. 5. Click the button on the right side of [Douyin] to bind Douyin.
How to bind the Cainiao APP to Pinduoduo How to bind the Cainiao APP to Pinduoduo
Mar 19, 2024 pm 05:16 PM
Do you know how to bind Pinduoduo when using Cainiao Wrap? The official version of Cainiao Wrap App does not automatically synchronize some Pinduoduo’s logistics information on this platform. All we need to do is You can copy the order number or check your mobile phone to see if there is any express delivery information. Of course, these all need to be completed manually. If you want to know more, come and take a look with the editor. How to bind the Cainiao APP to Pinduoduo 1. Open the Cainiao APP and click "Package Guide" in the upper left corner of the main page. 2. In the interface, there are many shopping websites, and accounts can be bound. 3. Click to import other e-commerce platforms. 4. User authorization: Click Pinduoduo to go to the interface
