Nate Hunzaker nhunzaker

I noticed that React adds a local click handler on buttons. That got me curious, so I dug in and noticed that there's a fix for click event bubbling in iOS. iOS doesn't allow click bubbling for non-interactive elements, so a workaround is made by adding a local listener (http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html).

This does make things a little faster, using https://github.com/krausest/js-framework-benchmark, rendering 10k rows, Transaction.closeAll runs about twice as fast (because a bunch of click handler attachments go away).

Before:

A dummy listener gets added to all of the buttons:

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Delegation</title>
	</head>
	<body>
	<div id="container">Loading...</div>

	<script src="../../lib/react.js"></script>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<div id="container">Loading...</div>

	<script src="https://cdn.jsdelivr.net/lodash/4.14.1/lodash.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/2.1.1/benchmark.min.js"></script>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>
	<body>
	<p>Create a breakpoint in the event callback defined in the script below this input:</p>
	<input type="number" step="0.01" min="0" value="3" />
	<p>Now click the number stepper.</p>
	<script>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>onChange Troubleshooting</title>
	</head>
	<body>
	<div id="container"></div>

	<script src="https://fb.me/react-15.2.1.js"></script>

	/**
	* Color Matrix
	*
	* A simplification of the color matrix class provided by
	* EaselJS
	*
	* www.createjs.com/docs/easeljs/files/easeljs_filters_ColorFilter.js.html#l41
	*/

	window.colorMatrix = (function() {

	●° rollup this-inside-out.js \| node --expose-gc
	Running 10 trials at 1000 records each:

	Generated 1000 records
	Growth: 2.74%

	Generated 1000 records
	Growth: -8.73%

	Generated 1000 records

	// user actions

	export default new Macrocosm.Resource('users') // { createUser, readUsers, updateUser, destroyUser }

	```
	app
	├── index.js
	├── index.html
	└── assets
	├── style
	└── images

	#!/usr/bin/env node

	var BrowserSync = require("browser-sync")
	var Webpack = require('webpack')
	var WebpackDev = require("webpack-dev-middleware")
	var WebpackHot = require("webpack-hot-middleware")
	var config = require(__dirname + '/../config/webpack')
	var port = process.env.PORT \|\| 3000
	var spawn = require('child_process').spawn