Transcription
CS1520 RecitationWeek 3Javascript: Event-DrivenProgramminghttp://cs.pitt.edu/ jlee/teaching/cs1520Jeongmin Lee (jlee@cs.pitt.edu)
Today- Javascript- Events- Events ListenerMany examples are based on w3schools.com and tutorialspoint.com
Events
Event HTML events are "things" that happen to HTML elements.When JavaScript is used in HTML pages, JavaScript can"react" on these events. Common HTML Events
Event Example !DOCTYPE html html body h1 onclick "changeText(this)" Click on this text! /h1 script function changeText(id) {id.innerHTML "Ooops!";} /script /body /html
Event Example !DOCTYPE html html body h1 onclick "changeText(this)" Click on this text! /h1 Event Handler function script function changeText(id) {id.innerHTML "Ooops!";} /script /body /html
The onload and onunload Events The onload and onunload events are triggered when theuser enters or leaves the page. The onload event can be used to check the visitor's browsertype and browser version, and load the proper version of theweb page based on the information. The onload and onunload events can be used to deal ryit.asp?filename tryjs events onload
The onmouseover andonmouseout Events The onmouseover and onmouseout events can be used totrigger a function when the user mouses over, or out of,an HTML element: !DOCTYPE html html body div onmouseover "mOver(this)" onmouseout "mOut(this)"style padding:40px;" Mouse Over Me /div script function mOver(obj) {obj.innerHTML "Thank You"}function mOut(obj) {obj.innerHTML "Mouse Over Me"} /script /body /html https://www.w3schools.com/js/tryit.asp?filename tryjs events mouseover
Event Listener
EventListener EventListener is a function that attached to an HTMLelement and calls a function when specified event ntListener("click", displayDate);HTML elementeventfunction
EventListener You can add many event handlers to one element. You can add many event handlers of the same type to oneelement, i.e two "click" events. You can add event listeners to any DOM object not onlyHTML elements. i.e the window object.
Syntaxelement.addEventListener(event, function, useCapture); The first parameter is the type of the event (like "click" or"mousedown"). The second parameter is the function we want to call whenthe event occurs. The third parameter is a boolean value specifying whether touse event bubbling (False; inner then outer) or eventcapturing (True; outer then inner). This parameter isoptional.
Examples Example1: Click event attached to a ame tryjs addeventlistener add Example2: Attach many listener to an ame tryjs addeventlistener add many Example3: Attach to window object (not HTML name tryjs addeventlistener dom Example4: Passing a lename tryjs addeventlistener parameters
Event Bubbling and CapturingThese are the way you order propagate multiple events in multipleHTML DOM.E.g: p inside div div p
Event Bubbling and CapturingThese are the way you order propagate multiple events in multipleHTML DOM.E.g: p inside div andattached two pop-up events on each box div p EE
Event Bubbling and CapturingEvent Bubblingthe inner most element's event is handled first and then the outer div p E:2E:1the p element's click event is handled first, then the div element's click ame tryjs addeventlistener usecapture
Event Bubbling and CapturingEvent Capturingthe outer most element's event is handled first and then the inner div p E:1E:2the div element's click event will be handled first, then the p element's click event.
Questions?
The onload and onunload Events The onload and onunload events are triggered when the user enters or leaves the page. The onload event can be used to check the visitor's browser
