開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- Safari(Web browser)
Head First JavaScript Programming (Eric T. Freeman (著)、Elisabeth Robson (著)、O'Reilly Media)の Chapter 9.(Handling events - Asynchronous Coding)の WHO DOES WHAT?(No. 5911)を取り組んでみる。
WHO DOES WHAT?(No. 5911)
コード(Emacs)
HTML5
<pre id="output0"></pre> <button id="run0">run</button> <button id="clear0">clear</button> <script src="sample1.js"></script>
JavaScript
let btn0 = document.querySelector('#run0'), btn1 = document.querySelector('#clear0'), pre0 = document.querySelector('#output0'), p = (x) => pre0.textContent += x + '\n'; let b0 = document.querySelector('body'); b0.onclick = (event) => { for (let prop in event) { p(`${prop}: ${event[prop]}`); } p( ['target', 'type', 'timeStamp', 'clientX', 'clientY', 'touches'] .map((prop) => `event['${prop}'] = ${event[prop]}`) .join('\n') ); }; let output = () => { b0.click(); }; let clear = (event) => { event.stopPropagation(); pre0.textContent = ''; }; btn0.onclick = output; btn1.onclick = clear; output();
isTrusted: false pointerId: -1 width: 1 height: 1 pressure: 0 tiltX: 0 tiltY: 0 azimuthAngle: 0 altitudeAngle: 1.5707963267948966 tangentialPressure: 0 twist: 0 pointerType: isPrimary: false getPredictedEvents: function getPredictedEvents() { [native code] } persistentDeviceId: 0 getCoalescedEvents: function getCoalescedEvents() { [native code] } screenX: 0 screenY: 0 clientX: 0 clientY: 0 ctrlKey: false shiftKey: false altKey: false metaKey: false button: 0 buttons: 0 relatedTarget: null pageX: 0 pageY: 0 x: 0 y: 0 offsetX: 0 offsetY: 0 movementX: 0 movementY: 0 fromElement: null toElement: null layerX: 0 layerY: 0 getModifierState: function getModifierState() { [native code] } initMouseEvent: function initMouseEvent() { [native code] } view: [object Window] detail: 0 sourceCapabilities: null which: 1 initUIEvent: function initUIEvent() { [native code] } type: click target: [object HTMLBodyElement] currentTarget: [object HTMLBodyElement] eventPhase: 2 bubbles: true cancelable: true defaultPrevented: false composed: true timeStamp: 809.5999999642372 srcElement: [object HTMLBodyElement] returnValue: true cancelBubble: false NONE: 0 CAPTURING_PHASE: 1 AT_TARGET: 2 BUBBLING_PHASE: 3 composedPath: function composedPath() { [native code] } initEvent: function initEvent() { [native code] } preventDefault: function preventDefault() { [native code] } stopImmediatePropagation: function stopImmediatePropagation() { [native code] } stopPropagation: function stopPropagation() { [native code] } event['target'] = [object HTMLBodyElement] event['type'] = click event['timeStamp'] = 809.5999999642372 event['clientX'] = 0 event['clientY'] = 0 event['touches'] = undefined
0 コメント:
コメントを投稿