Search completed in 4.31 seconds.
46 results for "element.addEventListener":
Your results are loading. Please wait...
EventTarget.addEventListener() - Web APIs
then, when you want to create an actual event listener that uses the options in question, you can do something like this: someelement.addeventlistener("mouseup", handlemouseup, passivesupported ?
... my_element.addeventlistener('click', function (e) { console.log(this.classname) // logs the classname of my_element console.log(e.currenttarget === this) // logs `true` }) as a reminder, arrow functions do not have their own this context.
... my_element.addeventlistener('click', (e) => { console.log(this.classname) // warning: `this` is not `my_element` console.log(e.currenttarget === this) // logs `false` }) if an event handler (for example, onclick) is specified on an element in the html source, the javascript code in the attribute value is effectively wrapped in a handler function that binds the value of this in a manner consistent with the addeventlistener(); an occurrence of this within the code represents a reference to the element.
...And 2 more matches
Element: compositionend event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonl...
...rder: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionstart event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea reado...
...rder: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionupdate event - Web APIs
bubbles yes cancelable yes interface compositionevent event handler property none examples const inputelement = document.queryselector('input[type="text"]'); inputelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <input type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea read...
...rder: 1px solid black; } js const inputelement = document.queryselector('input[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
EventListener - Web APIs
buttonelement.addeventlistener('click', function (event) { alert('element clicked through function!'); }); // for compatibility, a non-function object with a `handleevent` property is // treated just the same as a function itself.
... buttonelement.addeventlistener('click', { handleevent: function (event) { alert('element clicked through handleevent property!'); } }); result see also: addeventlistener specifications specification status comment domthe definition of 'eventlistener' in that specification.
EventTarget.removeEventListener() - Web APIs
for example, consider this call to addeventlistener(): element.addeventlistener("mousedown", handlemousedown, true); now consider each of these two calls to removeeventlistener(): element.removeeventlistener("mousedown", handlemousedown, false); // fails element.removeeventlistener("mousedown", handlemousedown, true); // succeeds the first call fails because the value of usecapture doesn't match.
... now consider this: element.addeventlistener("mousedown", handlemousedown, { passive: true }); here, we specify an options object in which passive is set to true, while the other options are left to the default value of false.
Page Visibility API - Web APIs
// this shows the paused videoelement.addeventlistener("pause", function(){ document.title = 'paused'; }, false); // when the video plays, set the title.
... videoelement.addeventlistener("play", function(){ document.title = 'playing'; }, false); } properties added to the document interface the page visibility api adds the following properties to the document interface: document.hidden read only returns true if the page is in a state considered to be hidden to the user, and false otherwise.
Using Touch Events - Web APIs
// register touch event handlers someelement.addeventlistener('touchstart', process_touchstart, false); someelement.addeventlistener('touchmove', process_touchmove, false); someelement.addeventlistener('touchcancel', process_touchcancel, false); someelement.addeventlistener('touchend', process_touchend, false); process an event in an event handler, implementing the application's gesture semantics.
... // create touchstart handler someelement.addeventlistener('touchstart', function(ev) { // iterate through the touch points that were activated // for this element and process each event 'target' for (var i=0; i < ev.targettouches.length; i++) { process_target(ev.targettouches[i].target); } }, false); prevent the browser from processing emulated mouse events.
Content Scripts - Archive of obsolete content
ick: <html> <head> </head> <body> <script> window.onclick = function() { window.alert("it's my click now!"); } </script> </body> </html> for these reasons, it's better to add event listeners using addeventlistener(), defining the listener as a function: var themessage = "hello from content script!"; anelement.onclick = function() { alert(themessage); }; anotherelement.addeventlistener("click", function() { alert(themessage); }); communicating with the add-on to enable add-on scripts and content scripts to communicate with each other, each end of the conversation has access to a port object.
frame/hidden-frame - Archive of obsolete content
the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
aevent : window.event; } function onpageload() { var element = document.getelementbyid("mydiv"); element.addeventlistener("click", handleevent, false); } </script> one advantage of addeventlistener() and removeeventlistener() over setting properties is that you can have multiple event listeners for the same event, each calling another function.
Methods - Archive of obsolete content
emovetabsprogresslistener removetransientnotifications replacegroup reset rewind scrollbyindex scrollbypixels scrolltoindex select selectall selectitem selectitemrange selecttabatindex setselectionrange showpane showpopup sizeto startediting stop stopediting swapdocshells syncsessions timedselect toggleitemselection related dom element methods dom:element.addeventlistener dom:element.appendchild dom:element.comparedocumentposition dom:element.dispatchevent dom:element.getattribute dom:element.getattributenode dom:element.getattributenodens dom:element.getattributens dom:element.getelementsbytagname dom:element.getelementsbytagnamens dom:element.getfeature fixme: brokenlink dom:element.getuserdata dom:element.hasattribute dom:element.hasat...
XUL Event Propagation - Archive of obsolete content
the syntax for this in xul is as follows: element = document.getelementbyid("id of the element"); element.addeventlistener(event name, event handler function, whether to register a capturing listener); the event handler code argument can be in-line code or a function.
Introduction to events - Learn web development
this would work, however: myelement.addeventlistener('click', functiona); myelement.addeventlistener('click', functionb); both functions would now run when the element is selected.
Introduction to web APIs - Learn web development
it if (this.getattribute('class') === 'paused') { audioelement.play(); this.setattribute('class', 'playing'); this.textcontent = 'pause' // if track is playing, stop it } else if (this.getattribute('class') === 'playing') { audioelement.pause(); this.setattribute('class', 'paused'); this.textcontent = 'play'; } }); // if track ends audioelement.addeventlistener('ended', function() { playbtn.setattribute('class', 'paused'); playbtn.textcontent = 'play'; }); note: some of you may notice that the play() and pause() methods being used to play and pause the track are not part of the web audio api; they are part of the htmlmediaelement api, which is different but closely-related.
Animation.finish() - Web APIs
WebAPIAnimationfinish
interfaceelement.addeventlistener("mousedown", function() { try { player.finish(); } catch(e if e instanceof invalidstate) { console.log("finish() called on paused or finished animation."); } catch(e); logmyerrors(e); //pass exception object to error handler } }); the following example finishes all the animations on a single element, regardless of their direction of playback.
Attr.localName - Web APIs
WebAPIAttrlocalName
html content <button id="example">click me</button> javascript content const element = document.queryselector("#example"); element.addeventlistener("click", function() { const attribute = element.attributes[0]; alert(attribute.localname); }); notes the local name of an attribute is the part of the attribute's qualified name that comes after the colon.
Introduction to the DOM - Web APIs
document.getelementbyid(id) document.getelementsbytagname(name) document.createelement(name) parentnode.appendchild(node) element.innerhtml element.style.left element.setattribute() element.getattribute() element.addeventlistener() window.content window.onload window.scrollto() testing the dom api this document provides samples for every interface that you can use in your own web development.
Using files from web applications - Web APIs
you need to use eventtarget.addeventlistener() to add the change event listener, like this: const inputelement = document.getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting information about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, each specified as a file object.
Audio() - Web APIs
the event-based approach is best: myaudioelement.addeventlistener("canplaythrough", event => { /* the audio is now playable; play it if permissions allow */ myaudioelement.play(); }); memory usage and management if all references to an audio element created using the audio() constructor are deleted, the element itself won't be removed from memory by the javascript runtime's garbage collection mechanism if playback is currently underway.
HTMLAudioElement - Web APIs
this snippet copies the audio file's duration to a variable: var audioelement = new audio('car_horn.wav'); audioelement.addeventlistener('loadeddata', () => { let duration = audioelement.duration; // the duration variable now holds the duration (in seconds) of the audio clip }) events inherits methods from its parent, htmlmediaelement, and from its ancestor htmlelement.
HTMLElement: change event - Web APIs
option value="chocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <div class="result"></div> body { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
HTMLElement: transitionstart event - Web APIs
bubbles yes cancelable no interface transitionevent event handler property ontransitionstart examples this code adds a listener to the transitionstart event: element.addeventlistener('transitionstart', () => { console.log('started transitioning'); }); the same, but using the ontransitionstart property instead of addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width:...
Using microtasks in JavaScript with queueMicrotask() - Web APIs
element.addeventlistener("load", () => console.log("loaded data")); console.log("fetching data..."); element.getdata(); console.log("data fetched"); executing this code twice in a row gives the results shown in the table below: results when data isn't cached (left) vs.
HTML Drag and Drop API - Web APIs
t handler, as shown in the following code sample: <script> function dragstart_handler(ev) { // add the target element's id to the data transfer object ev.datatransfer.setdata("text/plain", ev.target.id); } window.addeventlistener('domcontentloaded', () => { // get the element by id const element = document.getelementbyid("p1"); // add the ondragstart event listener element.addeventlistener("dragstart", dragstart_handler); }); </script> <p id="p1" draggable="true">this element is draggable.</p> for more information, see: draggable attribute reference drag operations guide define the drag's data the application is free to include any number of data items in a drag operation.
MutationEvent - Web APIs
llowing is a list of all mutation events, as defined in dom level 3 events specification: domattrmodified domattributenamechanged domcharacterdatamodified domelementnamechanged domnodeinserted domnodeinsertedintodocument domnoderemoved domnoderemovedfromdocument domsubtreemodified usage you can register a listener for mutation events using eventtarget.addeventlistener() as follows: element.addeventlistener("domnodeinserted", function (event) { // ...
PointerEvent.pointerType - Web APIs
targetelement.addeventlistener('pointerdown', function(event) { // call the appropriate pointer type handler switch (event.pointertype) { case 'mouse': process_pointer_mouse(event); break; case 'pen': process_pointer_pen(event); break; case 'touch': process_pointer_touch(event); break; default: console.log(`pointertype ${event.pointertype} is not suported`); } }, ...
PointerEvent.pressure - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.pressure == 0) { // no pressure process_no_pressure(event); } else if (event.pressure == 1) { // maximum pressure process_max_pressure(event); } else { // default process_pressure(event); } }, false); specifications specification status comment pointer events – level 2the definition of 'pressur...
PointerEvent.tangentialPressure - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.tangentialpressure == 0) { // no pressure process_no_tanpressure(event); } else if (event.tangentialpressure == 1) { // maximum pressure process_max_tanpressure(event); } else { // default process_tanpressure(event); } }, false); specifications specification status comment pointer events – leve...
PointerEvent.tiltX - Web APIs
someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status comment pointer events – level 2the definition of 'tiltx' in that specification.
PointerEvent.tiltY - Web APIs
someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status comment pointer events – level 2the definition of 'tilty' in that specification.
PointerEvent.twist - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.twist == 0) { // no twist process_no_twist(event); } else { // default process_twist(event); } }, false); specifications specification status comment pointer events – level 2the definition of 'twist' in that specification.
Touch.force - Web APIs
WebAPITouchforce
someelement.addeventlistener('touchstart', function(e) { // iterate through the list of touch points and log each touch // point's force.
Touch.identifier - Web APIs
WebAPITouchidentifier
example someelement.addeventlistener('touchmove', function(e) { // iterate through the list of touch points that changed // since the last event and print each touch point's identifier.
TouchEvent.altKey - Web APIs
WebAPITouchEventaltKey
someelement.addeventlistener('touchstart', function(e) { // log the state of this event's modifier keys console.log("altkey = " + e.altkey); console.log("ctrlkey = " + e.ctrlkey); console.log("metakey = " + e.metakey); console.log("shiftkey = " + e.shiftkey); }, false); specifications specification status comment touch events – level 2 draft non-stable version.
TouchEvent.changedTouches - Web APIs
someelement.addeventlistener('touchmove', function(e) { // iterate through the list of touch points that changed // since the last event and print each touch point's identifier.
TouchEvent.touches - Web APIs
someelement.addeventlistener('touchstart', function(e) { // invoke the appropriate handler depending on the // number of touch points.
Example and tutorial: Simple synth keyboard - Web APIs
on createkey(note, octave, freq) { let keyelement = document.createelement("div"); let labelelement = document.createelement("div"); keyelement.classname = "key"; keyelement.dataset["octave"] = octave; keyelement.dataset["note"] = note; keyelement.dataset["frequency"] = freq; labelelement.innerhtml = note + "<sub>" + octave + "</sub>"; keyelement.appendchild(labelelement); keyelement.addeventlistener("mousedown", notepressed, false); keyelement.addeventlistener("mouseup", notereleased, false); keyelement.addeventlistener("mouseover", notepressed, false); keyelement.addeventlistener("mouseleave", notereleased, false); return keyelement; } after creating the elements that will represent the key and its label, we configure the key's element by setting its class to "key" (which establi...
Using the Web Audio API - Web APIs
our htmlmediaelement fires an ended event once it's finished playing, so we can listen for that and run code accordingly: audioelement.addeventlistener('ended', () => { playbutton.dataset.playing = 'false'; }, false); modifying sound let's delve into some basic modification nodes, to change the sound that we have.
Using CSS animations - CSS: Cascading Style Sheets
var element = document.getelementbyid("watchme"); element.addeventlistener("animationstart", listener, false); element.addeventlistener("animationend", listener, false); element.addeventlistener("animationiteration", listener, false); element.classname = "slidein"; this is pretty standard code; you can get details on how it works in the documentation for eventtarget.addeventlistener().
Mutation events - Developer guides
ndant(element, removed)) { callback(); // allow garbage collection observer.disconnect(); observer = undefined; } }); }); }); observer.observe(document, { childlist: true, subtree: true }); }; usage you can register a listener for mutation events using element.addeventlistener as follows: element.addeventlistener("domnodeinserted", function (event) { // ...
Overview of events and handlers - Developer guides
"eventprototype" : "objectprototype"; alert("we got a click event at " + ev.timestamp + " with an argument object derived from: " + objkind ); }; and second register our function with the the button object, either on the scripting side using the dom (document object model) representation of the html page: var buttondomelement = document.queryselector('#buttonone'); buttondomelement.addeventlistener('click', example_click_handler); or within the html page by adding the function as the value of the 'onclick' attribute, although this second approach is usually only used in very simple web pages.
User input and controls - Developer guides
if you want to use touch events, you need to add event listeners and specify handler functions, which will be called when the event gets fired: element.addeventlistener("touchstart", handlestart, false);
 element.addeventlistener("touchcancel", handlecancel, false);
 element.addeventlistener("touchend", handleend, false);
 element.addeventlistener("touchmove", handlemove, false); where element is the dom element you want to register the touch events on.
Memory Management - JavaScript
memory for a number var s = 'azerty'; // allocates memory for a string var o = { a: 1, b: null }; // allocates memory for an object and contained values // (like object) allocates memory for the array and // contained values var a = [1, null, 'abra']; function f(a) { return a + 2; } // allocates a function (which is a callable object) // function expressions also allocate an object someelement.addeventlistener('click', function() { someelement.style.backgroundcolor = 'blue'; }, false); allocation via function calls some function calls result in object allocation.
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
379 scripting graphics, svg, scripting, default, eventlisteners, preventing, setproperty one can override default browser behaviors with the evt.preventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
one can override default browser behaviors with the evt.preventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").