Access to Event Object event variable HTML div
Access to Event Object ● event variable (HTML): <div onclick="mouse. Click(event); "> ● Passed as argument to function (DOM/Firefox): element. onclick = mouse. Click; function mouse. Click(evt) {. . . x = evt. client. X; . . . } ● Global variable (DOM/IE): element. onclick = mouse. Click; function mouse. Click() {. . . x = window. event. client. X; . . . } CS 142 Lecture Notes: Events Slide 1
Draggable Rectangle <style type="text/css"> #div 1 { position: absolute; } </style>. . . <div id="div 1" onmousedown="mouse. Down(event); " onmousemove="mouse. Move(event); " onmouseup="mouse. Up(event); ">Drag Me!</div> CS 142 Lecture Notes: Events Slide 2
Dragging Application is. Mouse. Down = false; function mouse. Down(event) { prev. X = event. client. X; prev. Y = event. client. Y; is. Mouse. Down = true; } function mouse. Move(event) { if (!is. Mouse. Down) { return; } element = document. get. Element. By. Id("div 1"); element. style. left = (element. offset. Left + (event. client. X - prev. X)) + "px"; element. style. top = (element. offset. Top + (event. client. Y - prev. Y)) + "px"; prev. X = event. client. X; prev. Y = event. client. Y; } function mouse. Up(event) { is. Mouse. Down = false; CS 142 Lecture Notes: Events } Slide 3
Cleaner Implementation <body> <div id="div 1">Drag Me!</div> <div id="div 2">Drag Me Too!</div> <script type="text/javascript" src="dragger. js"> <script type="text/javascript"> //<![CDATA[ new Dragger("div 1"); new Dragger("div 2"); //]]> </script> </body>} CS 142 Lecture Notes: Events Slide 4
Dragger. js, part 1 function Dragger(id) { this. Mouse. Down = false; this. element = document. get. Element. By. Id(id); this. element. onmousedown = this. wrap(this, "mouse. Down"); } Dragger. prototype. wrap = function(obj, method) { return function(event) { obj[method](event); } } Dragger. prototype. mouse. Down = function(event) { this. old. Move. Handler = document. body. onmousemove; document. onmousemove = this. wrap(this, "mouse. Move"); this. old. Up. Handler = document. body. onmouseup; document. onmouseup = this. wrap(this, "mouse. Up"); this. prev. X = event. client. X; this. prev. Y = event. client. Y; this. Mouse. Down = true; } CS 142 Lecture Notes: Events Slide 5
Dragger. js, part 2 Dragger. prototype. mouse. Move = function(event) { if (!this. Mouse. Down) { return; } this. element. style. left = (this. element. offset. Left + (event. client. X - this. prev. X)) + "px"; this. element. style. top = (this. element. offset. Top + (event. client. Y - this. prev. Y)) + "px"; this. prev. X = event. client. X; this. prev. Y = event. client. Y; } Dragger. prototype. mouse. Up = function(event) { this. Mouse. Down = false; document. onmousemove = this. old. Move. Handler; document. onmouseup = this. old. Up. Handler; } CS 142 Lecture Notes: Events Slide 6
Which Element Gets Event? <body> <table> <tr> <td>xyz</td> </tr> </table> </body> Click on this CS 142 Lecture Notes: Events Slide 7
CS 142 Lecture Notes: Events Slide 8
- Slides: 8