OUTPUT OF NOTE

Funtion (e) Javascript

OUTPUT OF : 

document.getElementById("eightt").addEventListener("click", function(e){console.log(e)})

OUTPUT 

  1. PointerEvent {isTrusted: true, pointerId: 0, width: 1, height: 1, pressure: 0, …}
    1. isTrusted: true
    2. altKey: false
    3. altitudeAngle: 1.5707963267948966
    4. azimuthAngle: 0
    5. bubbles: true
    6. button: 0
    7. buttons: 0
    8. cancelBubble: false
    9. cancelable: true
    10. clientX: 296
    11. clientY: 511
    12. composed: true
    13. ctrlKey: false
    14. currentTarget: null
    15. defaultPrevented: false
    16. detail: 1
    17. eventPhase: 0
    18. fromElement: null
    19. height: 1
    20. isPrimary: false
    21. layerX: 296
    22. layerY: 511
    23. metaKey: false
    24. movementX: 0
    25. movementY: 0
    26. offsetX: 78
    27. offsetY: 102
    28. pageX: 296
    29. pageY: 511
    30. pointerId: 0
    31. pointerType: "touch"
    32. pressure: 0
    33. relatedTarget: null
    34. returnValue: true
    35. screenX: 432
    36. screenY: 496
    37. shiftKey: false
    38. tangentialPressure: 0
    39. tiltX: 0
    40. tiltY: 0
    41. timeStamp: 1139488.799999997
    42. toElement: null
    43. twist: 0
    44. type: "click"
    45. which: 1
    46. width: 1
    47. x: 296
    48. y: 511

Comments

Post a Comment

Popular posts from this blog

CSS simple grid layout

Image
HTML CODE < body >     < div class = "container" >         < div class = "item item1" >ONE</ div >         < div class = "item" >TWO</ div >         < div class = "item" >THREE</ div >         < div class = "item" >FOUR</ div >         < div class = "item last" >LAST</ div >     </ div > </ body > CSS CODE * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } html {     font-family: Product Sans; } .container {     display: grid ;     height: 100 VH ;     grid-template-columns: 100 px repeat ( 1 , 1 fr ) 100 px ;     grid-template-rows: 80 px repeat ( 1 , 1 fr ) 80 px ;     gap: 1 rem ;     padding: 1 rem ; } .item {     border: 5 px solid red ; } .item1 ...
Read more

Gsap timeline position parameters

 Gsap timeline position parameters In the following timeline code:  let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }) normally when animation of box1 completed in 1s then box2 starts and after 1second of box2 animation of box3 starts if the duration of box1 was 5 second then animation of box1 will take 5s to complete and then only animation of box2 starts. For more enhancement the position parameter was introduced Some of the examples of position parameter are: 1. let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }, 1 ) On that box 3 there is "1" outside the {} which means that   start exactly at a time of 1 It do...
Read more

GSAP Timelines

 GSAP Timeline Since in tween we have to set delay property to play one after another and if we change delay of one we must rewrite all timing of other items. But with the help of timeline all these problems are solved: gsap . to ( '.box1' ,{ y : 200 , duration : 1 , delay : 1 }) gsap . to ( '.box2' ,{ x : 100 , duration : 0.5 , delay : 2 }) gsap . to ( '.box3' ,{ y : 400 , duration : 1 , delay : 3 }) gsap . to ( '.box4' ,{ y : 200 , duration : 1 , delay : 4 }) We should set delay after each to play this in sequence, if we set delay of box4 to 1 then our box1 and box4 will move together, so also need to estimate time correctly.  A timeline is created with gsap.timeline(); All tweens in a timeline naturally play one after the other. The same tween code written in timeline is below: gsap . timeline ()     . to ( ".box1" , { y : 200 , duration : 1 })     . to ( ".box2" , { x : 100 , duration : 0.5 })     . to ( ".box3" , { y : ...
Read more