Questions tagged [dom-events]
DOM (Document Object Model) events allow event-driven programming languages to register various event handlers/listeners on the element nodes inside a DOM tree.
10,276
questions
0
votes
0
answers
6
views
What event is late enough to not impact PageSpeed?
(Note, this isn't about making a random tool give me a better number; I'm diagnosing a landing page that is having terrible performance, and based on the web vitals assessment, real users are taking ...
0
votes
0
answers
2
views
Is it better to extend from EventTarget or implement EventTarget?
I guess this really just boils down to a question of inheritance vs composition. I've typically heard people advocate for composition more, but I am wondering if that holds true in an example like ...
0
votes
0
answers
9
views
Leaflet performance issues
I am listening to an EVENT on my map object, firing a function on this event.
In this function body, I am calculating an angle which is needed outside the function, but can not reach it. So check how ...
3
votes
1
answer
71
views
store data in firestore when Browser Tab is closed or the route is changed (react JS)
const handleDraftContracts = async () => {
console.log('/bruhhhhhhandleDraftContract');
const paragraphRef: string | any = document.getElementById('contract');
const contractDetails = {
...
0
votes
1
answer
10
views
Can I use JS to add async to a script tag in an iframe in such a way that it will actually affect the script page loading?
It seems that the Stripe JavaScript is adding nearly 1/2 a second of main-thread blocking to my site. According to the Stripe documentation, it's totally fine to either async or defer their JS. In ...
0
votes
0
answers
29
views
JavaScript Keyup Not Firing Sometimes
Sometimes the event can be fired but sometimes nothing happen.
I have no idea why.
Below is my code for .aspx and javascript.
It does hit alert('register') everytime the page loads.
.aspx
<span ...
0
votes
1
answer
31
views
How do I prevent an event from triggering during a GSAP animation?
I have a GSAP animation like this:
window.addEventListener('keydown', ()=>{
GSAP.to(this.box, {
x: this.box.position.x + 4,
duration: 1,
}
});
I want to increment the box's x ...
0
votes
1
answer
15
views
Change drag image inside a DragEnter event
I'm trying to define the image that appears when I drag an element inside my page.
I saw how to do it with DataTransfer.setDragImage() in that link but with me it is not working.
There are two ...
0
votes
0
answers
30
views
How to use the visibilitychange event to display messages when tab is hidden?
When an customer opens a new tab or goes away from the current sites tab, I'm trying to insert an promo message in the tab of a browser that flashes back and forth from original title and an promo ...
-1
votes
0
answers
11
views
How can I fix useEventListener.js:12 error every time I click on a checkboxe
I've noticed that when I click on my checkboxes (all my checkboxes in fact):
Full code1
export default function App() {
...
<form onSubmit={handleSubmit}>
<input type="checkbox&...
0
votes
0
answers
22
views
How to get querySelectorAll from another webpage?
I'm trying to get data from another webpage, using the HTML DOM. I tried code from another StackOverflow question (querySelectorAll() to html from another page) but it's not working for me:
let ...
-1
votes
1
answer
32
views
React Boostrap Select, First Select Option ins not triggered by onChange event
I'm using React Boostrap Select component :
<Form.Group className="mb-1">
<Form.Label
htmlFor="type"
className="iig-form-label d-inline-block text-...
1
vote
2
answers
68
views
How to disable "Leave site?. Changes you made may not be saved" pop up in angular?
I'm trying to close the browser after I have reached a order confirmation page and it throws a alert as shown below. This creates a misconception to user that his changes are unsaved. So I want to ...
-2
votes
1
answer
21
views
Do not close window after clicking 'X' button? [duplicate]
I want to show a dialog when users click the X button to close the browser's window. In the dialog, it will ask users if they want to proceed with closing or not, if users choose no, it won't close ...
0
votes
0
answers
24
views
EventListener on a new element added with JavaScript not trigerring because of element value seems to be null [duplicate]
Im new with js and i try, with my current knowledge, to make this work but i cant.
In the main HTML i have this button that onclick, add new content to another section from the main HTML. This new ...
3
votes
2
answers
21
views
overflow:hidden can't hidden skew dom event?
I created a diamond through the sketch of CSS, which is located in the upper left corner of a circle.
I set overflow: hidden for the circle. How can the diamond still trigger cursor: pointer?
Here is ...
-1
votes
0
answers
35
views
Why window.closed is set to true before the window is closed?
I am trying to use the answer at https://stackoverflow.com/a/48240128/583363.
Open a window with window.open and then start an interval to check if it is closed. The problem is the closed property ...
0
votes
1
answer
59
views
Observing DOM changes, Specifically input value change using Plain JavaScript [duplicate]
I have a certain requirement where I want to be notified about all changes in HTML input on a page specifically value of all input elements on page, if value change by any means
So far what all I have ...
0
votes
0
answers
14
views
Setting a textarea target for KeyboardEvent created myself
How to set a textarea target for KeyboardEvent with Backspace code, created myself?
For example, I can create an event like this:
new KeyboardEvent('keydown', { code: this.currId })
And I can add more ...
0
votes
1
answer
42
views
Intercept keydown event on input element
I have a multipage form that is composed of <input /> fields. Alongside the form I have a collection of "hotkeys" that are implemented via a custom hook (window.attachEventListener(&...
0
votes
0
answers
25
views
Troubleshooting a Javascript class' click-event function
I have a JS 'shuffle' function that I am trying to execute every time a user clicks on the shuffleBtn class in my HTML. I am using classes over IDs because I have multiple shuffleBtn instances.
I'm ...
0
votes
0
answers
13
views
How to call a variable from a react function in a file to another function in a different file
On building a podcast with reactjs framework I got hooked up some where. Since on building the page header I made each header part to be a component. Below are some snippets for that:
Searchform.js
...
0
votes
0
answers
15
views
How to make app interact with other browser tabs?
Is there a way to make app display it's template above all other browser tabs when the application tab is not in focus (visibilityState == 'hidden')? For example pomodoro clock app that displays timer ...
0
votes
1
answer
27
views
const, let or none for addeventlistener, what would be correct?
So I have been searching around, but was unable to find any mentions of this.
If I want to add an "EventListener" to an element, what would be the "correct" way?
const ...
0
votes
1
answer
19
views
Popup widget after tab changing
Is it possible to make popup form appear after change of browser tab (when visibilityState == 'hidden')? I mean something like video player in the Yandex browser...
0
votes
3
answers
34
views
Should I use event delegation, to be economical with JS-events at i.e. table cell level?
If I have a table in which I want to react to table-cell events, is it better to put the event on the table-element and handle cell specific events with the help of i.e. closest("td"), or is ...
-1
votes
0
answers
12
views
addEventListener is not a function in my runtime created textbox
I am creating a row of text boxs at runtime using JS. I only need one of them to have an event listener. I have tried added the event listener in the addInitialRow() and that did not work. I tried ...
0
votes
0
answers
33
views
Is there a way to manually add delay to all user input DOM events?
For a research experiment I am trying to delay the user interface (create lag) on mobile browsers, as I am researching the effects of UI latency in webapps. For example, if a user scrolls the scroll ...
0
votes
0
answers
39
views
Conditional onkeyup event
Currently I'm using the following:
document.onkeyup = function (data) {
if (data.key == 'Escape') {
ClosePlayerMenu()
}
};
However I'm having two separate menus. A PlayerMenu for ...
0
votes
1
answer
35
views
Is there a way to detect keypress/enter in search event?
I am looking for a way to differentiate between pressing Enter in a input[type="search"] event (search-event), and clearing the query by clicking X.
I have tried looking for variables in e ...
-2
votes
0
answers
15
views
Using DOM event to change colors in a constuctor
The basic idea is that I want the c.strokeStyle to change to a random color on a keydown event.
The keydown is working and logs to the console without issue but I cant figure out a way to select that ...
0
votes
0
answers
30
views
How to make dateTime picker as required field in moment & AngularJs
I have one form that includes jQuery moment.js date-time picker I need to make this field required and disable the submit button until date time is not been picked by the user.
However, the approach ...
0
votes
2
answers
70
views
How can I run a function with an unavailable DOM object?
I want to run a function to remove a button's parent element. parent element after getting it with
let rem_display_btn1 = document.getElementById('rem_display_btn1');
like this
let rem_display_btn1 = ...
0
votes
2
answers
32
views
How to wait for the completion of the entire process of a function called by events?
I have a function that is triggered by an event, is there any way to wait for the completion of the entire process of this function, even if the event is triggered other times, so that only after that ...
0
votes
0
answers
52
views
Handling of overlapping events
Have inputs with very complex behavior where for example the change-event regulating any input value formatting like .trim() and the keydown-event where the next focus with .focus() went so if the ...
0
votes
0
answers
14
views
Is there any other way to display image without getting undefined onclick which is already rendered as template to html?
I am cretaing a small project related to managing books using db.json file as database. This is some of the code relevant to the actual problem
index.html
<body>
<ul class="books-...
0
votes
0
answers
33
views
Cannot remove Event Listeners from object on Angular
I have an image with mouseenter and mouseleave attributes. When the cursor first hovers this image, it calls startCalc(id) method and in this I am calculating some stats with addEventListener. When ...
0
votes
3
answers
29
views
Replace text in textarea after string match and key event
Problem - Unable to replace text within textarea when a string match is found
Expected outcome - For specific string "Dave" to get replaced with longformText variable when keyup event occurs
...
1
vote
1
answer
18
views
I'm trying to make a wordle clone, but can't get it to function properly. Is there anything I can do to make it work?
let body = document.querySelector("body")
let container = document.querySelector("#container")
let enter = document.querySelector("#enter")
let inputArr = []
for (let ...
2
votes
1
answer
38
views
Why does a browser apply CSS styles first before deciding what onclick event handler to call?
I have a single div on a page. It has an onclick event handler. When the user clicks on that div I expect that the event handler will be called. But there is this CSS rule as well: when that div has a ...
-1
votes
0
answers
14
views
How to access JavaScript event.currentTarget outside the event?
I am trying to create a page where if people click on a 'more info' link they are directed to a page where they get the details of that following person. However, when I import the function, I cannot ...
0
votes
1
answer
15
views
How to have extensible event handler methods in a JavaScript class? [duplicate]
I have a JavaScript class that runs code when a click occurs. To make that code extensible, I've put it in a separate handleClick() method.
However, that's not working ideally because I can't access ...
1
vote
1
answer
44
views
At what point do the event handlers get determined when an event has been fired in the browser?
I have been reading a lot about the event loop lately and the different queues (job/macrotask queue, microstask queue, render queue) it has and their priority. But am still not able to fully ...
1
vote
3
answers
109
views
+100
Add Focus To Pop Up / Modal On Click For Tabbing / Accessibility - JavaScript
I have a pop-up/overlay that appears on 'click' of an element. Because there is plenty of HTML content behind the pop-up the buttons/input elements on the pop don't naturally have focus/tabindex ...
0
votes
2
answers
57
views
Inline event handler error for button onclick event Javascript DOM
For my personal website, my main page has a matrix rain canvas effect that I added in buttons to be able to change the color for more interactivity. It worked for a couple days but randomly started ...
0
votes
0
answers
36
views
Identify the absence of a player on the page and send a request for remove
I study on JavaScript, create an online game. I have a problem: it is necessary to remove the player from the room (by closing the tab, by closing the browser, by going to another page); I try to use ...
0
votes
0
answers
14
views
React-typeahead: Disable remove token
I have a user Profile page (email, display name etc.); when it loads all the inputs are disabled, It seems the Typeahead's input can be disabled however it also provides the tokens from which I am ...
0
votes
0
answers
23
views
Trigger mouseOver event without triggering mouseEnter event
I am creating a unit test for a dropdown component that has 2 event listeners, onMouseOver and onMouseEnter.
I would like to trigger a mouseOver event, without triggering the mouseEnter event, ...
1
vote
0
answers
26
views
FormData Submission Not Working On Image Preview Form After Safari Bug Fix
I have some JavaScript that previews image thumbnails prior to form submission, where the thumbnails/files can be deleted by the user prior to form submission.
Due to problems/a bug in Safari around ...
0
votes
0
answers
14
views
Battleship game - css property Pointer-events: none not working on element if child is set to pointer-events: auto?
I'm reallllly hoping someone can help me out with this project for my studies.
I am currently making a battleships game with HTML, css and vanilla javascript for a college project. There is a link ...