mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Vjeux
97ec6b66d0
vjeux Document the Diff algorithm …8f24fcavjeux Add video at the bottom of the front page0993b61bricooke Update highlighted lines in tutorial …38d68fdjaredly rename this tip to be less confusing …9686487jaredly fixing capitalization1a9b213nicholasbs Fix typo (ot -> to)18410bfjaredly adding note about initializing state w/ props4f71ddfjaredly changes as requestedcb0cbccjaredly one linercd2fd80squidsoup Tutorial template markup needs a reference to jquery for the ajax calls …37e544dchenglou docs add input attrs for Dom Differences7eae8d3chenglou docs make all link start with /react/docsdbc8563Daniel15 Simple HTML to JSX converter, built during Hackathon 40 at Facebook. …2308f95
484 lines
18 KiB
HTML
484 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<title>React | Event System</title>
|
|
<meta name="viewport" content="width=device-width">
|
|
<meta property="og:title" content="React | Event System" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="http://facebook.github.io/react/docs/events.html" />
|
|
<meta property="og:image" content="http://facebook.github.io/react/img/logo_og.png" />
|
|
<meta property="og:description" content="A JavaScript library for building user interfaces" />
|
|
<meta property="fb:app_id" content="623268441017527" />
|
|
|
|
<link rel="shortcut icon" href="/react/favicon.ico">
|
|
<link rel="alternate" type="application/rss+xml" title="React" href="http://facebook.github.io/react/feed.xml">
|
|
|
|
<link rel="stylesheet" href="/react/css/react.css">
|
|
<link rel="stylesheet" href="/react/css/syntax.css">
|
|
<link rel="stylesheet" href="/react/css/codemirror.css">
|
|
|
|
<script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script>
|
|
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
|
|
|
<script type="text/javascript" src="/react/js/codemirror.js"></script>
|
|
<script type="text/javascript" src="/react/js/javascript.js"></script>
|
|
<script type="text/javascript" src="/react/js/react.min.js"></script>
|
|
<script type="text/javascript" src="/react/js/JSXTransformer.js"></script>
|
|
<script type="text/javascript" src="/react/js/live_editor.js"></script>
|
|
<script type="text/javascript" src="/react/js/showdown.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<div class="nav-main">
|
|
<div class="wrap">
|
|
<a class="nav-home" href="/react/index.html">
|
|
<img class="nav-logo" alt="" src="/react/img/logo_small.png" width="38" height="38">
|
|
React
|
|
</a>
|
|
<ul class="nav-site">
|
|
<li><a href="/react/docs/getting-started.html" class="active">docs</a></li>
|
|
<li><a href="/react/support.html">support</a></li>
|
|
<li><a href="/react/downloads.html">download</a></li>
|
|
<li><a href="/react/blog/">blog</a></li>
|
|
<li><a href="http://github.com/facebook/react">github</a>
|
|
</ul>
|
|
<!-- <iframe src="http://ghbtns.com/github-btn.html?user=facebook&repo=react.js&type=fork"allowtransparency="true" frameborder="0" scrolling="0" width="62" height="20"></iframe> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<section class="content wrap documentationContent">
|
|
<div class="nav-docs">
|
|
<!-- Docs Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Quick Start</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/getting-started.html">
|
|
Getting Started
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tutorial.html">
|
|
Tutorial
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Guides</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/why-react.html">
|
|
Why React?
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/displaying-data.html">
|
|
Displaying Data
|
|
</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-in-depth.html">
|
|
JSX in Depth
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/jsx-gotchas.html">
|
|
JSX Gotchas
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/interactivity-and-dynamic-uis.html">
|
|
Interactivity and Dynamic UIs
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/multiple-components.html">
|
|
Multiple Components
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reusable-components.html">
|
|
Reusable Components
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/forms.html">
|
|
Forms
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/working-with-the-browser.html">
|
|
Working With the Browser
|
|
</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/more-about-refs.html">
|
|
More About Refs
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tooling-integration.html">
|
|
Tooling Integration
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/addons.html">
|
|
Add-Ons
|
|
</a>
|
|
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/animation.html">
|
|
Animation
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/two-way-binding-helpers.html">
|
|
Two-Way Binding Helpers
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/class-name-manipulation.html">
|
|
Class Name Manipulation
|
|
</a>
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/examples.html">
|
|
Examples
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Reference</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/docs/top-level-api.html">
|
|
Top-Level API
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-api.html">
|
|
Component API
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/component-specs.html">
|
|
Component Specs and Lifecycle
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/tags-and-attributes.html">
|
|
Supported Tags and Attributes
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/events.html" class="active">
|
|
Event System
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/dom-differences.html">
|
|
DOM Differences
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/special-non-dom-attributes.html">
|
|
Special Non-DOM attributes
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/docs/reconciliation.html">
|
|
Reconciliation
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<!-- Tips Nav -->
|
|
|
|
<div class="nav-docs-section">
|
|
<h3>Tips</h3>
|
|
<ul>
|
|
|
|
<li>
|
|
<a href="/react/tips/introduction.html">Introduction</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/inline-styles.html">Inline Styles</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/if-else-in-JSX.html">If-Else in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/self-closing-tag.html">Self-Closing Tag</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/maximum-number-of-jsx-root-nodes.html">Maximum Number of JSX Root Nodes</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/style-props-value-px.html">Shorthand for Specifying Pixel Values in style props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/children-props-type.html">Type of the Children props</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/controlled-input-null-value.html">Value of null for Controlled Input</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/componentWillReceiveProps-not-triggered-after-mounting.html">componentWillReceiveProps Not Triggered After Mounting</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/props-in-getInitialState-as-anti-pattern.html">Props in getInitialState Is an Anti-Pattern</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/dom-event-listeners.html">DOM Event Listeners in a Component</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/initial-ajax.html">Load Initial Data via AJAX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/false-in-jsx.html">False in JSX</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/react/tips/communicate-between-components.html">Communicate Between Components</a>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="inner-content">
|
|
<h1>Event System</h1>
|
|
<div class="subHeader"></div>
|
|
<h2><a class="anchor" name="syntheticevent"></a>SyntheticEvent <a class="hash-link" href="#syntheticevent">#</a></h2>
|
|
<p>Your event handlers will be passed instances of <code>SyntheticEvent</code>, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including <code>stopPropagation()</code> and <code>preventDefault()</code>, except the events work identically across all browsers.</p>
|
|
|
|
<p>If you find that you need the underlying browser event for some reason, simply use the <code>nativeEvent</code> attribute to get it. Every <code>SyntheticEvent</code> object has the following attributes:</p>
|
|
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">bubbles</span>
|
|
<span class="kr">boolean</span> <span class="nx">cancelable</span>
|
|
<span class="nx">DOMEventTarget</span> <span class="nx">currentTarget</span>
|
|
<span class="kr">boolean</span> <span class="nx">defaultPrevented</span>
|
|
<span class="nb">Number</span> <span class="nx">eventPhase</span>
|
|
<span class="kr">boolean</span> <span class="nx">isTrusted</span>
|
|
<span class="nx">DOMEvent</span> <span class="nx">nativeEvent</span>
|
|
<span class="k">void</span> <span class="nx">preventDefault</span><span class="p">()</span>
|
|
<span class="k">void</span> <span class="nx">stopPropagation</span><span class="p">()</span>
|
|
<span class="nx">DOMEventTarget</span> <span class="nx">target</span>
|
|
<span class="nb">Date</span> <span class="nx">timeStamp</span>
|
|
<span class="nb">String</span> <span class="nx">type</span>
|
|
</code></pre></div><h2><a class="anchor" name="supported-events"></a>Supported Events <a class="hash-link" href="#supported-events">#</a></h2>
|
|
<p>React normalizes events so that they have consistent properties across
|
|
different browsers.</p>
|
|
<h3><a class="anchor" name="clipboard-events"></a>Clipboard Events <a class="hash-link" href="#clipboard-events">#</a></h3>
|
|
<p>Event names:</p>
|
|
<div class="highlight"><pre><code class="text language-text" data-lang="text">onCopy onCut onPaste
|
|
</code></pre></div>
|
|
<p>Properties:</p>
|
|
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">DOMDataTransfer</span> <span class="nx">clipboardData</span>
|
|
</code></pre></div><h3><a class="anchor" name="keyboard-events"></a>Keyboard Events <a class="hash-link" href="#keyboard-events">#</a></h3>
|
|
<p>Event names:</p>
|
|
<div class="highlight"><pre><code class="text language-text" data-lang="text">onKeyDown onKeyPress onKeyUp
|
|
</code></pre></div>
|
|
<p>Properties:</p>
|
|
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
|
|
<span class="nb">String</span> <span class="kr">char</span>
|
|
<span class="kr">boolean</span> <span class="nx">ctrlKey</span>
|
|
<span class="nb">String</span> <span class="nx">key</span>
|
|
<span class="nb">String</span> <span class="nx">locale</span>
|
|
<span class="nb">Number</span> <span class="nx">location</span>
|
|
<span class="kr">boolean</span> <span class="nx">metaKey</span>
|
|
<span class="kr">boolean</span> <span class="nx">repeat</span>
|
|
<span class="kr">boolean</span> <span class="nx">shiftKey</span>
|
|
</code></pre></div><h3><a class="anchor" name="focus-events"></a>Focus Events <a class="hash-link" href="#focus-events">#</a></h3>
|
|
<p>Event names:</p>
|
|
<div class="highlight"><pre><code class="text language-text" data-lang="text">onFocus onBlur
|
|
</code></pre></div>
|
|
<p>Properties:</p>
|
|
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nx">DOMEventTarget</span> <span class="nx">relatedTarget</span>
|
|
</code></pre></div><h3><a class="anchor" name="form-events"></a>Form Events <a class="hash-link" href="#form-events">#</a></h3>
|
|
<p>Event names:</p>
|
|
<div class="highlight"><pre><code class="text language-text" data-lang="text">onChange onInput onSubmit
|
|
</code></pre></div>
|
|
<p>For more information about the onChange event, see <a href="/react/docs/forms.html">Forms</a>.</p>
|
|
<h3><a class="anchor" name="mouse-events"></a>Mouse Events <a class="hash-link" href="#mouse-events">#</a></h3>
|
|
<p>Event names:</p>
|
|
<div class="highlight"><pre><code class="text language-text" data-lang="text">onClick onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave
|
|
onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave
|
|
onMouseMove onMouseUp
|
|
</code></pre></div>
|
|
<p>Properties: </p>
|
|
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
|
|
<span class="nb">Number</span> <span class="nx">button</span>
|
|
<span class="nb">Number</span> <span class="nx">buttons</span>
|
|
<span class="nb">Number</span> <span class="nx">clientX</span>
|
|
<span class="nb">Number</span> <span class="nx">clientY</span>
|
|
<span class="kr">boolean</span> <span class="nx">ctrlKey</span>
|
|
<span class="kr">boolean</span> <span class="nx">metaKey</span>
|
|
<span class="nb">Number</span> <span class="nx">pageX</span>
|
|
<span class="nb">Number</span> <span class="nx">pageY</span>
|
|
<span class="nx">DOMEventTarget</span> <span class="nx">relatedTarget</span>
|
|
<span class="nb">Number</span> <span class="nx">screenX</span>
|
|
<span class="nb">Number</span> <span class="nx">screenY</span>
|
|
<span class="kr">boolean</span> <span class="nx">shiftKey</span>
|
|
</code></pre></div><h3><a class="anchor" name="touch-events"></a>Touch events <a class="hash-link" href="#touch-events">#</a></h3>
|
|
<p>To enable touch events, call <code>React.initializeTouchEvents(true)</code> before
|
|
rendering any component.</p>
|
|
|
|
<p>Event names:</p>
|
|
<div class="highlight"><pre><code class="text language-text" data-lang="text">onTouchCancel onTouchEnd onTouchMove onTouchStart
|
|
</code></pre></div>
|
|
<p>Properties:</p>
|
|
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="kr">boolean</span> <span class="nx">altKey</span>
|
|
<span class="nx">DOMTouchList</span> <span class="nx">changedTouches</span>
|
|
<span class="kr">boolean</span> <span class="nx">ctrlKey</span>
|
|
<span class="kr">boolean</span> <span class="nx">metaKey</span>
|
|
<span class="kr">boolean</span> <span class="nx">shiftKey</span>
|
|
<span class="nx">DOMTouchList</span> <span class="nx">targetTouches</span>
|
|
<span class="nx">DOMTouchList</span> <span class="nx">touches</span>
|
|
</code></pre></div><h3><a class="anchor" name="ui-events"></a>UI Events <a class="hash-link" href="#ui-events">#</a></h3>
|
|
<p>Event names:</p>
|
|
<div class="highlight"><pre><code class="text language-text" data-lang="text">onScroll
|
|
</code></pre></div>
|
|
<p>Properties:</p>
|
|
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nb">Number</span> <span class="nx">detail</span>
|
|
<span class="nx">DOMAbstractView</span> <span class="nx">view</span>
|
|
</code></pre></div><h3><a class="anchor" name="wheel-events"></a>Wheel Events <a class="hash-link" href="#wheel-events">#</a></h3>
|
|
<p>Event names:</p>
|
|
<div class="highlight"><pre><code class="text language-text" data-lang="text">onWheel
|
|
</code></pre></div>
|
|
<p>Properties:</p>
|
|
<div class="highlight"><pre><code class="javascript language-javascript" data-lang="javascript"><span class="nb">Number</span> <span class="nx">deltaX</span>
|
|
<span class="nb">Number</span> <span class="nx">deltaMode</span>
|
|
<span class="nb">Number</span> <span class="nx">deltaY</span>
|
|
<span class="nb">Number</span> <span class="nx">deltaZ</span>
|
|
</code></pre></div>
|
|
|
|
<div class="docs-prevnext">
|
|
|
|
<a class="docs-prev" href="/react/docs/tags-and-attributes.html">← Prev</a>
|
|
|
|
|
|
<a class="docs-next" href="/react/docs/dom-differences.html">Next →</a>
|
|
|
|
</div>
|
|
|
|
<div class="fb-comments" data-width="650" data-num-posts="10" data-href="http://facebook.github.io/react/docs/events.html"></div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="wrap">
|
|
<div class="left">A Facebook & Instagram collaboration.</div>
|
|
<div class="right">© 2013 Facebook Inc.</div>
|
|
</footer>
|
|
</div>
|
|
<div id="fb-root"></div>
|
|
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
ga('create', 'UA-41298772-1', 'facebook.github.io');
|
|
ga('send', 'pageview');
|
|
|
|
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
|
|
|
|
(function(d, s, id) {
|
|
var js, fjs = d.getElementsByTagName(s)[0];
|
|
if (d.getElementById(id)) return;
|
|
js = d.createElement(s); js.id = id;
|
|
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=623268441017527";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
</script>
|
|
</body>
|
|
</html>
|