2017年5月3日水曜日

開発環境

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 コメント:

コメントを投稿