Artifact
2d729c6c4f01513596b1ceb3c1cfa89b58a477f6e351814908bd16e4c19eba32:
0000: 0a 3c 65 76 65 6e 74 73 3e 0a 20 20 3c 70 20 6f .<events>. <p o
0010: 6e 63 6c 69 63 6b 3d 7b 20 64 6f 53 6f 6d 65 74 nclick={ doSomet
0020: 68 69 6e 67 20 7d 3e 0a 20 20 20 20 63 6c 69 63 hing }>. clic
0030: 6b 0a 20 20 3c 2f 70 3e 3c 62 72 3e 0a 20 20 3c k. </p><br>. <
0040: 70 20 6f 6e 6d 6f 75 73 65 64 6f 77 6e 3d 7b 20 p onmousedown={
0050: 64 6f 53 6f 6d 65 74 68 69 6e 67 20 7d 3e 0a 20 doSomething }>.
0060: 20 20 20 6d 6f 75 73 65 64 6f 77 6e 0a 20 20 3c mousedown. <
0070: 2f 70 3e 3c 62 72 3e 0a 20 20 3c 74 65 78 74 61 /p><br>. <texta
0080: 72 65 61 20 6f 6e 63 68 61 6e 67 65 3d 7b 20 64 rea onchange={ d
0090: 6f 53 6f 6d 65 74 68 69 6e 67 20 7d 3e 0a 20 20 oSomething }>.
00a0: 20 20 63 68 61 6e 67 65 0a 20 20 3c 2f 74 65 78 change. </tex
00b0: 74 61 72 65 61 3e 3c 62 72 3e 0a 20 20 3c 73 65 tarea><br>. <se
00c0: 6c 65 63 74 20 6f 6e 63 68 61 6e 67 65 3d 7b 20 lect onchange={
00d0: 64 6f 53 6f 6d 65 74 68 69 6e 67 20 7d 3e 0a 20 doSomething }>.
00e0: 20 20 20 3c 6f 70 74 69 6f 6e 3e 31 3c 2f 6f 70 <option>1</op
00f0: 74 69 6f 6e 3e 0a 20 20 20 20 3c 6f 70 74 69 6f tion>. <optio
0100: 6e 3e 32 3c 2f 6f 70 74 69 6f 6e 3e 0a 20 20 3c n>2</option>. <
0110: 2f 73 65 6c 65 63 74 3e 0a 20 20 3c 62 72 3e 0a /select>. <br>.
0120: 20 20 3c 69 6e 70 75 74 20 6f 6e 6b 65 79 64 6f <input onkeydo
0130: 77 6e 3d 7b 20 64 6f 53 6f 6d 65 74 68 69 6e 67 wn={ doSomething
0140: 20 7d 20 76 61 6c 75 65 3d 6b 65 79 64 6f 77 6e } value=keydown
0150: 3e 3c 62 72 3e 0a 20 20 3c 65 76 65 6e 74 73 2d ><br>. <events-
0160: 63 68 69 6c 64 20 65 61 63 68 3d 7b 20 76 61 6c child each={ val
0170: 2c 20 69 6e 64 65 78 20 69 6e 20 69 74 65 6d 73 , index in items
0180: 20 7d 20 6f 6e 63 6c 69 63 6b 3d 7b 20 70 61 72 } onclick={ par
0190: 65 6e 74 2e 6f 70 74 73 2e 63 62 20 7d 3e 3c 2f ent.opts.cb }></
01a0: 65 76 65 6e 74 73 2d 63 68 69 6c 64 3e 0a 0a 20 events-child>..
01b0: 20 64 6f 53 6f 6d 65 74 68 69 6e 67 28 65 76 65 doSomething(eve
01c0: 6e 74 29 20 7b 0a 20 20 20 20 2f 2f 63 6f 6e 73 nt) {. //cons
01d0: 6f 6c 65 2e 6c 6f 67 28 65 76 65 6e 74 29 0a 20 ole.log(event).
01e0: 20 7d 0a 0a 20 20 74 68 69 73 2e 69 74 65 6d 73 }.. this.items
01f0: 20 3d 20 5b 31 2c 32 2c 33 5d 0a 0a 3c 2f 65 76 = [1,2,3]..</ev
0200: 65 6e 74 73 3e 0a 0a 3c 65 76 65 6e 74 73 2d 63 ents>..<events-c
0210: 68 69 6c 64 3e 0a 20 20 3c 64 69 76 20 6f 6e 63 hild>. <div onc
0220: 6c 69 63 6b 3d 7b 20 6f 70 74 73 2e 6f 6e 63 6c lick={ opts.oncl
0230: 69 63 6b 20 7d 3e 43 6c 69 63 6b 20 6d 65 3c 2f ick }>Click me</
0240: 64 69 76 3e 0a 3c 2f 65 76 65 6e 74 73 2d 63 68 div>.</events-ch
0250: 69 6c 64 3e 0a ild>.