1 / 18

Javascript

Javascript. Events. Some Common Events. onClick () onSubmit () -> discussed in forms lecture onMouseOver () onMouseOut (). How do we use Events. We simply add these to an html element and specify a JavaScript handling function.

audi
Download Presentation

Javascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Javascript Events

  2. Some Common Events • onClick() • onSubmit() -> discussed in forms lecture • onMouseOver() • onMouseOut()

  3. How do we use Events • We simply add these to an html element and specify a JavaScript handling function. <input type=“button” name=“myButton” value=“clickMe” onClick=“displayWelcome()”> Calls the displayWelcome function defined in your javaScript

  4. <html> <body> <script type="text/javascript"> function sayHello(name) { alert("hi " + name); } </script> <input type="button" name="clickMe" value="HI EVERYONE" onClick="sayHello('portia')"/> </body> </html>

  5. onMouseOver This will call a JavaScript function when you hover over your element <imgsrc="blue_square.jpg" id="colorSquare" class="red" onmouseover="changeColor()"/>

  6. Changes color of square when you Hover <html> <body> <script type="text/javascript"> function changeColor() { var square = document.getElementById("colorSquare"); square.src = "red_square.jpg"; } </script> <imgsrc="blue_square.jpg" id="colorSquare" class="red" onmouseover="changeColor()"/> </body> </html> Changes picture shown from a blue to a red square

  7. onMouseOut • This will call a JavaScript function when you move away from hovering over your element • <imgsrc="blue_square.jpg" id="colorSquare" class="red" onmouseover="changeColor();“ onmouseout=“changColorBack();”/> You need semicolons when you specify more than one event. e.g. here we specified both onmouseover and onmouseout

  8. Will change color to red on hover and back to blue when you leave <html> <body> <script type="text/javascript"> function changeColor() { var square = document.getElementById("colorSquare"); square.src = "red_square.jpg"; } function changeColorBack() { var square = document.getElementById("colorSquare"); square.src = “blue_square.jpg"; } </script> <imgsrc="blue_square.jpg" id="colorSquare" class="red" onmouseover="changeColor();“ onmouseout=“changeColorBack();”/> </body> </html>

  9. Introduction to jQuery Events

  10. Events • Events in javascript and jQuery are the triggers that you want to invoke an action: • E.g. mouse click, mouse hover…

  11. Binding an Event • Binding an event to a function means that when the event is triggered the function that was bound to it will be executed. $(“img”).bind(event, data, handler)

  12. Let’s bind a function Now everytime a click is executed functionName was exectued. $(function() { $(“#target”).bind(“click”, functionName); });

  13. Binding Example

  14. Binding Multiple Event Handlers • You can tie more than one event handler to the same event!

  15. Shorthand • The shorthands for .bind(click,…) are: • For Click: .click(functionName) • For Hover: .hover(functionName) • For Key Up: .keyup(functionName)

  16. KeyUp Event (This program displays text user entered)

  17. Hover Events • With hover events you can specify both the entry and exit events. .hover(over, out)

  18. Hover Events Example

More Related