Access to Event Object event variable (HTML): <div - - PowerPoint PPT Presentation

▶

Sep 05, 2022 130 likes •216 views

Access to Event Object event variable (HTML): <div onclick="mouseClick(event);"> Passed as argument to function (DOM/Firefox/Chrome): element.onclick = mouseClick; function mouseClick(evt) { ... x = evt.pageX; ... }

SLIDE 1

CS 142 Lecture Notes: Events Slide 1

Access to Event Object

event variable (HTML):

<div onclick="mouseClick(event);">

Passed as argument to function (DOM/Firefox/Chrome):

element.onclick = mouseClick; function mouseClick(evt) { ... x = evt.pageX; ... }

Global variable (DOM/IE):

element.onclick = mouseClick; function mouseClick() { ... x = window.event.pageX; ... }

SLIDE 2

CS 142 Lecture Notes: Events Slide 2

Draggable Rectangle

<style type="text/css"> #div1 { position: absolute; } </style> ... <div id="div1" onmousedown="mouseDown(event);"

nmousemove="mouseMove(event);"
nmouseup="mouseUp(event);">Drag Me!</div>

SLIDE 3

Slide 3

Dragging Application

isMouseDown = false; function mouseDown(event) { prevX = event.pageX; prevY = event.pageY; isMouseDown = true; } function mouseMove(event) { if (!isMouseDown) { return; } var element = document.getElementById("div1"); element.style.left = (element.offsetLeft + (event.pageX - prevX)) + "px"; element.style.top = (element.offsetTop + (event.pageY - prevY)) + "px"; prevX = event.pageX; prevY = event.pageY; } function mouseUp(event) { isMouseDown = false; }

SLIDE 4

CS 142 Lecture Notes: Events Slide 4

Cleaner Implementation

<body> <div id="div1">Drag Me!</div> <div id="div2">Drag Me Too!</div> <script type="text/javascript" src="dragger.js" /> <script type="text/javascript"> //<![CDATA[ new Dragger("div1"); new Dragger("div2"); //]]> </script> </body>}

SLIDE 5

CS 142 Lecture Notes: Events Slide 5

Dragger.js, part 1

function Dragger(id) { this.isMouseDown = false; this.element = document.getElementById(id); var obj = this; this.element.onmousedown = function(event) {

bj.mouseDown(event);

} } Dragger.prototype.mouseDown = function(event) { var obj = this; this.oldMoveHandler = document.body.onmousemove; document.body.onmousemove = function(event) {

bj.mouseMove(event);

} this.oldUpHandler = document.body.onmouseup; document.body.onmouseup = function(event) {

bj.mouseUp(event);

} this.prevX = event.pageX; this.prevY = event.pageY; this.isMouseDown = true; }

SLIDE 6

CS 142 Lecture Notes: Events Slide 6

Dragger.js, part 2

Dragger.prototype.mouseMove = function(event) { if (!this.isMouseDown) { return; } this.element.style.left = (this.element.offsetLeft + (event.pageX - this.prevX)) + "px"; this.element.style.top = (this.element.offsetTop + (event.pageY - this.prevY)) + "px"; this.prevX = event.pageX; this.prevY = event.pageY; } Dragger.prototype.mouseUp = function(event) { this.isMouseDown = false; document.body.onmousemove = this.oldMoveHandler; document.body.onmouseup = this.oldUpHandler; }

SLIDE 7

CS 142 Lecture Notes: Events Slide 7

Which Element Gets Event?

<body> <table> <tr> <td>xyz</td> </tr> </table> </body>

Click on this

SLIDE 8

CS 142 Lecture Notes: Cookies Slide 8