CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>DOM event - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"fd9e23ed-616c-485e-9365-190041e2394a","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"DOM_event","wgTitle":"DOM event","wgCurRevisionId":1223966426,"wgRevisionId":1223966426,"wgArticleId":1507852,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Webarchive template wayback links","CS1 maint: bot: original URL status unknown","Articles with short description","Short description matches Wikidata","Wikipedia articles with style issues from July 2018","All articles with style issues","Wikipedia articles that are too technical from July 2018","All articles that are too technical","Articles with multiple maintenance issues","Wikipedia articles needing clarification from April 2012","All articles with unsourced statements", "Articles with unsourced statements from April 2017","Articles containing potentially dated statements from 2005","All articles containing potentially dated statements","Articles with unsourced statements from September 2012","World Wide Web Consortium standards","Application programming interfaces","Events (computing)"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"DOM_event","wgRelevantArticleId":1507852,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true}, "wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":40000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q2529081","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","ext.pygments":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles": "ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","ext.pygments.view","site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.quicksurveys.init","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.pygments%2CwikimediaBadges%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="DOM event - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/DOM_event"> <link rel="alternate" type="application/x-wiki" title="Edit this page" href="/w/index.php?title=DOM_event&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/DOM_event"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-DOM_event rootpage-DOM_event skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=DOM+event" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=DOM+event" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=DOM+event" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=DOM+event" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-Events" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Events</span> </div> </a> <button aria-controls="toc-Events-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Events subsection</span> </button> <ul id="toc-Events-sublist" class="vector-toc-list"> <li id="toc-HTML_events" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#HTML_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>HTML events</span> </div> </a> <ul id="toc-HTML_events-sublist" class="vector-toc-list"> <li id="toc-Common_events" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Common_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.1</span> <span>Common events</span> </div> </a> <ul id="toc-Common_events-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Touch_events" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Touch_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.2</span> <span>Touch events</span> </div> </a> <ul id="toc-Touch_events-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Pointer_events" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Pointer_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.3</span> <span>Pointer events</span> </div> </a> <ul id="toc-Pointer_events-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Indie_UI_events" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Indie_UI_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.4</span> <span>Indie UI events</span> </div> </a> <ul id="toc-Indie_UI_events-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Internet_Explorer-specific_events" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Internet_Explorer-specific_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.5</span> <span>Internet Explorer-specific events</span> </div> </a> <ul id="toc-Internet_Explorer-specific_events-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-XUL_events" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#XUL_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>XUL events</span> </div> </a> <ul id="toc-XUL_events-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Other_events" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Other_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3</span> <span>Other events</span> </div> </a> <ul id="toc-Other_events-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Event_flow" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Event_flow"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Event flow</span> </div> </a> <button aria-controls="toc-Event_flow-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Event flow subsection</span> </button> <ul id="toc-Event_flow-sublist" class="vector-toc-list"> <li id="toc-Stopping_events" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Stopping_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Stopping events</span> </div> </a> <ul id="toc-Stopping_events-sublist" class="vector-toc-list"> <li id="toc-Legacy_mechanisms_to_stop_an_event" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Legacy_mechanisms_to_stop_an_event"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1.1</span> <span>Legacy mechanisms to stop an event</span> </div> </a> <ul id="toc-Legacy_mechanisms_to_stop_an_event-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Canceling_events" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Canceling_events"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>Canceling events</span> </div> </a> <ul id="toc-Canceling_events-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Event_object" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Event_object"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Event object</span> </div> </a> <ul id="toc-Event_object-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Event_handling_models" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Event_handling_models"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Event handling models</span> </div> </a> <button aria-controls="toc-Event_handling_models-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Event handling models subsection</span> </button> <ul id="toc-Event_handling_models-sublist" class="vector-toc-list"> <li id="toc-DOM_Level_0" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#DOM_Level_0"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>DOM Level 0</span> </div> </a> <ul id="toc-DOM_Level_0-sublist" class="vector-toc-list"> <li id="toc-Inline_model" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Inline_model"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1.1</span> <span>Inline model</span> </div> </a> <ul id="toc-Inline_model-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Traditional_model" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Traditional_model"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1.2</span> <span>Traditional model</span> </div> </a> <ul id="toc-Traditional_model-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-DOM_Level_2" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#DOM_Level_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>DOM Level 2</span> </div> </a> <ul id="toc-DOM_Level_2-sublist" class="vector-toc-list"> <li id="toc-A_rewrite_of_the_example_used_in_the_traditional_model" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#A_rewrite_of_the_example_used_in_the_traditional_model"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2.1</span> <span>A rewrite of the example used in the traditional model</span> </div> </a> <ul id="toc-A_rewrite_of_the_example_used_in_the_traditional_model-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Internet_Explorer-specific_model" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Internet_Explorer-specific_model"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3</span> <span>Internet Explorer-specific model</span> </div> </a> <ul id="toc-Internet_Explorer-specific_model-sublist" class="vector-toc-list"> <li id="toc-A_rewrite_of_the_example_used_in_the_old_Internet_Explorer-specific_model" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#A_rewrite_of_the_example_used_in_the_old_Internet_Explorer-specific_model"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3.1</span> <span>A rewrite of the example used in the old Internet Explorer-specific model</span> </div> </a> <ul id="toc-A_rewrite_of_the_example_used_in_the_old_Internet_Explorer-specific_model-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Further_reading" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Further_reading"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Further reading</span> </div> </a> <ul id="toc-Further_reading-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-External_links" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#External_links"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>External links</span> </div> </a> <ul id="toc-External_links-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">DOM event</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 2 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-2" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">2 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/DOM_%EC%9D%B4%EB%B2%A4%ED%8A%B8" title="DOM 이벤트 – Korean" lang="ko" hreflang="ko" data-title="DOM 이벤트" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-sr mw-list-item"><a href="https://sr.wikipedia.org/wiki/DOM_%D0%B4%D0%BE%D0%B3%D0%B0%D1%92%D0%B0%D1%98%D0%B8" title="DOM догађаји – Serbian" lang="sr" hreflang="sr" data-title="DOM догађаји" data-language-autonym="Српски / srpski" data-language-local-name="Serbian" class="interlanguage-link-target"><span>Српски / srpski</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q2529081#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/DOM_event" title="View the content page [c]" accesskey="c"><span>Article</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:DOM_event" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/DOM_event"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=DOM_event&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=DOM_event&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/DOM_event"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=DOM_event&action=edit" title="Edit this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=DOM_event&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/DOM_event" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/DOM_event" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=DOM_event&oldid=1223966426" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=DOM_event&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=DOM_event&id=1223966426&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDOM_event"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FDOM_event"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=DOM_event&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=DOM_event&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q2529081" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">Signal for Document Object Model</div> <style data-mw-deduplicate="TemplateStyles:r1251242444">.mw-parser-output .ambox{border:1px solid #a2a9b1;border-left:10px solid #36c;background-color:#fbfbfb;box-sizing:border-box}.mw-parser-output .ambox+link+.ambox,.mw-parser-output .ambox+link+style+.ambox,.mw-parser-output .ambox+link+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+style+.ambox,.mw-parser-output .ambox+.mw-empty-elt+link+link+.ambox{margin-top:-1px}html body.mediawiki .mw-parser-output .ambox.mbox-small-left{margin:4px 1em 4px 0;overflow:hidden;width:238px;border-collapse:collapse;font-size:88%;line-height:1.25em}.mw-parser-output .ambox-speedy{border-left:10px solid #b32424;background-color:#fee7e6}.mw-parser-output .ambox-delete{border-left:10px solid #b32424}.mw-parser-output .ambox-content{border-left:10px solid #f28500}.mw-parser-output .ambox-style{border-left:10px solid #fc3}.mw-parser-output .ambox-move{border-left:10px solid #9932cc}.mw-parser-output .ambox-protection{border-left:10px solid #a2a9b1}.mw-parser-output .ambox .mbox-text{border:none;padding:0.25em 0.5em;width:100%}.mw-parser-output .ambox .mbox-image{border:none;padding:2px 0 2px 0.5em;text-align:center}.mw-parser-output .ambox .mbox-imageright{border:none;padding:2px 0.5em 2px 0;text-align:center}.mw-parser-output .ambox .mbox-empty-cell{border:none;padding:0;width:1px}.mw-parser-output .ambox .mbox-image-div{width:52px}@media(min-width:720px){.mw-parser-output .ambox{margin:0 10%}}@media print{body.ns-0 .mw-parser-output .ambox{display:none!important}}</style><style data-mw-deduplicate="TemplateStyles:r1248332772">.mw-parser-output .multiple-issues-text{width:95%;margin:0.2em 0}.mw-parser-output .multiple-issues-text>.mw-collapsible-content{margin-top:0.3em}.mw-parser-output .compact-ambox .ambox{border:none;border-collapse:collapse;background-color:transparent;margin:0 0 0 1.6em!important;padding:0!important;width:auto;display:block}body.mediawiki .mw-parser-output .compact-ambox .ambox.mbox-small-left{font-size:100%;width:auto;margin:0}.mw-parser-output .compact-ambox .ambox .mbox-text{padding:0!important;margin:0!important}.mw-parser-output .compact-ambox .ambox .mbox-text-span{display:list-item;line-height:1.5em;list-style-type:disc}body.skin-minerva .mw-parser-output .multiple-issues-text>.mw-collapsible-toggle,.mw-parser-output .compact-ambox .ambox .mbox-image,.mw-parser-output .compact-ambox .ambox .mbox-imageright,.mw-parser-output .compact-ambox .ambox .mbox-empty-cell,.mw-parser-output .compact-ambox .hide-when-compact{display:none}</style><table class="box-Multiple_issues plainlinks metadata ambox ambox-content ambox-multiple_issues compact-ambox" role="presentation"><tbody><tr><td class="mbox-image"><div class="mbox-image-div"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/b/b4/Ambox_important.svg/40px-Ambox_important.svg.png" decoding="async" width="40" height="40" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/b/b4/Ambox_important.svg/60px-Ambox_important.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/b/b4/Ambox_important.svg/80px-Ambox_important.svg.png 2x" data-file-width="40" data-file-height="40" /></span></span></div></td><td class="mbox-text"><div class="mbox-text-span"><div class="multiple-issues-text mw-collapsible"><b>This article has multiple issues.</b> Please help <b><a href="/wiki/Special:EditPage/DOM_event" title="Special:EditPage/DOM event">improve it</a></b> or discuss these issues on the <b><a href="/wiki/Talk:DOM_event" title="Talk:DOM event">talk page</a></b>. <small><i>(<a href="/wiki/Help:Maintenance_template_removal" title="Help:Maintenance template removal">Learn how and when to remove these messages</a>)</i></small> <div class="mw-collapsible-content"> <style data-mw-deduplicate="TemplateStyles:r1248666159">.mw-parser-output .tfd-dated{font-size:85%}.mw-parser-output .tfd-default{border-bottom:1px solid var(--border-color-base,#a2a9b1);clear:both;text-align:center}.mw-parser-output .tfd-tiny{font-weight:bold}.mw-parser-output .tfd-inline{border:1px solid var(--border-color-base,#a2a9b1)}.mw-parser-output .tfd-sidebar{border-bottom:1px solid var(--border-color-base,#a2a9b1);text-align:center;position:relative}@media(min-width:640px){.mw-parser-output .tfd-sidebar{clear:right;float:right;width:22em}}</style><span class="tfd tfd-dated tfd-inline">‹The <a href="/wiki/Help:Template" title="Help:Template">template</a> <i><a href="/wiki/Template:Manual" title="Template:Manual">Manual</a></i> is being <a href="/wiki/Wikipedia:Templates_for_discussion/Log/2024_November_25#Template:Manual" title="Wikipedia:Templates for discussion/Log/2024 November 25">considered for merging</a>.›</span> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1251242444"><table class="box-Manual plainlinks metadata ambox ambox-style" role="presentation"><tbody><tr><td class="mbox-image"><div class="mbox-image-div"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/f/f2/Edit-clear.svg/40px-Edit-clear.svg.png" decoding="async" width="40" height="40" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/f/f2/Edit-clear.svg/60px-Edit-clear.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/f/f2/Edit-clear.svg/80px-Edit-clear.svg.png 2x" data-file-width="48" data-file-height="48" /></span></span></div></td><td class="mbox-text"><div class="mbox-text-span">This article <b>is written like <a href="/wiki/Wikipedia:What_Wikipedia_is_not#GUIDE" title="Wikipedia:What Wikipedia is not">a manual or guide</a>.</b><span class="hide-when-compact"> Please help <a class="external text" href="https://en.wikipedia.org/w/index.php?title=DOM_event&action=edit">rewrite this article</a> and remove advice or instruction.</span> <span class="date-container"><i>(<span class="date">July 2018</span>)</i></span></div></td></tr></tbody></table> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1251242444"><table class="box-Technical plainlinks metadata ambox ambox-style ambox-technical" role="presentation"><tbody><tr><td class="mbox-image"><div class="mbox-image-div"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/f/f2/Edit-clear.svg/40px-Edit-clear.svg.png" decoding="async" width="40" height="40" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/f/f2/Edit-clear.svg/60px-Edit-clear.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/f/f2/Edit-clear.svg/80px-Edit-clear.svg.png 2x" data-file-width="48" data-file-height="48" /></span></span></div></td><td class="mbox-text"><div class="mbox-text-span">This article <b>may be too technical for most readers to understand</b>.<span class="hide-when-compact"> Please <a class="external text" href="https://en.wikipedia.org/w/index.php?title=DOM_event&action=edit">help improve it</a> to <a href="/wiki/Wikipedia:Make_technical_articles_understandable" title="Wikipedia:Make technical articles understandable">make it understandable to non-experts</a>, without removing the technical details.</span> <span class="date-container"><i>(<span class="date">July 2018</span>)</i></span><span class="hide-when-compact"><i> (<small><a href="/wiki/Help:Maintenance_template_removal" title="Help:Maintenance template removal">Learn how and when to remove this message</a></small>)</i></span></div></td></tr></tbody></table> </div> </div><span class="hide-when-compact"><i> (<small><a href="/wiki/Help:Maintenance_template_removal" title="Help:Maintenance template removal">Learn how and when to remove this message</a></small>)</i></span></div></td></tr></tbody></table> <p><b>DOM (Document Object Model) Events</b> are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> <a href="/wiki/Client-side" class="mw-redirect" title="Client-side">Client-side</a> scripting languages like <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a>, <a href="/wiki/JScript" title="JScript">JScript</a>, <a href="/wiki/VBScript" title="VBScript">VBScript</a>, and <a href="/wiki/Java_(programming_language)" title="Java (programming language)">Java</a> can register various <a href="/wiki/Event_(computing)#Event_handler" title="Event (computing)">event handlers</a> or <a href="/wiki/Event_(computing)" title="Event (computing)">listeners</a> on the element nodes inside a <a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a> tree, such as in <a href="/wiki/HTML" title="HTML">HTML</a>, <a href="/wiki/XHTML" title="XHTML">XHTML</a>, <a href="/wiki/XUL" title="XUL">XUL</a>, and <a href="/wiki/Scalable_Vector_Graphics" class="mw-redirect" title="Scalable Vector Graphics">SVG</a> documents. </p><p>Examples of DOM Events: </p> <ul><li>When a user clicks the mouse</li> <li>When a web page has loaded</li> <li>When an image has been loaded</li> <li>When the mouse moves over an element</li> <li>When an input field is changed</li> <li>When an HTML form is submitted</li> <li>When a user presses a key<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></li></ul> <p>Historically, like DOM, the event models used by various <a href="/wiki/Web_browser" title="Web browser">web browsers</a> had some significant differences which caused compatibility problems. To combat this, the event model was standardized by the <a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">World Wide Web Consortium</a> (W3C) in DOM Level 2. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Events">Events</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=1" title="Edit section: Events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="HTML_events">HTML events</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=2" title="Edit section: HTML events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading4"><h4 id="Common_events">Common events</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=3" title="Edit section: Common events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>There is a huge collection of events that can be generated by most element nodes: </p> <ul><li><a href="/wiki/Computer_mouse" title="Computer mouse">Mouse</a> events.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup></li> <li><a href="/wiki/Computer_keyboard" title="Computer keyboard">Keyboard</a> events.</li> <li>HTML frame/object events.</li> <li>HTML form events.</li> <li>User interface events.</li> <li>Mutation events (notification of any changes to the structure of a document).</li> <li>Progress events<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> (used by <a href="/wiki/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> and File API<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>).</li></ul> <p>Note that the event classification above is not exactly the same as W3C's classification. </p> <table class="wikitable"> <tbody><tr> <th>Category </th> <th><a href="#DOM_Level_2">Type</a> </th> <th><a href="#DOM_Level_0">Attribute</a> </th> <th>Description </th> <th>Bubbles </th> <th>Cancelable </th></tr> <tr> <td rowspan="14">Mouse </td> <td>click </td> <td>onclick </td> <td>Fires when the <a href="/wiki/Pointing_device" title="Pointing device">pointing device</a> button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is: <ul><li>mousedown</li> <li>mouseup</li> <li>click</li></ul> </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dblclick </td> <td>ondblclick </td> <td>Fires when the pointing device button is <a href="/wiki/Double-click" title="Double-click">double-clicked</a> over an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>mousedown </td> <td>onmousedown </td> <td>Fires when the pointing device button is pressed over an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>mouseup </td> <td>onmouseup </td> <td>Fires when the pointing device button is released over an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td><a href="/wiki/Mouseover" title="Mouseover">mouseover</a> </td> <td>onmouseover </td> <td>Fires when the pointing device is moved onto an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>mousemove<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> </td> <td>onmousemove </td> <td>Fires when the pointing device is moved while it is over an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>mouseout </td> <td>onmouseout </td> <td>Fires when the pointing device is moved away from an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragstart </td> <td>ondragstart </td> <td>Fired on an element when a drag is started. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>drag </td> <td>ondrag </td> <td>This event is fired at the source of the drag, that is, the element where dragstart was fired, during the drag operation. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragenter </td> <td>ondragenter </td> <td>Fired when the mouse is first moved over an element while a drag is occurring. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragleave </td> <td>ondragleave </td> <td>This event is fired when the mouse leaves an element while a drag is occurring. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>dragover </td> <td>ondragover </td> <td>This event is fired as the mouse is moved over an element when a drag is occurring. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>drop </td> <td>ondrop </td> <td>The drop event is fired on the element where the drop occurs at the end of the drag operation. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragend </td> <td>ondragend </td> <td>The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td rowspan="3">Keyboard </td> <td>keydown </td> <td>onkeydown </td> <td>Fires before keypress, when a key on the keyboard is pressed. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>keypress </td> <td>onkeypress </td> <td>Fires after keydown, when a key on the keyboard is pressed. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>keyup </td> <td>onkeyup </td> <td>Fires when a key on the keyboard is released </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="6"><a href="/wiki/Framing_(World_Wide_Web)" class="mw-redirect" title="Framing (World Wide Web)">HTML frame</a>/object </td> <td>load </td> <td>onload </td> <td>Fires when the <a href="/wiki/User_agent" title="User agent">user agent</a> finishes loading all content within a document, including window, frames, objects and images <p>For elements, it fires when the target element and all of its content has finished loading </p> </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>unload </td> <td>onunload </td> <td>Fires when the user agent removes all content from a window or frame <p>For elements, it fires when the target element or any of its content has been removed </p> </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>abort </td> <td>onabort </td> <td>Fires when an object/image is stopped from loading before completely loaded </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>error </td> <td>onerror </td> <td>Fires when an object/image/frame cannot be loaded properly </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>resize </td> <td>onresize </td> <td>Fires when a document view is resized </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>scroll </td> <td>onscroll </td> <td>Fires when an element or document view is scrolled </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No, except that a scroll event on document must bubble to the window<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td rowspan="6"><a href="/wiki/Form_(HTML)" class="mw-redirect" title="Form (HTML)">HTML form</a> </td> <td>select </td> <td>onselect </td> <td>Fires when a user selects some text in a <a href="/wiki/Text_box" title="Text box">text field</a>, including input and textarea </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>change </td> <td>onchange </td> <td>Fires when a control loses the input <a href="/wiki/Focus_(computing)" title="Focus (computing)">focus</a> and its value has been modified since gaining focus </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>submit </td> <td>onsubmit </td> <td>Fires when a form is submitted </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>reset </td> <td>onreset </td> <td>Fires when a form is reset </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>focus </td> <td>onfocus </td> <td>Fires when an element receives focus either via the pointing device or by <a href="/wiki/Tab_order" class="mw-redirect" title="Tab order">tab navigation</a> </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>blur </td> <td>onblur </td> <td>Fires when an element loses focus either via the pointing device or by <a href="/wiki/Tabbing_navigation" title="Tabbing navigation">tabbing navigation</a> </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td rowspan="3">User interface </td> <td>focusin </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Similar to HTML focus event, but can be applied to any focusable element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>focusout </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Similar to HTML blur event, but can be applied to any focusable element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>DOMActivate </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Similar to XUL command event. Fires when an element is activated, for instance, through a mouse click or a keypress. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="7">Mutation </td> <td>DOMSubtreeModified </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Fires when the subtree is modified </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>DOMNodeInserted </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Fires when a node has been added as a child of another node </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>DOMNodeRemoved </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Fires when a node has been removed from a DOM-tree </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>DOMNodeRemovedFromDocument </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Fires when a node is being removed from a document </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>DOMNodeInsertedIntoDocument </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Fires when a node is being inserted into a document </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>DOMAttrModified </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Fires when an attribute has been modified </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>DOMCharacterDataModified </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Fires when the character data has been modified </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td rowspan="6">Progress </td> <td>loadstart </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Progress has begun. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>progress </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>In progress. After loadstart has been dispatched. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>error </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Progression failed. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>abort </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Progression is terminated. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>load </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Progression is successful. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>loadend </td> <td style="background: #EEE; color:black; vertical-align: middle; text-align: center;" class="table-cast">(none) </td> <td>Progress has stopped. After one of error, abort, or load has been dispatched. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> </tbody></table> <p>Note that the events whose names start with "DOM" are currently not well supported, and for this and other performance reasons are deprecated by the W3C in DOM Level 3. <a href="/wiki/Mozilla" title="Mozilla">Mozilla</a> and <a href="/wiki/Opera_(web_browser)" title="Opera (web browser)">Opera</a> support <i>DOMAttrModified</i>, <i>DOMNodeInserted</i>, <i>DOMNodeRemoved</i> and <i>DOMCharacterDataModified</i>. <a href="/wiki/Google_Chrome" title="Google Chrome">Chrome</a> and <a href="/wiki/Safari_(web_browser)" title="Safari (web browser)">Safari</a> support these events, except for <i>DOMAttrModified</i>. </p> <div class="mw-heading mw-heading4"><h4 id="Touch_events">Touch events</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=4" title="Edit section: Touch events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Web browsers running on <a href="/wiki/Touchscreen" title="Touchscreen">touch-enabled</a> devices, such as Apple's <a href="/wiki/IOS_(Apple)" class="mw-redirect" title="IOS (Apple)">iOS</a> and Google's <a href="/wiki/Android_(operating_system)" title="Android (operating system)">Android</a>, generate additional events.<sup id="cite_ref-w3c_v2_9-0" class="reference"><a href="#cite_note-w3c_v2-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup><sup class="reference nowrap"><span title="Page / location: §5.3">: §5.3 </span></sup> </p> <table class="wikitable"> <tbody><tr> <th>Category </th> <th>Type </th> <th>Attribute </th> <th>Description </th> <th>Bubbles </th> <th>Cancelable </th></tr> <tr> <td rowspan="6">Touch </td> <td>touchstart </td> <td> </td> <td>Fires when a finger is placed on the touch surface/screen. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>touchend </td> <td> </td> <td>Fires when a finger is removed from the touch surface/screen. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>touchmove </td> <td> </td> <td>Fires when a finger already placed on the screen is moved across the screen. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>touchenter </td> <td> </td> <td>Fires when a touch point moves onto the interactive area defined by a DOM element. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>touchleave </td> <td> </td> <td>Fires when a touch point moves off the interactive area defined by a DOM element. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>touchcancel </td> <td> </td> <td>A <a href="/wiki/User_agent" title="User agent">user agent</a> must dispatch this event type to indicate when a TouchPoint has been disrupted in an implementation-specific manner, such as by moving outside the bounds of the UA window. A user agent may also dispatch this event type when the user places more touch points (The coordinate point at which a pointer (e.g. finger or stylus) intersects the target surface of an interface) on the touch surface than the device or implementation is configured to store, in which case the earliest TouchPoint object in the TouchList should be removed.<sup id="cite_ref-w3c_v2_9-1" class="reference"><a href="#cite_note-w3c_v2-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup><sup class="reference nowrap"><span title="Page / location: §5.9">: §5.9 </span></sup> </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> </tbody></table> <p>In the <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a> draft recommendation, a <code>TouchEvent</code> delivers a <code>TouchList</code> of <code>Touch</code> locations, the <a href="/wiki/Modifier_key" title="Modifier key">modifier keys</a> that were active, a <code>TouchList</code> of <code>Touch</code> locations within the targeted DOM element, and a <code>TouchList</code> of <code>Touch</code> locations that have changed since the previous <code>TouchEvent</code>.<sup id="cite_ref-w3c_v2_9-2" class="reference"><a href="#cite_note-w3c_v2-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup> </p><p><a href="/wiki/Apple_Inc." title="Apple Inc.">Apple</a> didn't join this working group, and delayed W3C recommendation of its Touch Events Specification by disclosing <a href="/wiki/Software_patent" title="Software patent">patents</a> late in the recommendation process.<sup id="cite_ref-opera_10-0" class="reference"><a href="#cite_note-opera-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="Pointer_events">Pointer events</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=5" title="Edit section: Pointer events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Web browsers on devices with various types of input devices including mouse, touch panel, and pen may generate integrated input events. Users can see what type of input device is pressed, what button is pressed on that device, and how strongly the button is pressed when it comes to a stylus pen. As of October 2013, this event is only supported by Internet Explorer 10 and 11.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> </p> <table class="wikitable"> <tbody><tr> <th>Category </th> <th>Type </th> <th>Attribute </th> <th>Description </th> <th>Bubbles </th> <th>Cancelable </th></tr> <tr> <td rowspan="10">Pointer </td> <td>pointerdown </td> <td>onpointerdown </td> <td>Fires when the pointing device button is activated, or pressed over an element. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>pointerup </td> <td>onpointerup </td> <td>Fires when the pointing device button is released over an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>pointercancel </td> <td>onpointercancel </td> <td>Fires when a pointing device is unlikely to continue to produce event because, for example, the device is used for panning/zooming after a pointerdown event. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>pointermove </td> <td>onpointermove </td> <td>Fires when the pointing device is moved while it is over an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>pointerover </td> <td>onpointerover </td> <td>Fires when the pointing device is moved onto an element </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>pointerout </td> <td>onpointerout </td> <td>Fires when the pointing device is moved away from an element. Also fires after pointerup by pointing device without hovering, or after </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>pointerenter </td> <td>onpointerenter </td> <td>Fires when the pointing device is moved onto an element, or when the button of the pointing device which does not support hovering is pressed on one of its descendant elements. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>pointerleave </td> <td>onpointerleave </td> <td>Fires when the pointing device is moved away from an element, or when the button of the pointing device which does not support hovering is released over its descendant elements. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>gotpointercapture </td> <td>ongotpointercapture </td> <td>Fires when the pointer is captured by setPointerCapture method. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>lostpointercapture </td> <td>onlostpointercapture </td> <td>Fires when the pointer is released by releasePointerCapture method. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> </tbody></table> <div class="mw-heading mw-heading4"><h4 id="Indie_UI_events">Indie UI events</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=6" title="Edit section: Indie UI events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Not yet really implemented, the Indie UI working groups want to help web application developers to be able to support standard user interaction events without having to handle different platform specific technical events that could match with it.<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> </p><p>Scripting usable interfaces can be difficult, especially when one considers that user interface design patterns differ across software platforms, hardware, and locales, and that those interactions can be further customized based on personal preference. Individuals are accustomed to the way the interface works on their own system, and their preferred interface frequently differs from that of the web application author's preferred interface. </p><p>For example, web application authors, wishing to intercept a user's intent to undo the last action, need to "listen" for all the following events: </p> <ul><li>Control+Z on Windows and Linux.</li> <li>Command+Z on Mac OS X.</li> <li>Shake events on some mobile devices.</li></ul> <p>It would be simpler to listen for a single, normalized request to "undo" the previous action. </p> <table class="wikitable"> <tbody><tr> <th>Category </th> <th>Type </th> <th>Description </th> <th>Bubbles </th> <th>Cancelable </th></tr> <tr> <td rowspan="6">Request </td> <td>undorequest </td> <td>Indicates the user desires to "undo" the previous action. (May be superseded by the UndoManager interface.) </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>redorequest </td> <td>Indicates the user desires to "redo" the previously "undone" action. (May be superseded by the UndoManager interface.) </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>expandrequest </td> <td>Indicates the user desires to reveal information in a collapsed section (e.g. a disclosure widget) or branch node in a hierarchy (e.g., a <a href="/wiki/Tree_view" title="Tree view">tree view</a>). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>collapserequest </td> <td>Indicates the user desires to hide or collapse information in an expanded section (e.g. a disclosure widget) or branch node in a hierarchy (e.g., a tree view). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dismissrequest </td> <td>Indicates the user desires "dismiss" the current view (e.g. canceling a dialog, or closing a popup menu). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>deleterequest </td> <td>Indicates the user wants to initiate a "delete" action on the marked element or current view. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="4">Focus Request </td> <td>directionalfocusrequest </td> <td>Initiated when the user agent sends a "direction focus" request to the web application. Web authors should not use or register for directionalfocusrequest events when standard browser focus and blur events are sufficient. Using these events unnecessarily could result in reduced performance or negative user experience. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>linearfocusrequest </td> <td>Initiated when the user agent sends a "linear focus" request to the web application. Web authors should not use or register for linearfocusrequest events when standard browser focus and blur events are sufficient. This event type is only necessary on specialized control types such as data grids where the logical next element may not be focusable or even in the DOM until requested. Using these events unnecessarily could result in reduced performance or negative user experience. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>palettefocusrequest </td> <td>Initiated when the user agent sends a "palette focus" request to the web application. Web app authors receiving this event should move focus to the first palette in the web application, or cycle focus between all available palettes. Note: palettes are sometimes referred to as non-modal dialogs or inspector windows. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>toolbarfocusrequest </td> <td>Initiated when the user agent sends a "toolbar focus" request to the web application. Web app authors receiving this event should move focus to the main toolbar in the web application, or cycle focus between all available toolbars. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="4">Manipulation Request </td> <td>moverequest </td> <td>Initiated when the user agent sends a move request to the web application with accompanying x/y delta values. This is used, for example, when moving an object to a new location on a layout canvas. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>panrequest </td> <td>Initiated when the user agent sends a pan request to the web application with accompanying x/y delta values. This is used, for example, when changing the center point while panning a map or another custom image viewer. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>rotationrequest </td> <td>Initiated when the user agent sends a rotation request to the web application with accompanying origin x/y values and a rotation value in degrees. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>zoomrequest </td> <td>Initiated when the user agent sends a zoom request to the web application with accompanying origin x/y values and the zoom scale factor. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="1">Scroll Request </td> <td>scrollrequest </td> <td>Initiated when the user agent sends a scroll request to the web application with accompanying x/y delta values or one of the other defined scrollType values. Authors should only use this event and uiaction with custom scroll views. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="1">ValueChange Request </td> <td>valuechangerequest </td> <td>Initiated when the user agent sends a value change request to the web application. Used on custom range controls like sliders, carousels, etc. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> </tbody></table> <div class="mw-heading mw-heading4"><h4 id="Internet_Explorer-specific_events">Internet Explorer-specific events</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=7" title="Edit section: Internet Explorer-specific events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In addition to the common (W3C) events, two major types of events are added by <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a>. Some of the events have been implemented as <a href="/wiki/De_facto_standard" title="De facto standard">de facto standards</a> by other browsers. </p> <ul><li><a href="/wiki/Clipboard_(computing)" title="Clipboard (computing)">Clipboard</a> events.</li> <li>Data binding events.<sup class="noprint Inline-Template" style="margin-left:0.1em; white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Please_clarify" title="Wikipedia:Please clarify"><span title="The text near this tag may need clarification or removal of jargon. (April 2012)">clarification needed</span></a></i>]</sup></li></ul> <table class="wikitable"> <tbody><tr> <th>Category </th> <th>Type </th> <th>Attribute </th> <th>Description </th> <th>Bubbles </th> <th>Cancelable </th></tr> <tr> <td rowspan="6">Clipboard </td> <td>cut </td> <td>oncut </td> <td>Fires after a selection is cut to the clipboard. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>copy </td> <td>oncopy </td> <td>Fires after a selection is copied to the clipboard. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>paste </td> <td>onpaste </td> <td>Fires after a selection is pasted from the clipboard. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>beforecut </td> <td>onbeforecut </td> <td>Fires before a selection is cut to the clipboard. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>beforecopy </td> <td>onbeforecopy </td> <td>Fires before a selection is copied to the clipboard. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>beforepaste </td> <td>onbeforepaste </td> <td>Fires before a selection is pasted from the clipboard. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="11">Data binding </td> <td>afterupdate </td> <td>onafterupdate </td> <td>Fires immediately after a databound object has been updated. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>beforeupdate </td> <td>onbeforeupdate </td> <td>Fires before a data source is updated. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>cellchange </td> <td>oncellchange </td> <td>Fires when a data source has changed. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>dataavailable </td> <td>ondataavailable </td> <td>Fires when new data from a data source become available. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>datasetchanged </td> <td>ondatasetchanged </td> <td>Fires when content at a data source has changed. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>datasetcomplete </td> <td>ondatasetcomplete </td> <td>Fires when transfer of data from the data source has completed. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>errorupdate </td> <td>onerrorupdate </td> <td>Fires if an error occurs while updating a data field. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>rowenter </td> <td>onrowenter </td> <td>Fires when a new row of data from the data source is available. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>rowexit </td> <td>onrowexit </td> <td>Fires when a row of data from the data source has just finished. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>rowsdelete </td> <td>onrowsdelete </td> <td>Fires when a row of data from the data source is deleted. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>rowinserted </td> <td>onrowinserted </td> <td>Fires when a row of data from the data source is inserted. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td rowspan="9">Mouse </td> <td>contextmenu </td> <td>oncontextmenu </td> <td>Fires when the context menu is shown. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>drag </td> <td>ondrag </td> <td>Fires when during a <a href="/wiki/Drag_and_drop" title="Drag and drop">mouse drag</a> (on the moving Element). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragstart </td> <td>ondragstart </td> <td>Fires when a mouse drag begins (on the moving Element). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragenter </td> <td>ondragenter </td> <td>Fires when something is dragged onto an area (on the target Element). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragover </td> <td>ondragover </td> <td>Fires when a drag is held over an area (on the target Element). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragleave </td> <td>ondragleave </td> <td>Fires when something is dragged out of an area (on the target Element). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragend </td> <td>ondragend </td> <td>Fires when a mouse drag ends (on the moving Element). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>drop </td> <td>ondrop </td> <td>Fires when a mouse button is released over a valid target during a drag (on the target Element). </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>selectstart </td> <td>onselectstart </td> <td>Fires when the user starts to select text. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>Keyboard </td> <td>help </td> <td>onhelp </td> <td>Fires when the user initiates help. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="2">HTML frame/object </td> <td>beforeunload </td> <td>onbeforeunload </td> <td>Fires before a document is unloaded. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>stop </td> <td>onstop </td> <td>Fires when the user stops loading the object. (unlike abort, stop event can be attached to document) </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>HTML form </td> <td>beforeeditfocus </td> <td>onbeforeeditfocus </td> <td>Fires before an element gains focus for editing. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="3">Marquee </td> <td>start </td> <td>onstart </td> <td>Fires when a marquee begins a new loop. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>finish </td> <td>onfinish </td> <td>Fires when marquee looping is complete. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>bounce </td> <td>onbounce </td> <td>Fires when a scrolling marquee bounces back in the other direction. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td rowspan="6">Miscellaneous </td> <td>beforeprint </td> <td>onbeforeprint </td> <td>Fires before a document is printed </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>afterprint </td> <td>onafterprint </td> <td>Fires immediately after the document prints. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>propertychange </td> <td>onpropertychange </td> <td>Fires when the property of an object is changed. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>filterchange </td> <td>onfilterchange </td> <td>Fires when a filter changes properties or finishes a transition. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>readystatechange </td> <td>onreadystatechange </td> <td>Fires when the readyState property of an element changes. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>losecapture </td> <td>onlosecapture </td> <td>Fires when the releaseCapture method is invoked. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> </tbody></table> <p>Note that Mozilla, Safari and Opera also support the readystatechange event for the <a href="/wiki/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a> object. Mozilla also supports the beforeunload event using the traditional event registration method (DOM Level 0). Mozilla and Safari also support contextmenu, but Internet Explorer for Mac does not. </p><p>Note that Firefox 6 and later support the beforeprint and afterprint events. </p> <div class="mw-heading mw-heading3"><h3 id="XUL_events">XUL events</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=8" title="Edit section: XUL events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In addition to the common (W3C) events, Mozilla defined a set of events that work only with <a href="/wiki/XUL" title="XUL">XUL</a> elements.<sup class="noprint Inline-Template Template-Fact" style="white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Citation_needed" title="Wikipedia:Citation needed"><span title="This claim needs references to reliable sources. (April 2017)">citation needed</span></a></i>]</sup> </p> <table class="wikitable"> <tbody><tr> <th>Category </th> <th>Type </th> <th>Attribute </th> <th>Description </th> <th>Bubbles </th> <th>Cancelable </th></tr> <tr> <td rowspan="6">Mouse </td> <td>DOMMouseScroll </td> <td>DOMMouseScroll </td> <td>Fires when the mouse wheel is moved, causing the content to scroll. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>dragdrop </td> <td>ondragdrop </td> <td>Fires when the user releases the mouse button to <a href="/wiki/Drag_and_drop" title="Drag and drop">drop an object being dragged</a>. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>dragenter </td> <td>ondragenter </td> <td>Fires when the mouse pointer first moves over an element during a drag. It is similar to the mouseover event but occurs while dragging. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>dragexit </td> <td>ondragexit </td> <td>Fires when the mouse pointer moves away from an element during a drag. It is also called after a drop on an element. It is similar to the mouseout event but occurs during a drag. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>draggesture </td> <td>ondraggesture </td> <td>Fires when the user starts dragging the element, usually by holding down the mouse button and moving the mouse. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>dragover </td> <td>ondragover </td> <td>Related to the mousemove event, this event is fired while something is being dragged over an element. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td rowspan="5">Input </td> <td>CheckboxStateChange </td> <td> </td> <td>Fires when a checkbox is checked or unchecked, either by the user or a script. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>RadioStateChange </td> <td> </td> <td>Fires when a radio button is selected, either by the user or a script. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>close </td> <td>onclose </td> <td>Fires when a request has been made to close the window. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>command </td> <td>oncommand </td> <td>Similar to W3C DOMActivate event. Fires when an element is activated, for instance, through a mouse click or a keypress. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>input </td> <td>oninput </td> <td>Fires when a user enters text in a textbox. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td rowspan="10">User interface </td> <td>DOMMenuItemActive </td> <td>DOMMenuItemActive </td> <td>Fires when a menu or menuitem is <a href="/wiki/Mouseover" title="Mouseover">hovered over</a>, or highlighted. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>DOMMenuItemInactive </td> <td>DOMMenuItemInactive </td> <td>Fires when a menu or menuitem is no longer being hovered over, or highlighted. </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>contextmenu </td> <td>oncontextmenu </td> <td>Fires when the user requests to open the context menu for the element. The action to do this varies by platform, but it will typically be a right click. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>overflow </td> <td>onoverflow </td> <td>Fires a box or other layout element when there is not enough space to display it at full size. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>overflowchanged </td> <td>onoverflowchanged </td> <td>Fires when the overflow state changes. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>underflow </td> <td>onunderflow </td> <td>Fires to an element when there becomes enough space to display it at full size. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>popuphidden </td> <td>onpopuphidden </td> <td>Fires to a popup after it has been hidden. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>popuphiding </td> <td>onpopuphiding </td> <td>Fires to a popup when it is about to be hidden. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>popupshowing </td> <td>onpopupshowing </td> <td>Fires to a popup just before it is popped open. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#9EFF9E;color:black;vertical-align:middle;text-align:center;" class="table-yes">Yes </td></tr> <tr> <td>popupshown </td> <td>onpopupshown </td> <td>Fires to a popup after it has been opened, much like the onload event is sent to a window when it is opened. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td rowspan="2">Command </td> <td>broadcast </td> <td>onbroadcast </td> <td>Placed on an observer. The broadcast event is sent when the attributes of the broadcaster being listened to are changed. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> <tr> <td>commandupdate </td> <td>oncommandupdate </td> <td>Fires when a command update occurs. </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td> <td style="background:#FFC7C7;color:black;vertical-align:middle;text-align:center;" class="table-no">No </td></tr> </tbody></table> <div class="mw-heading mw-heading3"><h3 id="Other_events">Other events</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=9" title="Edit section: Other events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>For Mozilla and Opera 9, there are also undocumented events known as <i>DOMContentLoaded</i> and <i>DOMFrameContentLoaded</i> which fire when the DOM content is loaded. These are different from "load" as they fire before the loading of related files (e.g., images). However, DOMContentLoaded has been added to the <a href="/wiki/HTML_5" class="mw-redirect" title="HTML 5">HTML 5</a> specification.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> The DOMContentLoaded event was also implemented in the <a href="/wiki/Webkit" class="mw-redirect" title="Webkit">Webkit</a> rendering engine build 500+.<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup> This correlates to all versions of <a href="/wiki/Google_Chrome" title="Google Chrome">Google Chrome</a> and <a href="/wiki/Safari_(web_browser)" title="Safari (web browser)">Safari</a> 3.1+. DOMContentLoaded is also implemented in <a href="/wiki/IE_9" class="mw-redirect" title="IE 9">Internet Explorer 9</a>.<sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup> </p><p>Opera 9 also supports the Web Forms 2.0 events <i>DOMControlValueChanged</i>, <i>invalid</i>, <i>forminput</i> and <i>formchange</i>. </p> <div class="mw-heading mw-heading2"><h2 id="Event_flow">Event flow</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=10" title="Edit section: Event flow"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Consider the situation when two event targets participate in a <a rel="nofollow" class="external text" href="https://dom.spec.whatwg.org/#trees">tree</a>. Both have event listeners registered on the same event type, say "click". When the user clicks on the inner element, there are two possible ways to handle it: </p> <ul><li>Trigger the elements from outer to inner (event capturing). This model is implemented in <a href="/wiki/Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a>.</li> <li>Trigger the elements from inner to outer (<a href="/wiki/Event_bubbling" title="Event bubbling">event bubbling</a>). This model is implemented in Internet Explorer and other browsers.<sup id="cite_ref-quirksmode_17-0" class="reference"><a href="#cite_note-quirksmode-17"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup></li></ul> <p>W3C takes a middle position in this struggle.<sup id="cite_ref-dom2-events_18-0" class="reference"><a href="#cite_note-dom2-events-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup><sup class="reference nowrap"><span title="Page / location: §1.2">: §1.2 </span></sup> </p><p>According to the W3C, events go through three phases when an event target participates in a tree: </p> <ol><li>The capture phase: the event travels down from the root event target to the target of an event</li> <li>The target phase: the event travels through the event target</li> <li>The bubble phase (<i>optional</i>): the event travels back up from the target of an event to the root event target. The bubble phase will only occur for events that bubble (where <code>event.bubbles == true</code>)</li></ol> <p>You can find a visualization of this event flow at <a rel="nofollow" class="external free" href="https://domevents.dev">https://domevents.dev</a> </p> <div class="mw-heading mw-heading3"><h3 id="Stopping_events">Stopping events</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=11" title="Edit section: Stopping events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>While an event is travelling through event listeners, the event can be stopped with <code>event.stopPropagation()</code> or <code>event.stopImmediatePropagation()</code> </p> <ul><li><code>event.stopPropagation()</code>: the event is stopped after all event listeners attached to the current event target in the current event phase are finished</li> <li><code>event.stopImmediatePropagation()</code>: the event is stopped immediately and no further event listeners are executed</li></ul> <p>When an event is stopped it will no longer travel along the event path. Stopping an event does not cancel an event. </p> <div class="mw-heading mw-heading4"><h4 id="Legacy_mechanisms_to_stop_an_event">Legacy mechanisms to stop an event</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=12" title="Edit section: Legacy mechanisms to stop an event"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Set the <code>event.cancelBubble</code> to <code>true</code> (Internet Explorer)</li> <li>Set the <code>event.returnValue</code> property to <code>false</code></li></ul> <div class="mw-heading mw-heading3"><h3 id="Canceling_events">Canceling events</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=13" title="Edit section: Canceling events"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>A <code>cancelable</code> event can be canceled by calling <code>event.preventDefault()</code>. Canceling an event will opt out of the default browser behaviour for that event. When an event is canceled, the <code>event.defaultPrevented</code> property will be set to <code>true</code>. Canceling an event will not stop the event from traveling along the event path. </p> <div class="mw-heading mw-heading2"><h2 id="Event_object">Event object</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=14" title="Edit section: Event object"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The Event object provides a lot of information about a particular event, including information about target element, key pressed, mouse button pressed, mouse position, etc. Unfortunately, there are very serious browser incompatibilities in this area. Hence only the W3C Event object is discussed in this article. </p> <table class="wikitable"> <caption>Event properties </caption> <tbody><tr> <th>Name </th> <th>Type </th> <th>Description </th></tr> <tr> <td>type </td> <td>DOMString </td> <td>The name of the event (case-insensitive in DOM level 2 but case-sensitive in DOM level 3 <sup id="cite_ref-19" class="reference"><a href="#cite_note-19"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup>). </td></tr> <tr> <td>target </td> <td>EventTarget </td> <td>Used to indicate the EventTarget to which the event was originally dispatched. </td></tr> <tr> <td>currentTarget </td> <td>EventTarget </td> <td>Used to indicate the EventTarget whose EventListeners are currently being processed. </td></tr> <tr> <td>eventPhase </td> <td>unsigned short </td> <td>Used to indicate which phase of event flow is currently being evaluated. </td></tr> <tr> <td>bubbles </td> <td>boolean </td> <td>Used to indicate whether or not an event is a bubbling event. </td></tr> <tr> <td>cancelable </td> <td>boolean </td> <td>Used to indicate whether or not an event can have its default action prevented. </td></tr> <tr> <td>timeStamp </td> <td>DOMTimeStamp </td> <td>Used to specify the time (in milliseconds relative to the epoch) at which the event was created. </td></tr> </tbody></table> <table class="wikitable"> <caption>Event methods </caption> <tbody><tr> <th>Name </th> <th>Argument type </th> <th>Argument name </th> <th>Description </th></tr> <tr> <td>stopPropagation </td> <td> </td> <td> </td> <td>To prevent further propagation of an event during event flow. </td></tr> <tr> <td>preventDefault </td> <td> </td> <td> </td> <td>To cancel the event if it is cancelable, meaning that any default action normally taken by the implementation as a result of the event will not occur. </td></tr> <tr> <td rowspan="3">initEvent </td> <td>DOMString </td> <td>eventTypeArg </td> <td>Specifies the event type. </td></tr> <tr> <td>boolean </td> <td>canBubbleArg </td> <td>Specifies whether or not the event can bubble. </td></tr> <tr> <td>boolean </td> <td>cancelableArg </td> <td>Specifies whether or not the event's default action can be prevented. </td></tr> </tbody></table> <div class="mw-heading mw-heading2"><h2 id="Event_handling_models">Event handling models</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=15" title="Edit section: Event handling models"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="DOM_Level_0">DOM Level 0</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=16" title="Edit section: DOM Level 0"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>This event handling model was introduced by <a href="/wiki/Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a>, and remains the most cross-browser model as of 2005<sup class="plainlinks noexcerpt noprint asof-tag update" style="display:none;"><a class="external text" href="https://en.wikipedia.org/w/index.php?title=DOM_event&action=edit">[update]</a></sup>.<sup class="noprint Inline-Template Template-Fact" style="white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Citation_needed" title="Wikipedia:Citation needed"><span title="This claim needs references to reliable sources. (September 2012)">citation needed</span></a></i>]</sup> There are two model types: the inline model and the traditional model. </p> <div class="mw-heading mw-heading4"><h4 id="Inline_model">Inline model</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=17" title="Edit section: Inline model"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In the inline model,<sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup> event handlers are added as attributes of elements. In the example below, an <a href="/wiki/Alert_dialog_box" title="Alert dialog box">alert dialog box</a> with the message "Hey Joe" appears after the <a href="/wiki/Hyperlink" title="Hyperlink">hyperlink</a> is clicked. The default click action is cancelled by returning false in the event handler. </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><!doctype html></span> <span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Inline Event Handling<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Inline Event Handling<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Hey <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://www.example.com"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"triggerAlert('Joe'); return false;"</span><span class="p">></span>Joe<span class="p"></</span><span class="nt">a</span><span class="p">></span>!<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">triggerAlert</span><span class="p">(</span><span class="nx">name</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">"Hey "</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">name</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <p>One common misconception<sup class="noprint Inline-Template Template-Fact" style="white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Citation_needed" title="Wikipedia:Citation needed"><span title="This claim needs references to reliable sources. (September 2012)">citation needed</span></a></i>]</sup> with the inline model is the belief that it allows the registration of event handlers with custom arguments, e.g. <code>name</code> in the <code>triggerAlert</code> function. While it may seem like that is the case in the example above, what is really happening is that the <a href="/wiki/JavaScript_engine" title="JavaScript engine">JavaScript engine</a> of the browser creates an <a href="/wiki/Anonymous_function" title="Anonymous function">anonymous function</a> containing the statements in the <code>onclick</code> attribute. The <code>onclick</code> handler of the element would be bound to the following anonymous function: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">triggerAlert</span><span class="p">(</span><span class="s1">'Joe'</span><span class="p">);</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kc">false</span><span class="p">;</span> <span class="p">}</span> </pre></div> <p>This limitation of the JavaScript event model is usually overcome by assigning attributes to the function object of the event handler or by using <a href="/wiki/Closure_(computer_science)" class="mw-redirect" title="Closure (computer science)">closures</a>. </p> <div class="mw-heading mw-heading4"><h4 id="Traditional_model">Traditional model</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=18" title="Edit section: Traditional model"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>In the traditional model,<sup id="cite_ref-21" class="reference"><a href="#cite_note-21"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup> event handlers can be added or removed by scripts. Like the inline model, each event can only have one event handler registered. The event is added by assigning the handler name to the event property of the element object. To remove an event handler, simply set the property to null: </p> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><!doctype html></span> <span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Traditional Event Handling<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Traditional Event Handling<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Hey Joe!<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">triggerAlert</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">"Hey Joe"</span><span class="p">);</span> <span class="w"> </span><span class="p">};</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Assign an event handler</span> <span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">onclick</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">triggerAlert</span><span class="p">;</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Assign another event handler</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">triggerAlert</span><span class="p">;</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Remove the event handler that was just assigned</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kc">null</span><span class="p">;</span> <span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <p>To add parameters: </p> <div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="kd">var</span><span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">'Joe'</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nx">onclick</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">(</span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">name</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">alert</span><span class="p">(</span><span class="s1">'Hey '</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="nx">name</span><span class="w"> </span><span class="o">+</span><span class="w"> </span><span class="s1">'!'</span><span class="p">);</span> <span class="w"> </span><span class="p">};</span> <span class="p">}(</span><span class="nx">name</span><span class="p">));</span> </pre></div> <p>Inner functions preserve their <a href="/wiki/Scope_(programming)" class="mw-redirect" title="Scope (programming)">scope</a>. </p> <div class="mw-heading mw-heading3"><h3 id="DOM_Level_2">DOM Level 2</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=19" title="Edit section: DOM Level 2"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>The W3C designed a more flexible event handling model in DOM Level 2.<sup id="cite_ref-dom2-events_18-1" class="reference"><a href="#cite_note-dom2-events-18"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> </p> <table class="wikitable"> <tbody><tr> <th>Name </th> <th>Description </th> <th>Argument type </th> <th>Argument name </th></tr> <tr> <td rowspan="3">addEventListener </td> <td rowspan="3">Allows the registration of event listeners on the event target. </td> <td>DOMString </td> <td>type </td></tr> <tr> <td>EventListener </td> <td>listener </td></tr> <tr> <td>boolean </td> <td>useCapture </td></tr> <tr> <td rowspan="3">removeEventListener </td> <td rowspan="3">Allows the removal of event listeners from the event target. </td> <td>DOMString </td> <td>type </td></tr> <tr> <td>EventListener </td> <td>listener </td></tr> <tr> <td>boolean </td> <td>useCapture </td></tr> <tr> <td>dispatchEvent </td> <td>Allows sending the event to the subscribed event listeners. </td> <td>Event </td> <td>evt </td></tr> </tbody></table> <p>Some useful things to know : </p> <ul><li>To prevent an event from bubbling, developers must call the <code>stopPropagation()</code> method of the event object.</li> <li>To prevent the default action of the event to be called, developers must call the <code>preventDefault()</code> method of the event object.</li></ul> <p>The main difference from the traditional model is that multiple event handlers can be registered for the same event. The <code>useCapture</code> option can also be used to specify that the handler should be called in the capture phase instead of the bubbling phase. This model is supported by <a href="/wiki/Mozilla" title="Mozilla">Mozilla</a>, <a href="/wiki/Opera_browser" class="mw-redirect" title="Opera browser">Opera</a>, <a href="/wiki/Safari_(web_browser)" title="Safari (web browser)">Safari</a>, <a href="/wiki/Google_Chrome" title="Google Chrome">Chrome</a> and <a href="/wiki/Konqueror" title="Konqueror">Konqueror</a>. </p> <div class="mw-heading mw-heading4"><h4 id="A_rewrite_of_the_example_used_in_the_traditional_model">A rewrite of the example used in the traditional model</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=20" title="Edit section: A rewrite of the example used in the traditional model"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><!doctype html></span> <span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>DOM Level 2<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>DOM Level 2<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Hey Joe!<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">heyJoe</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">"Hey Joe!"</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Add an event handler</span> <span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="w"> </span><span class="s2">"click"</span><span class="p">,</span><span class="w"> </span><span class="nx">heyJoe</span><span class="p">,</span><span class="w"> </span><span class="kc">true</span><span class="w"> </span><span class="p">);</span><span class="w"> </span><span class="c1">// capture phase</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Add another event handler</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="w"> </span><span class="s2">"load"</span><span class="p">,</span><span class="w"> </span><span class="nx">heyJoe</span><span class="p">,</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="p">);</span><span class="w"> </span><span class="c1">// bubbling phase</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Remove the event handler just added</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">removeEventListener</span><span class="p">(</span><span class="w"> </span><span class="s2">"load"</span><span class="p">,</span><span class="w"> </span><span class="nx">heyJoe</span><span class="p">,</span><span class="w"> </span><span class="kc">false</span><span class="w"> </span><span class="p">);</span> <span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading3"><h3 id="Internet_Explorer-specific_model">Internet Explorer-specific model</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=21" title="Edit section: Internet Explorer-specific model"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Microsoft Internet Explorer prior to version 8 does not follow the W3C model, as its own model was created prior to the ratification of the W3C standard. Internet Explorer 9 follows DOM level 3 events,<sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup> and Internet Explorer 11 deletes its support for Microsoft-specific model.<sup id="cite_ref-23" class="reference"><a href="#cite_note-23"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup> </p> <table class="wikitable"> <tbody><tr> <th>Name </th> <th>Description </th> <th>Argument type </th> <th>Argument name </th></tr> <tr> <td rowspan="2">attachEvent </td> <td rowspan="2">Similar to W3C's addEventListener method. </td> <td>String </td> <td>sEvent </td></tr> <tr> <td>Pointer </td> <td>fpNotify </td></tr> <tr> <td rowspan="2">detachEvent </td> <td rowspan="2">Similar to W3C's removeEventListener method. </td> <td>String </td> <td>sEvent </td></tr> <tr> <td>Pointer </td> <td>fpNotify </td></tr> <tr> <td rowspan="2">fireEvent </td> <td rowspan="2">Similar to W3C's dispatchEvent method. </td> <td>String </td> <td>sEvent </td></tr> <tr> <td>Event </td> <td>oEventObject </td></tr> </tbody></table> <p>Some useful things to know : </p> <ul><li>To prevent an event bubbling, developers must set the event's <code>cancelBubble</code> property.</li> <li>To prevent the default action of the event to be called, developers must set the event's <code>returnValue</code> property.</li> <li>The <b><code>this</code></b> keyword refers to the global <b><code>window</code></b> object.</li></ul> <p>Again, this model differs from the traditional model in that multiple event handlers can be registered for the same event. However the <code>useCapture</code> option can not be used to specify that the handler should be called in the capture phase. This model is supported by Microsoft <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a> and <a href="/wiki/List_of_web_browsers#Trident-based_browsers" title="List of web browsers">Trident based browsers</a> (e.g. <a href="/wiki/Maxthon" title="Maxthon">Maxthon</a>, Avant Browser). </p> <div class="mw-heading mw-heading4"><h4 id="A_rewrite_of_the_example_used_in_the_old_Internet_Explorer-specific_model">A rewrite of the example used in the old Internet Explorer-specific model</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=22" title="Edit section: A rewrite of the example used in the old Internet Explorer-specific model"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp"><!doctype html></span> <span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span> <span class="p"><</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span> <span class="p"><</span><span class="nt">title</span><span class="p">></span>Internet Explorer-specific model<span class="p"></</span><span class="nt">title</span><span class="p">></span> <span class="p"></</span><span class="nt">head</span><span class="p">></span> <span class="p"><</span><span class="nt">body</span><span class="p">></span> <span class="p"><</span><span class="nt">h1</span><span class="p">></span>Internet Explorer-specific model<span class="p"></</span><span class="nt">h1</span><span class="p">></span> <span class="p"><</span><span class="nt">p</span><span class="p">></span>Hey Joe!<span class="p"></</span><span class="nt">p</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span><span class="p">></span> <span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">heyJoe</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">()</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">alert</span><span class="p">(</span><span class="s2">"Hey Joe!"</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Add an event handler</span> <span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">attachEvent</span><span class="p">(</span><span class="s2">"onclick"</span><span class="p">,</span><span class="w"> </span><span class="nx">heyJoe</span><span class="p">);</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Add another event handler</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">attachEvent</span><span class="p">(</span><span class="s2">"onload"</span><span class="p">,</span><span class="w"> </span><span class="nx">heyJoe</span><span class="p">);</span> <span class="w"> </span> <span class="w"> </span><span class="c1">// Remove the event handler just added</span> <span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">detachEvent</span><span class="p">(</span><span class="s2">"onload"</span><span class="p">,</span><span class="w"> </span><span class="nx">heyJoe</span><span class="p">);</span> <span class="w"> </span><span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">body</span><span class="p">></span> <span class="p"></</span><span class="nt">html</span><span class="p">></span> </pre></div> <div class="mw-heading mw-heading2"><h2 id="References">References</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=23" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist reflist-columns references-column-width" style="column-width: 30em;"> <ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><b><a href="#cite_ref-1">^</a></b></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://dom.spec.whatwg.org/#action-versus-occurance">"DOM Standard"</a>. <i>dom.spec.whatwg.org</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2021-05-25</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=dom.spec.whatwg.org&rft.atitle=DOM+Standard&rft_id=https%3A%2F%2Fdom.spec.whatwg.org%2F%23action-versus-occurance&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3schools.com/js/js_htmldom_events.asp">"JavaScript DOM Events"</a>. <i>www.w3schools.com</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2019-08-03</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=www.w3schools.com&rft.atitle=JavaScript+DOM+Events&rft_id=https%3A%2F%2Fwww.w3schools.com%2Fjs%2Fjs_htmldom_events.asp&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-3">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2010/WD-html5-20101019/dnd.html#the-dragevent-and-datatransfer-interfaces">"7.8 Drag and drop — HTML5"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=7.8+Drag+and+drop+%E2%80%94+HTML5&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2F2010%2FWD-html5-20101019%2Fdnd.html%23the-dragevent-and-datatransfer-interfaces&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop">"HTML Drag and Drop API"</a>. 28 March 2024.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=HTML+Drag+and+Drop+API&rft.date=2024-03-28&rft_id=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FDragDrop%2FDrag_and_Drop&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/progress-events/">"Progress Events"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Progress+Events&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Fprogress-events%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-6"><span class="mw-cite-backlink"><b><a href="#cite_ref-6">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/FileAPI/#events">"File API"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=File+API&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FFileAPI%2F%23events&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-7"><span class="mw-cite-backlink"><b><a href="#cite_ref-7">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event">"Element: Mousemove event - Web APIs | MDN"</a>. 22 December 2023.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Element%3A+Mousemove+event+-+Web+APIs+%26%23124%3B+MDN&rft.date=2023-12-22&rft_id=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FElement%2Fmousemove_event&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/DOM-Level-3-Events/">"Document Object Model (DOM) Level 3 Events Specification (working draft)"</a>. <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2013-04-17</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Document+Object+Model+%28DOM%29+Level+3+Events+Specification+%28working+draft%29&rft.pub=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FDOM-Level-3-Events%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-w3c_v2-9"><span class="mw-cite-backlink">^ <a href="#cite_ref-w3c_v2_9-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-w3c_v2_9-1"><sup><i><b>b</b></i></sup></a> <a href="#cite_ref-w3c_v2_9-2"><sup><i><b>c</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html">"Touch Events version 2 - W3C Editor's Draft"</a>. W3C. 14 November 2011<span class="reference-accessdate">. Retrieved <span class="nowrap">10 December</span> 2011</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Touch+Events+version+2+-+W3C+Editor%27s+Draft&rft.pub=W3C&rft.date=2011-11-14&rft_id=http%3A%2F%2Fdvcs.w3.org%2Fhg%2Fwebevents%2Fraw-file%2Ftip%2Ftouchevents.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-opera-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-opera_10-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://my.opera.com/haavard/blog/2011/12/09/apple-w3c">"Apple using patents to undermine open standards again"</a>. opera.com. 9 December 2011<span class="reference-accessdate">. Retrieved <span class="nowrap">9 December</span> 2011</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Apple+using+patents+to+undermine+open+standards+again&rft.pub=opera.com&rft.date=2011-12-09&rft_id=http%3A%2F%2Fmy.opera.com%2Fhaavard%2Fblog%2F2011%2F12%2F09%2Fapple-w3c&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/2013/CR-pointerevents-20130509/">"Pointer Events"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Pointer+Events&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2F2013%2FCR-pointerevents-20130509%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/indie-ui-events/">"IndieUI: Events 1.0"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=IndieUI%3A+Events+1.0&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2Findie-ui-events%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-13"><span class="mw-cite-backlink"><b><a href="#cite_ref-13">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.w3.org/TR/html5/">"HTML Standard"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=HTML+Standard&rft_id=https%3A%2F%2Fwww.w3.org%2FTR%2Fhtml5%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-14"><span class="mw-cite-backlink"><b><a href="#cite_ref-14">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external autonumber" href="http://perfectionlabstips.wordpress.com/2008/12/01/which-browsers-support-native-domcontentloaded-event/">[1]</a> <a rel="nofollow" class="external text" href="https://web.archive.org/web/20100611124414/http://perfectionlabstips.wordpress.com/2008/12/01/which-browsers-support-native-domcontentloaded-event/">Archived</a> June 11, 2010, at the <a href="/wiki/Wayback_Machine" title="Wayback Machine">Wayback Machine</a></span> </li> <li id="cite_note-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-15">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20110629162544/http://perfectionlabstips.wordpress.com/2008/12/01/which-browsers-support-native-domcontentloaded-event/">"Which browsers support native DOMContentLoaded event? « Perfection Labs Development Tips"</a>. 29 June 2011. Archived from the original on 29 June 2011.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Which+browsers+support+native+DOMContentLoaded+event%3F+%C2%AB+Perfection+Labs+Development+Tips&rft.date=2011-06-29&rft_id=http%3A%2F%2Fperfectionlabstips.wordpress.com%2F2008%2F12%2F01%2Fwhich-browsers-support-native-domcontentloaded-event%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span><span class="cs1-maint citation-comment"><code class="cs1-code">{{<a href="/wiki/Template:Cite_web" title="Template:Cite web">cite web</a>}}</code>: CS1 maint: bot: original URL status unknown (<a href="/wiki/Category:CS1_maint:_bot:_original_URL_status_unknown" title="Category:CS1 maint: bot: original URL status unknown">link</a>)</span></span> </li> <li id="cite_note-16"><span class="mw-cite-backlink"><b><a href="#cite_ref-16">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20100508033345/http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html">"Test Drive Redirect"</a>. Archived from <a rel="nofollow" class="external text" href="http://ie.microsoft.com/testdrive/HTML5/87DOMContent-Loaded/Default.html">the original</a> on 2010-05-08<span class="reference-accessdate">. Retrieved <span class="nowrap">2010-05-06</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Test+Drive+Redirect&rft_id=http%3A%2F%2Fie.microsoft.com%2Ftestdrive%2FHTML5%2F87DOMContent-Loaded%2FDefault.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-quirksmode-17"><span class="mw-cite-backlink"><b><a href="#cite_ref-quirksmode_17-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.quirksmode.org/js/introevents.html">"Introduction to Events"</a>. Quirksmode.org<span class="reference-accessdate">. Retrieved <span class="nowrap">15 September</span> 2012</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Introduction+to+Events&rft.pub=Quirksmode.org&rft_id=http%3A%2F%2Fwww.quirksmode.org%2Fjs%2Fintroevents.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-dom2-events-18"><span class="mw-cite-backlink">^ <a href="#cite_ref-dom2-events_18-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-dom2-events_18-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/DOM-Level-2-Events/">"Document Object Model (DOM) Level 2 Events Specification"</a>. <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a>. 13 November 2000<span class="reference-accessdate">. Retrieved <span class="nowrap">15 September</span> 2012</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Document+Object+Model+%28DOM%29+Level+2+Events+Specification&rft.pub=W3C&rft.date=2000-11-13&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FDOM-Level-2-Events%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-19"><span class="mw-cite-backlink"><b><a href="#cite_ref-19">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/DOM-Level-3-Events/#changes-DOMLevel2to3Changes">"Document Object Model (DOM) Level 3 Events Specification (working draft)"</a>. <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2013-04-17</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Document+Object+Model+%28DOM%29+Level+3+Events+Specification+%28working+draft%29&rft.pub=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FTR%2FDOM-Level-3-Events%2F%23changes-DOMLevel2to3Changes&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-20"><span class="mw-cite-backlink"><b><a href="#cite_ref-20">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.quirksmode.org/js/events_early.html">"Early event handlers"</a>. Quirksmode.org<span class="reference-accessdate">. Retrieved <span class="nowrap">15 September</span> 2012</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Early+event+handlers&rft.pub=Quirksmode.org&rft_id=http%3A%2F%2Fwww.quirksmode.org%2Fjs%2Fevents_early.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-21"><span class="mw-cite-backlink"><b><a href="#cite_ref-21">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.quirksmode.org/js/events_tradmod.html">"Traditional event registration model"</a>. Quirksmode.org<span class="reference-accessdate">. Retrieved <span class="nowrap">15 September</span> 2012</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Traditional+event+registration+model&rft.pub=Quirksmode.org&rft_id=http%3A%2F%2Fwww.quirksmode.org%2Fjs%2Fevents_tradmod.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-22"><span class="mw-cite-backlink"><b><a href="#cite_ref-22">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://blogs.msdn.com/ie/archive/2010/03/26/dom-level-3-events-support-in-ie9.aspx">"DOM Level 3 Events support in IE9"</a>. <a href="/wiki/Microsoft" title="Microsoft">Microsoft</a>. March 26, 2010<span class="reference-accessdate">. Retrieved <span class="nowrap">2010-03-28</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=DOM+Level+3+Events+support+in+IE9&rft.pub=Microsoft&rft.date=2010-03-26&rft_id=http%3A%2F%2Fblogs.msdn.com%2Fie%2Farchive%2F2010%2F03%2F26%2Fdom-level-3-events-support-in-ie9.aspx&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> <li id="cite_note-23"><span class="mw-cite-backlink"><b><a href="#cite_ref-23">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://msdn.microsoft.com/en-us/library/ie/bg182625(v=vs.85).aspx">"Compatibility changes in IE11 Preview"</a>. <a href="/wiki/Microsoft" title="Microsoft">Microsoft</a>. September 9, 2013<span class="reference-accessdate">. Retrieved <span class="nowrap">2013-10-05</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Compatibility+changes+in+IE11+Preview&rft.pub=Microsoft&rft.date=2013-09-09&rft_id=http%3A%2F%2Fmsdn.microsoft.com%2Fen-us%2Flibrary%2Fie%2Fbg182625%28v%3Dvs.85%29.aspx&rfr_id=info%3Asid%2Fen.wikipedia.org%3ADOM+event" class="Z3988"></span></span> </li> </ol></div> <div class="mw-heading mw-heading2"><h2 id="Further_reading">Further reading</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=24" title="Edit section: Further reading"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>Deitel, Harvey. (2002). <i>Internet and World Wide Web: how to program</i> (Second Edition). <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/0-13-030897-8" title="Special:BookSources/0-13-030897-8">0-13-030897-8</a></li> <li>The Mozilla Organization. (2009). <a rel="nofollow" class="external text" href="https://developer.mozilla.org/en/DOM/event">DOM Event Reference</a>. Retrieved August 25, 2009.</li> <li>Quirksmode (2008). <a rel="nofollow" class="external text" href="http://www.quirksmode.org/dom/events/index.html">Event compatibility tables</a>. Retrieved November 27, 2008.</li> <li><a rel="nofollow" class="external free" href="http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/">http://www.sitepen.com/blog/2008/07/10/touching-and-gesturing-on-the-iphone/</a></li></ul> <div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=DOM_event&action=edit&section=25" title="Edit section: External links"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/DOM-Level-2-Events">Document Object Model (DOM) Level 2 Events Specification</a></li> <li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/DOM-Level-3-Events/">Document Object Model (DOM) Level 3 Events Working Draft</a></li> <li><a rel="nofollow" class="external text" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#events">DOM4: Events (Editor's Draft)</a></li> <li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/uievents/">UI Events Working Draft</a></li> <li><a rel="nofollow" class="external text" href="http://www.w3.org/TR/pointerevents/">Pointer Events W3C Candidate Recommendation</a></li> <li><a rel="nofollow" class="external text" href="http://msdn.microsoft.com/en-us/library/windows/apps/hh441233.aspx">MSDN PointerEvent</a></li> <li><a rel="nofollow" class="external text" href="https://domevents.dev">domevents.dev - A visualizer to learn about DOM Events through exploration</a></li> <li><a rel="nofollow" class="external text" href="http://jsfiddle.net/cwtuan/je1g3f29/16">JS fiddle for Event Bubbling and Capturing</a></li></ul> <div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style></div><div role="navigation" class="navbox" aria-labelledby="Web_interfaces" style="padding:3px"><table class="nowraplinks mw-collapsible autocollapse navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Web_interfaces" title="Template:Web interfaces"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Web_interfaces" title="Template talk:Web interfaces"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Web_interfaces" title="Special:EditPage/Template:Web interfaces"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Web_interfaces" style="font-size:114%;margin:0 4em"><a href="/wiki/Web_API" title="Web API">Web interfaces</a></div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td class="navbox-abovebelow" colspan="2" style="font-weight:bold"><div id="Server-side"><a href="/wiki/Server-side" class="mw-redirect" title="Server-side">Server-side</a></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Communication_protocol" title="Communication protocol">Protocols</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/HTTP" title="HTTP">HTTP</a> <ul><li><a href="/wiki/HTTP/2" title="HTTP/2">v2</a></li> <li><a href="/wiki/HTTP/3" title="HTTP/3">v3</a></li> <li><a href="/wiki/HTTPS" title="HTTPS">Encryption</a></li> <li><a href="/wiki/WebDAV" title="WebDAV">WebDAV</a></li></ul></li> <li><a href="/wiki/Common_Gateway_Interface" title="Common Gateway Interface">CGI</a></li> <li><a href="/wiki/Simple_Common_Gateway_Interface" title="Simple Common Gateway Interface">SCGI</a></li> <li><a href="/wiki/FastCGI" title="FastCGI">FCGI</a></li> <li><a href="/wiki/Apache_JServ_Protocol" title="Apache JServ Protocol">AJP</a></li> <li><a href="/wiki/Web_Services_for_Remote_Portlets" title="Web Services for Remote Portlets">WSRP</a></li> <li><a href="/wiki/WebSocket" title="WebSocket">WebSocket</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Server_application_programming_interface" title="Server application programming interface">Server APIs</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Netscape_Server_Application_Programming_Interface" title="Netscape Server Application Programming Interface">C NSAPI</a></li> <li><a href="/wiki/Apache_HTTP_Server#Feature_overview" title="Apache HTTP Server">C ASAPI</a></li> <li><a href="/wiki/Internet_Server_Application_Programming_Interface" title="Internet Server Application Programming Interface">C ISAPI</a></li> <li><a href="/wiki/Active_Server_Pages" title="Active Server Pages">COM ASP</a></li> <li><a href="/wiki/Jakarta_Servlet" title="Jakarta Servlet">Jakarta Servlet</a> <ul><li><a href="/wiki/Web_container" title="Web container">container</a></li></ul></li> <li><a href="/wiki/Open_Web_Interface_for_.NET" title="Open Web Interface for .NET">CLI OWIN</a></li> <li><a href="/wiki/HTTP_handler" title="HTTP handler">ASP.NET Handler</a></li> <li><a href="/wiki/Web_Server_Gateway_Interface" title="Web Server Gateway Interface">Python WSGI</a></li> <li><a href="/wiki/Asynchronous_Server_Gateway_Interface" title="Asynchronous Server Gateway Interface">Python ASGI</a></li> <li><a href="/wiki/Rack_(web_server_interface)" title="Rack (web server interface)">Ruby Rack</a></li> <li><a href="/wiki/JSGI" title="JSGI">JavaScript JSGI</a></li> <li><a href="/wiki/Plack_(software)#PSGI" title="Plack (software)">Perl PSGI</a></li> <li><a href="/wiki/Java_Portlet_Specification" title="Java Portlet Specification">Portlet</a> <ul><li><a href="/wiki/Java_Portlet_Specification" title="Java Portlet Specification">container</a></li></ul></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/List_of_Apache_modules" title="List of Apache modules">Apache modules</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Server_Side_Includes" title="Server Side Includes">mod_include</a></li> <li><a href="/wiki/Mod_jk" class="mw-redirect" title="Mod jk">mod_jk</a></li> <li><a href="/wiki/Mod_lisp" title="Mod lisp">mod_lisp</a></li> <li><a href="/wiki/Mod_mono" title="Mod mono">mod_mono</a></li> <li><a href="/wiki/Mod_parrot" class="mw-redirect" title="Mod parrot">mod_parrot</a></li> <li><a href="/wiki/Mod_perl" title="Mod perl">mod_perl</a></li> <li><a href="/wiki/PHP" title="PHP">mod_php</a></li> <li><a href="/wiki/Mod_proxy" title="Mod proxy">mod_proxy</a></li> <li><a href="/wiki/Mod_python" title="Mod python">mod_python</a></li> <li><a href="/wiki/Mod_wsgi" title="Mod wsgi">mod_wsgi</a></li> <li><a href="/wiki/Mod_ruby" title="Mod ruby">mod_ruby</a></li> <li><a href="/wiki/Phusion_Passenger" title="Phusion Passenger">Phusion Passenger</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Topics</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Web_service" title="Web service">Web service</a> vs. <a href="/wiki/Web_resource" title="Web resource">Web resource</a></li> <li><a href="/wiki/Web-oriented_architecture" title="Web-oriented architecture">WOA</a> vs. <a href="/wiki/Resource-oriented_architecture" title="Resource-oriented architecture">ROA</a></li> <li><a href="/wiki/Open_API" title="Open API">Open API</a></li> <li><a href="/wiki/Webhook" title="Webhook">Webhook</a></li> <li><a href="/wiki/Application_server" title="Application server">Application server</a> <ul><li><a href="/wiki/List_of_application_servers" title="List of application servers">comparison</a></li></ul></li> <li><a href="/wiki/Server-side_scripting" title="Server-side scripting">Scripting</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td class="navbox-abovebelow" colspan="2" style="font-weight:bold"><div id="Client-side"><a href="/wiki/Client-side" class="mw-redirect" title="Client-side">Client-side</a></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Plug-in_(computing)" title="Plug-in (computing)">Browser APIs</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/NPAPI" title="NPAPI">C NPAPI</a> <ul><li><a href="/wiki/NPAPI#LiveConnect" title="NPAPI">LiveConnect</a></li> <li><a href="/wiki/NPAPI#XPConnect" title="NPAPI">XPConnect</a></li></ul></li> <li><a href="/wiki/NPAPI#NPRuntime" title="NPAPI">C NPRuntime</a></li> <li><a href="/wiki/Google_Native_Client#Pepper" title="Google Native Client">C PPAPI</a> <ul><li><a href="/wiki/Google_Native_Client" title="Google Native Client">NaCl</a></li></ul></li> <li><a href="/wiki/ActiveX" title="ActiveX">ActiveX</a></li> <li><a href="/wiki/Browser_Helper_Object" title="Browser Helper Object">BHO</a></li> <li><a href="/wiki/XAML_Browser_Applications" title="XAML Browser Applications">XBAP</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Web_API#Client_side" title="Web API">Web APIs</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/WHATWG" title="WHATWG">WHATWG</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/HTML_audio" title="HTML audio">Audio</a></li> <li><a href="/wiki/Canvas_element" title="Canvas element">Canvas</a></li> <li><a href="/wiki/Document_Object_Model" title="Document Object Model">DOM</a></li> <li><a href="/wiki/Server-sent_events" title="Server-sent events">SSE</a></li> <li><a href="/wiki/HTML_video" title="HTML video">Video</a></li> <li><a href="/wiki/WebSocket" title="WebSocket">WebSockets</a></li> <li><a href="/wiki/Web_Messaging" title="Web Messaging">Web messaging</a></li> <li><a href="/wiki/Web_storage" title="Web storage">Web storage</a></li> <li><a href="/wiki/Web_worker" title="Web worker">Web worker</a></li> <li><a href="/wiki/XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a class="mw-selflink selflink">DOM events</a></li> <li><a href="/wiki/Encrypted_Media_Extensions" title="Encrypted Media Extensions">EME</a></li> <li><a href="/wiki/HTML5_File_API" title="HTML5 File API">File</a></li> <li><a href="/wiki/W3C_Geolocation_API" title="W3C Geolocation API">Geolocation</a></li> <li><a href="/wiki/Indexed_Database_API" title="Indexed Database API">IndexedDB</a></li> <li><a href="/wiki/Media_Source_Extensions" title="Media Source Extensions">MSE</a></li> <li><a href="/wiki/SVG" title="SVG">SVG</a></li> <li><a href="/wiki/WebAssembly" title="WebAssembly">WebAssembly</a></li> <li><a href="/wiki/WebAuthn" title="WebAuthn">WebAuthn</a></li> <li><a href="/wiki/WebGPU" title="WebGPU">WebGPU</a></li> <li><a href="/wiki/WebRTC" title="WebRTC">WebRTC</a></li> <li><a href="/wiki/WebXR" title="WebXR">WebXR</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Khronos_Group" title="Khronos Group">Khronos</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/WebCL" title="WebCL">WebCL</a></li> <li><a href="/wiki/WebGL" title="WebGL">WebGL</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Others</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Gears_(software)" title="Gears (software)">Gears</a></li> <li><a href="/wiki/Web_SQL_Database" title="Web SQL Database">Web SQL Database</a> (formerly W3C)</li> <li><a href="/wiki/WebUSB" title="WebUSB">WebUSB</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Topics</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Ajax_(programming)" title="Ajax (programming)">Ajax</a> and <a href="/wiki/Remote_scripting" title="Remote scripting">Remote scripting</a> vs. <a href="/wiki/Dynamic_HTML" title="Dynamic HTML">DHTML</a></li> <li><a href="/wiki/Browser_extension" title="Browser extension">Browser extension</a></li> <li><a href="/wiki/Cross-site_scripting" title="Cross-site scripting">Cross-site scripting</a> and <a href="/wiki/Cross-origin_resource_sharing" title="Cross-origin resource sharing">CORS</a></li> <li><a href="/wiki/Hydration_(web_development)" title="Hydration (web development)">Hydration</a></li> <li><a href="/wiki/Mashup_(web_application_hybrid)" title="Mashup (web application hybrid)">Mashup</a></li> <li><a href="/wiki/Client-side_persistent_data" title="Client-side persistent data">Persistent data</a></li> <li><a href="/wiki/Web_IDL" title="Web IDL">Web IDL</a></li> <li><a href="/wiki/Dynamic_web_page#Client-side_scripting" title="Dynamic web page">Scripting</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd hlist" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><td class="navbox-abovebelow" colspan="2"><div id="Related_topics">Related topics</div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Frontend_and_backend" title="Frontend and backend">Frontend and backend</a></li> <li><a href="/wiki/Microservices" title="Microservices">Microservices</a> <ul><li><a href="/wiki/REST" title="REST">REST</a></li> <li><a href="/wiki/GraphQL" title="GraphQL">GraphQL</a></li></ul></li> <li><a href="/wiki/Push_technology" title="Push technology">Push technology</a></li> <li><a href="/wiki/Solution_stack" title="Solution stack">Solution stack</a></li> <li><a href="/wiki/Web_page" title="Web page">Web page</a> <ul><li><a href="/wiki/Static_web_page" title="Static web page">Static</a></li> <li><a href="/wiki/Dynamic_web_page" title="Dynamic web page">Dynamic</a></li></ul></li> <li><a href="/wiki/Web_standards" title="Web standards">Web standards</a></li> <li><a href="/wiki/Web_API_security" title="Web API security">Web API security</a></li> <li><a href="/wiki/Web_application" title="Web application">Web application</a> <ul><li><a href="/wiki/Rich_Internet_Application" title="Rich Internet Application">Rich</a></li> <li><a href="/wiki/Single-page_application" title="Single-page application">Single-page</a></li> <li><a href="/wiki/Progressive_web_app" title="Progressive web app">Progressive</a></li></ul></li> <li><a href="/wiki/Web_framework" title="Web framework">Web framework</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=DOM_event&oldid=1223966426">https://en.wikipedia.org/w/index.php?title=DOM_event&oldid=1223966426</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:World_Wide_Web_Consortium_standards" title="Category:World Wide Web Consortium standards">World Wide Web Consortium standards</a></li><li><a href="/wiki/Category:Application_programming_interfaces" title="Category:Application programming interfaces">Application programming interfaces</a></li><li><a href="/wiki/Category:Events_(computing)" title="Category:Events (computing)">Events (computing)</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:Webarchive_template_wayback_links" title="Category:Webarchive template wayback links">Webarchive template wayback links</a></li><li><a href="/wiki/Category:CS1_maint:_bot:_original_URL_status_unknown" title="Category:CS1 maint: bot: original URL status unknown">CS1 maint: bot: original URL status unknown</a></li><li><a href="/wiki/Category:Articles_with_short_description" title="Category:Articles with short description">Articles with short description</a></li><li><a href="/wiki/Category:Short_description_matches_Wikidata" title="Category:Short description matches Wikidata">Short description matches Wikidata</a></li><li><a href="/wiki/Category:Wikipedia_articles_with_style_issues_from_July_2018" title="Category:Wikipedia articles with style issues from July 2018">Wikipedia articles with style issues from July 2018</a></li><li><a href="/wiki/Category:All_articles_with_style_issues" title="Category:All articles with style issues">All articles with style issues</a></li><li><a href="/wiki/Category:Wikipedia_articles_that_are_too_technical_from_July_2018" title="Category:Wikipedia articles that are too technical from July 2018">Wikipedia articles that are too technical from July 2018</a></li><li><a href="/wiki/Category:All_articles_that_are_too_technical" title="Category:All articles that are too technical">All articles that are too technical</a></li><li><a href="/wiki/Category:Articles_with_multiple_maintenance_issues" title="Category:Articles with multiple maintenance issues">Articles with multiple maintenance issues</a></li><li><a href="/wiki/Category:Wikipedia_articles_needing_clarification_from_April_2012" title="Category:Wikipedia articles needing clarification from April 2012">Wikipedia articles needing clarification from April 2012</a></li><li><a href="/wiki/Category:All_articles_with_unsourced_statements" title="Category:All articles with unsourced statements">All articles with unsourced statements</a></li><li><a href="/wiki/Category:Articles_with_unsourced_statements_from_April_2017" title="Category:Articles with unsourced statements from April 2017">Articles with unsourced statements from April 2017</a></li><li><a href="/wiki/Category:Articles_containing_potentially_dated_statements_from_2005" title="Category:Articles containing potentially dated statements from 2005">Articles containing potentially dated statements from 2005</a></li><li><a href="/wiki/Category:All_articles_containing_potentially_dated_statements" title="Category:All articles containing potentially dated statements">All articles containing potentially dated statements</a></li><li><a href="/wiki/Category:Articles_with_unsourced_statements_from_September_2012" title="Category:Articles with unsourced statements from September 2012">Articles with unsourced statements from September 2012</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 15 May 2024, at 13:11<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=DOM_event&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-68775984f6-ztq2t","wgBackendResponseTime":123,"wgPageParseReport":{"limitreport":{"cputime":"0.795","walltime":"0.967","ppvisitednodes":{"value":4472,"limit":1000000},"postexpandincludesize":{"value":117655,"limit":2097152},"templateargumentsize":{"value":10197,"limit":2097152},"expansiondepth":{"value":17,"limit":100},"expensivefunctioncount":{"value":13,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":104587,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 771.003 1 -total"," 30.81% 237.564 1 Template:Reflist"," 25.44% 196.145 22 Template:Cite_web"," 17.01% 131.130 1 Template:Web_interfaces"," 14.36% 110.723 1 Template:Multiple_issues"," 11.35% 87.547 1 Template:Short_description"," 7.25% 55.872 2 Template:Pagetype"," 6.80% 52.397 1 Template:Manual"," 6.23% 48.016 2 Template:Ambox"," 5.44% 41.981 3 Template:Rp"]},"scribunto":{"limitreport-timeusage":{"value":"0.404","limit":"10.000"},"limitreport-memusage":{"value":6937338,"limit":52428800}},"cachereport":{"origin":"mw-api-int.codfw.main-7cb57f8f57-bkxz9","timestamp":"20241125174854","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"DOM event","url":"https:\/\/en.wikipedia.org\/wiki\/DOM_event","sameAs":"http:\/\/www.wikidata.org\/entity\/Q2529081","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q2529081","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2005-02-15T06:35:57Z","dateModified":"2024-05-15T13:11:17Z","headline":"Signal for Document Object Model"}</script> </body> </html>