Event 属性

by redky

HTML

<div class="box">
    <div class="inner"></div>
</div>

CSS

div.box {
    width: 200px;
    height: 200px;
    background: #faa;
}

div.inner {
    position: relative;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background: #ffa;
}

JavaScript

document.addEventListener( 'click', function( e ) {
    console.log( 'document click event fired' );
    console.log( 'target: ', e.target );
    console.log( 'currentTarget: ', e.currentTarget );
    console.log( 'timestamp: ', e.timeStamp );
    console.log( 'document bubble? : ', e.bubbles );
    console.log( 'event.defaultPrevented? ', e.defaultPrevented );
}, false );

var inner = document.querySelector( '.inner' );
inner.addEventListener( 'click', function(e) {
    console.log( 'inner element click event fired' );
    console.log( 'type?: ', e.type );
    console.log( 'bubble? ', e.bubbles );
    console.log( 'isTrusted?', e.isTrusted );
    console.log( 'currentTarget: ', e.currentTarget );
}, false );

inner.click();