Home > Developer > JavaScript
1. Dom event binding to Parent element
<!DOCTYPE HTML><HTMLLang= "zh"> <Head> <MetaCharSet= "UTF-8" /> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0" /> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge" /> <title>Target and Currenttarget</title> </Head> <Body> <ulID= "ul"> <Li>1</Li> <Li>2</Li> <Li>3</Li> </ul> <Scripttype= "Text/javascript"> varul=document.getElementById ('ul'); Ul.onclick= function(e) {Console.log ( This); //UL DOM nodeConsole.log ( This ===e.target); //The Click event True target FalseConsole.log ( This ===e.currenttarget); //inside the event handler, the object this is always equal to the value of Currenttarget return ture } </Script> </Body></HTML>
2. DOM events are bound to themselves on the DOM
<!DOCTYPE HTML><HTMLLang= "zh"> <Head> <MetaCharSet= "UTF-8" /> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0" /> <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge" /> <title>Target and Currenttarget</title> </Head> <Body> <ulID= "ul"> <LiID= "Li">1</Li> <Li>2</Li> <Li>3</Li> </ul> <Scripttype= "Text/javascript"> varLi=document.getElementById ('Li'); Li.onclick= function(e) {Console.log ( This); //Li Dom nodeConsole.log ( This ===e.target); //The Click event True target TrueConsole.log ( This ===e.currenttarget); //inside the event handler, the object this is always equal to the value of Currenttarget return ture } </Script> </Body></HTML>
Summarize:
(1) This inside the event is the DOM that binds the event
(2) Inside the event handler, the object this is always equal to the value of Currenttarget.
(3) Inside the event handler, the value of target is the real DOM that actually triggers the event (such as the parent node binding event, the event that the child node triggers)
JavaScript target differs from Currenttarget
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
