[Assorted-commits] SF.net SVN: assorted:[1882] sandbox/trunk/src/web

[<yan...@us...>]

Revision: 1882
          http://sourceforge.net/p/assorted/svn/1882
Author:   yangzhang
Date:     2014-05-24 18:58:59 +0000 (Sat, 24 May 2014)
Log Message:
-----------
Add event propagation demo

Added Paths:
-----------
    sandbox/trunk/src/web/events/
    sandbox/trunk/src/web/events/Makefile
    sandbox/trunk/src/web/events/README
    sandbox/trunk/src/web/events/index.jade
    sandbox/trunk/src/web/events/package.json

Added: sandbox/trunk/src/web/events/Makefile
===================================================================
--- sandbox/trunk/src/web/events/Makefile	                        (rev 0)
+++ sandbox/trunk/src/web/events/Makefile	2014-05-24 18:58:59 UTC (rev 1882)
@@ -0,0 +1,3 @@
+all: index.html
+%.html: %.jade
+	./node_modules/.bin/jade $<

Added: sandbox/trunk/src/web/events/README
===================================================================
--- sandbox/trunk/src/web/events/README	                        (rev 0)
+++ sandbox/trunk/src/web/events/README	2014-05-24 18:58:59 UTC (rev 1882)
@@ -0,0 +1,10 @@
+Findings:
+
+- for the event target itself, capture listeners are treated the same as bubble
+  listeners, executed in an arbitrary order
+  <https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener>
+- focus, blur not bubbled, but capture-able
+  <http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html>
+- key*, change, focusin, focusout bubble
+- react doesn't have focusin/focusout since its own focus/blur already support
+  bubbling <https://news.ycombinator.com/item?id=6995335>

Added: sandbox/trunk/src/web/events/index.jade
===================================================================
--- sandbox/trunk/src/web/events/index.jade	                        (rev 0)
+++ sandbox/trunk/src/web/events/index.jade	2014-05-24 18:58:59 UTC (rev 1882)
@@ -0,0 +1,40 @@
+doctype html
+html
+  head
+    title Events demo
+  body
+    .main
+      input(type='text')
+    script
+      :coffee-script
+        logger = (label) -> -> console.log(label)
+
+        [main] = document.getElementsByClassName('main')
+        main.addEventListener 'keydown', logger('main keydown')
+        main.addEventListener 'keydown', logger('main keydown cap'), true
+        main.addEventListener 'keypress', logger('main keypress')
+        main.addEventListener 'keypress', logger('main keypress cap'), true
+        main.addEventListener 'keyup', logger('main keyup')
+        main.addEventListener 'keyup', logger('main keyup cap'), true
+        main.addEventListener 'change', logger('main change')
+        main.addEventListener 'focus', logger('main focus')
+        main.addEventListener 'blur', logger('main blur')
+        main.addEventListener 'focus', logger('main focus cap'), true
+        main.addEventListener 'blur', logger('main blur cap'), true
+        main.addEventListener 'focusin', logger('main focusin cap')
+        main.addEventListener 'focusout', logger('main focusout cap')
+
+        [input] = document.getElementsByTagName('input')
+        input.addEventListener 'keydown', logger('input keydown')
+        input.addEventListener 'keydown', logger('input keydown cap'), true
+        input.addEventListener 'keypress', logger('input keypress')
+        input.addEventListener 'keypress', logger('input keypress cap'), true
+        input.addEventListener 'keyup', logger('input keyup')
+        input.addEventListener 'keyup', logger('input keyup cap'), true
+        input.addEventListener 'change', logger('input change')
+        input.addEventListener 'focus', logger('input focus')
+        input.addEventListener 'blur', logger('input blur')
+        input.addEventListener 'focus', logger('input focus cap'), true
+        input.addEventListener 'blur', logger('input blur cap'), true
+        input.addEventListener 'focusin', logger('input focusin cap')
+        input.addEventListener 'focusout', logger('input focusout cap')

Added: sandbox/trunk/src/web/events/package.json
===================================================================
--- sandbox/trunk/src/web/events/package.json	                        (rev 0)
+++ sandbox/trunk/src/web/events/package.json	2014-05-24 18:58:59 UTC (rev 1882)
@@ -0,0 +1,15 @@
+{
+  "name": "events",
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "coffee-script": "^1.7.1",
+    "jade": "^1.3.1"
+  }
+}

This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.