CSE 337 Lecture 10: Events.

Slides:



Advertisements
Similar presentations
The jQuery library. What is jQuery ? A javascript lightweight library Is very easy to use Is powerful Is cross-browser compatible Downloadable from jQuery.com,
Advertisements

The DOM tree CS The DOM tree CS380 2 Types of DOM nodes  element nodes (HTML tag)  can have children and/or attributes  text nodes (text in.
CS7026 jQuery Events. What are Events?  jQuery is tailor-made to respond to events in an HTML page.  Events are actions that can be detected by your.
Chapter 6 © 2012 by Addison Wesley Longman, Inc Introduction Def: A dynamic HTML document is one whose tag attributes, tag contents, or element.
Event Handling. Overview How to listen (and not listen) for events Creating a utility library (and why you should) Typology of events Pairing event listeners.
The Web Warrior Guide to Web Design Technologies
Chapter 7 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 7 Sebesta: Programming the World Wide Web.
Cos 381 Day 7. © 2006 Pearson Addison-Wesley. All rights reserved. 6-2 Agenda Assignment 2 Posted –Program a web-based Version of Soduku using JavaScript.
XP Tutorial 8 New Perspectives on JavaScript, Comprehensive1 Working with the Event Model Creating a Drag-and-Drop Shopping Cart.
JavaScript Client Side scripting. Client-side Scripts Client-side scripts, which run on the user’s workstation can be used to: Validate user inputs entered.
CP476 Internet Computing JavaScript and HTML1 1.JavaScript Execution Environment The JavaScript Window object represents the window in which the browser.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Chapter 6 Dynamic Documents With JavaScript.
Unobtrusive JavaScript
Chapter 5 © 2003 by Addison-Wesley, Inc. 1 Chapter 5 JavaScript and HTML Documents.
Execution Environment for JavaScript " Java Script Window object represents the window in which the browser displays documents. " The Window object provides.
Chapter 5 JavaScript and HTML Documents. © 2006 Pearson Addison-Wesley. All rights reserved JavaScript Execution Environment - The JavaScript.
The DOM tree CS The DOM tree CS380 2 Types of DOM nodes  element nodes (HTML tag)  can have children and/or attributes  text nodes (text in.
INTRODUCTION TO HTML5 Using jQuery with HTML5. Introducing jQuery  Although it is not a part of any W3C or WHATWG specification, jQuery performs an important.
CO1552 Web Application Development HTML Forms, Events and an introduction to JavaScript.
DOM Events. JS Events Outline About Events – Introduction – Registering events – Getting information from events Event order/phases – Preventing default.
Chapter 5 © 2005 by Addison Wesley Longman, Inc JavaScript Execution Environment - The JavaScript Window object represents the window in which the.
CSE 154 Lecture 20: The DoM tree.
Lecture 10 JavaScript: DOM and Dynamic HTML Boriana Koleva Room: C54
Events DOM Event Model. HTML Events "on" + event name attribute value is javascript javascript runs 1st return false to STOP browser event (if any)
Internet & World Wide Web How to Program, 5/e. © by Pearson Education, Inc. All Rights Reserved.
Thursday, August 6 th, 2015 Instructor: Craig Duckett Event Handling.
DOM Events. JS Events Outline About Events – Introduction – Registering events – Getting information from events Event order/phases – Preventing default.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Event Handling. Objectives Using event handlers Simulating events Using event-related methods.
7. JavaScript Events. 2 Motto: Do you think I can listen all day to such stuff? –Lewis Carroll.
H.Melikyan/4910/031 Programming the World Wide Web JavaScript Dr.Hayk Melikyan Departmen of Mathematics and CS JavaScript and HTML Documents.
Host Objects: Browsers and the DOM
Chapter 6 © 2014 by Pearson Education Introduction Def: A dynamic HTML document is one whose tag attributes, tag contents, or element style properties.
Events Event Handling in JavaScript SoftUni Team Technical Trainers Software University
Events CS The keyword this  all JavaScript code actually runs inside of an object  by default, code runs inside the global window object  all.
Modern JavaScript Develop And Design Instructor’s Notes Chapter 8 – Event Handling Modern JavaScript Design And Develop Copyright © 2012 by Larry Ullman.
Dr. Ahmet Cengizhan Dirican BIL 374 Internet Technologies 6. Dynamic Documents With JavaScript.
Chapter 6 Dynamic Documents with JavaScript. © 2006 Pearson Addison-Wesley. All rights reserved Introduction Def: A dynamic HTML document is.
CSE 154 LECTURE 9: THE DOM TREE. The DOM tree The elements of a page are nested into a tree-like structure of objects the DOM has properties and methods.
Introduction to JavaScript Events Instructor: Sergey Goldman 1.
Internet & World Wide Web How to Program, 5/e.  JavaScript events  allow scripts to respond to user interactions and modify the page accordingly  Events.
CSE 154 LECTURE 10: MORE EVENTS. Problems with reading/changing styles Click Me HTML window.onload = function() { document.getElementById("clickme").onclick.
Chapter 6 © 2003 by Addison-Wesley, Inc Introduction - Dynamic HTML is not a new markup language - A dynamic HTML document is one whose tag attributes,
Jackson, Web Technologies: A Computer Science Perspective, © 2007 Prentice-Hall, Inc. All rights reserved Chapter 5 Host Objects: Browsers.
6.1 Introduction 6.2 Element Positioning
Introduction to.
5.1 JavaScript Execution Environment
JavaScript and HTML Simple Event Handling 11-May-18.
Introduction to JavaScript Events
JAVASCRIPTS AND HTML DOCUMENTS
JavaScript and HTML Simple Event Handling 19-Sep-18.
CSE 154 Lecture 11: More Events.
Working with the Event Model
Working with the Event Model
Events.
Introduction to jQuery
Lecture 11: Keyboard Events
CSE 337 Lecture 10: Events.
Lecture 9: TIMERS and The DoM tree
JavaScript and Events CS Programming Languages for Web Applications
CSc 337 Lecture 9: The DoM tree.
CS7026 jQuery Events.
Lecture 11: Keyboard Events
CHAPTER 6 EVENTS. CHAPTER 6 EVENTS WHAT IS AN EVENT?
JavaScript Event Handling For Interaction and Casual Games
Web Programming and Design
6.1 Introduction 6.2 Positioning Elements
JavaScript and HTML Simple Event Handling 26-Aug-19.
JavaScript and Events CS Programming Languages for Web Applications
JavaScript and HTML Simple Event Handling 4-Oct-19.
Presentation transcript:

CSE 337 Lecture 10: Events

Problems with reading/changing styles <button id="clickme">Click Me</button> HTML window.onload = function() { document.getElementById("clickme").onclick = biggerFont; }; function biggerFont() { var button = document.getElementById("clickme"); var size = parseInt(button.style.fontSize); button.style.fontSize = (size + 4) + "pt"; } JS output style property lets you set any CSS style for an element problem: you cannot read existing styles with it (you can read ones you set using the DOM .style, but not ones that are set in the CSS file)

Accessing elements' existing styles window.getComputedStyle(element).propertyName JS function biggerFont() { // turn text yellow and make it bigger var clickMe = document.getElementById("clickme"); var size = parseInt(window.getComputedStyle(clickMe).fontSize); clickMe.style.fontSize = (size + 4) + "pt"; } JS output getComputedStyle method of global window object accesses existing styles

Common bug: incorrect usage of existing styles the following example computes e.g. "200px" + 100 + "px" , which would evaluate to "200px100px" var main = document.getElementById("main"); main.style.top = window.getComputedStyle(main).top + 100 + "px“; // bad! JS a corrected version: main.style.top = parseInt(window.getComputedStyle(main).top) + 100 + "px"; // correct JS

JavaScript events abort blur change click dblclick error focus keydown keypress keyup load mousedown mousemove mouseout mouseover mouseup reset resize select submit unload the click event (onclick) is just one of many events that can be handled

The event object function name(event) { // an event handler function ... } JS Event handlers can accept an optional parameter to represent the event that is occurring. Event objects have the following properties / methods: property name description type what kind of event, such as "click" or "mousedown" target the element on which the event occurred timeStamp when the event occurred

Mouse events clicking movement click user presses/releases mouse button on the element dblclick user presses/releases mouse button twice on the element mousedown user presses down mouse button on the element mouseup user releases mouse button on the element clicking mouseover mouse cursor enters the element's box mouseout mouse cursor exits the element's box mousemove mouse cursor moves around within the element's box movement

Mouse event objects The event passed to a mouse handler has these properties: property/method description clientX clientY coordinates in browser window screenX screenY coordinates in screen offsetX offsetY coordinates in element (non-standard) button integer representing which button was pressed (0=Left, 1=Middle, 2=Right)

Mouse event example screen : (333, 782) client : (222, 460) <pre id="target">Move the mouse over me!</pre> HTML window.onload = function() { var target = document.getElementById("target"); target.onmousemove = target.onmousedown = showCoords; }; function showCoords(event) { document.getElementById("target").innerHTML = + "screen : (" + event.screenX + ", " + event.screenY + ")\n" + "client : (" + event.clientX + ", " + event.clientY + ")\n" + "button : " + event.button; } JS screen : (333, 782) client : (222, 460) button : 0 output

Removing a node from the page function slideClick() { var bullet = document.getElementById("removeme"); bullet.parentNode.removeChild(bullet); } JS odd idiom: obj.parentNode.remove(obj);

The keyword this all JavaScript code actually runs inside of an object this.fieldName // access field this.fieldName = value; // modify field this.methodName(parameters); // call method JS all JavaScript code actually runs inside of an object by default, code runs in the global window object (so this === window) all global variables and functions you declare become part of window the this keyword refers to the current object

Event handler binding window.onload = function() { document.getElementById("textbox").onmouseout = booyah; document.getElementById("submit").onclick = booyah; // bound to submit button here }; function booyah() { // booyah knows what object it was called on this.value = "booyah"; } JS output event handlers attached unobtrusively are bound to the element inside the handler, that element becomes this

Fixing redundant code with this <input id="huey" type="radio" name="ducks" value="Huey" /> Huey <input id="dewey" type="radio" name="ducks" value="Dewey" /> Dewey <input id="louie" type="radio" name="ducks" value="Louie" /> Louie HTML function processDucks() { if (document.getElementById("huey").checked) { alert("Huey is checked!"); } else if (document.getElementById("dewey").checked) { alert("Dewey is checked!"); } else { alert("Louie is checked!"); } alert(this.value + " is checked!"); } JS output if the same function is assigned to multiple elements, each gets its own bound copy

Multiple window.onload listeners window.onload = function; window.addEventListener("load", function); JS it is considered bad form to directly assign to window.onload multiple .js files could be linked to the same page, and if they all need to run code when the page loads, their window.onload statements will override each other by calling window.addEventListener instead, all of them can run their code when the page is loaded

Getting/setting CSS classes function highlightField() { // turn text yellow and make it bigger var text = document.getElementById("text"); if (!text.className) { text.className = "highlight"; } else if (text.className.indexOf("invalid") < 0) { text.className += " highlight"; // awkward } } JS JS DOM's className property corresponds to HTML class attribute somewhat clunky when dealing with multiple space-separated classes as one big string

Getting/setting CSS classes with classList function highlightField() { // turn text yellow and make it bigger var text = document.getElementById("text"); if (!text.classList.contains("invalid")) { text.classList.add("highlight"); } } JS classList collection has methods add, remove, contains, toggle to manipulate CSS classes similar to existing className DOM property, but don't have to manually split by spaces

Keyboard/text events name description focus this element gains keyboard focus (attention of user's keyboard) blur this element loses keyboard focus keydown user presses a key while this element has keyboard focus keyup user releases a key while this element has keyboard focus keypress user presses and releases a key while this element has keyboard focus select this element's text is selected or deselected

Key event objects property name description keyCode ASCII integer value of key that was pressed  (convert to char with String.fromCharCode) altKey, ctrlKey, shiftKey true if Alt/Ctrl/Shift key is being held issue: if the event you attach your listener to doesn't have the focus, you won't hear the event possible solution: attach key listener to entire page body, document, an outer element, etc.

Key event example document.getElementById("textbox").onkeydown = textKeyDown; ... function textKeyDown(event) { var key = String.fromCharCode(event.keyCode); if (key == 'S' && event.altKey) { alert("Save the document!"); this.value = this.value.split("").join("-"); } } JS each time you push down any key, even a modifier such as Alt or Ctrl, the keydown event fires if you hold down the key, the keydown event fires repeatedly keypress event is a bit flakier and inconsistent across browsers

Stopping an event event method name description preventDefault stops the browser from doing its normal action on an event; for example, stops the browser from following a link when <a> tag is clicked, or stops browser from submitting a form when submit button is clicked stopPropagation stops the browser from showing this event to any other objects that may be listening for it you can also return false; from your event handler to stop an event

Stopping an event, example <form id="exampleform" action="http://foo.com/foo.php">...</form> window.onload = function() { var form = document.getElementById("exampleform"); form.onsubmit = checkData; }; function checkData(event) { if (document.getElementById("state").length != 2) { alert("Error, invalid city/state."); // show error message event.preventDefault(); return false; // stop form submission } } JS

Some useful key codes keyboard key event keyCode Backspace 8 Tab 9 Enter 13 Escape 27 Page Up, Page Down, End, Home 33, 34, 35, 36 Left, Up, Right, Down 37, 38, 39, 40 Insert, Delete 45, 46 Windows/Command 91 F1 - F12 112 - 123

Page/window events name description contextmenu the user right-clicks to pop up a context menu error an error occurs when loading a document or an image load, unload the browser loads the page resize the browser window is resized scroll the user scrolls the viewable part of the page up/down/left/right unload the browser exits/leaves the page The above can be handled on the window object