Last active
December 31, 2015 02:58
-
-
Save ishiduca/7923972 to your computer and use it in GitHub Desktop.
elementTarget.addEventListener の復習 ref: http://qiita.com/ishiduca/items/12f10b95da9faf157aea
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| elementTarget.addEventListener( type, listener [, useCapture ]) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| elementTarget.addEventListener( type, listener [, useCapture ]) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function listener (event) { | |
| var $target = event.target | |
| // 処理 | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <link rel="stylesheet" href="./qunit/qunit-1.10.0.css" /> | |
| <script src="./qunit/qunit-1.10.0.js"></script> | |
| <script src="./qunit/qunit-tap.js"></script> | |
| <script> | |
| ;(function (global) { | |
| var q = global.QUnit | |
| qunitTap(q, function () { console.log.apply(console, arguments) }) | |
| //qt.config.autostart = false | |
| q.assert.is = q.assert.strictEqual | |
| q.assert.like = function (str, reg, mes) { this.ok(reg.test(str), mes) } | |
| })(this.self) | |
| </script> | |
| <title>dom.addEventListener useCapture</title> | |
| </head> | |
| <body> | |
| <div id="qunit"></div> | |
| <div id="qunit-fixture"> | |
| <ul> | |
| <li id="aaa"><a href="javascript:void(0);">test 1</a></li> | |
| <li id="bbb"><a href="javascript:void(0);">test 2</a></li> | |
| <li id="ccc"><a href="javascript:void(0);">test 3</a></li> | |
| </ul> | |
| </div> | |
| </body> | |
| <script> | |
| var q = QUnit | |
| var d = document | |
| function setup () { | |
| this.$ul = d.querySelector('#qunit-fixture>ul') | |
| this.$lis = $ul.querySelectorAll('li') | |
| this.$as = $ul.querySelectorAll('li>a') | |
| } | |
| q.module('prepare', {setup: setup}) | |
| q.test('$as, $lis, $ulが指定できているか', function (t) { | |
| t.ok(this.$ul, 'exists ul') | |
| t.is(this.$lis.length, 3, 'exists ul>li') | |
| t.is(this.$as.length, 3, 'exists ul>li>a') | |
| t.is(this.$as[0].textContent, 'test 1', 'ul>li>a[0].textContent === "test 1"') | |
| }) | |
| q.module('$ul.addEventListener(target, listener, useCapture)でlistenerの扱うevent.target', {setup: setup}) | |
| q.asyncTest('$ul.click()', function (t) { | |
| var that = this | |
| this.$ul.addEventListener('click', listener, false) | |
| this.$ul.click() | |
| function listener (ev) { | |
| var $target = ev.target | |
| t.is(that.$ul, $target, 'ev.target === ul') | |
| t.is(this, $target, 'this === ul') | |
| that.$ul.removeEventListener('click', listener, false) | |
| q.start() | |
| } | |
| }) | |
| q.asyncTest('$as[0].click()', function (t) { | |
| var that = this | |
| this.$ul.addEventListener('click', listener, false) | |
| this.$as[0].click() | |
| function listener (ev) { | |
| var $target = ev.target | |
| t.is(that.$as[0], $target, 'ev.target === as[0]') | |
| t.is(this, that.$ul, 'this === ul') | |
| that.$ul.removeEventListener('click', listener, false) | |
| q.start() | |
| } | |
| }) | |
| q.module('$ul.addEventListener(target, listener, useCapture), useCapture の指定でイベントの伝播の順序がどうなるか', {setup: setup}) | |
| q.asyncTest('useCapture - "false": a -> li ->ul', function (t) { | |
| var that = this | |
| var spy = [] | |
| var useCapture = false | |
| this.$ul.addEventListener('click', listener, useCapture) | |
| Array.prototype.forEach.apply(this.$lis, [function ($li) { | |
| $li.addEventListener('click', listener, useCapture) | |
| }]) | |
| Array.prototype.forEach.apply(this.$as, [function ($a) { | |
| $a.addEventListener('click', listener, useCapture) | |
| }]) | |
| this.$as[0].click() | |
| function listener (ev) { | |
| spy.push(this) | |
| if (spy.length === 3) { | |
| t.is(spy[0], that.$as[0], '1st fired $as[0]') | |
| t.is(spy[1], that.$lis[0], '2nd fired $lis[0]') | |
| t.is(spy[2], that.$ul, 'last fired $ul') | |
| q.start() | |
| } | |
| } | |
| }) | |
| q.asyncTest('useCapture - "true": ul -> li ->a', function (t) { | |
| var that = this | |
| var spy = [] | |
| var useCapture = true | |
| this.$ul.addEventListener('click', listener, useCapture) | |
| Array.prototype.forEach.apply(this.$lis, [function ($li) { | |
| $li.addEventListener('click', listener, useCapture) | |
| }]) | |
| Array.prototype.forEach.apply(this.$as, [function ($a) { | |
| $a.addEventListener('click', listener, useCapture) | |
| }]) | |
| this.$as[0].click() | |
| function listener (ev) { | |
| spy.push(this) | |
| if (spy.length === 3) { | |
| t.is(spy[0], that.$ul, '1st fired $ul') | |
| t.is(spy[1], that.$lis[0], '2nd fired $lis[0]') | |
| t.is(spy[2], that.$as[0], 'last fired $as[0]') | |
| q.start() | |
| } | |
| } | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment