I am wondering is the following behavior correct.
I have a label element linked to an input element via the "for" attribute, should this yield two click events on a single user click on the label? Specifically, put a click listener on window. Then, define checkbox with a label element linked to it using attribute "for". Click on the label text. The result is that checkbox will be checked and you will see two click events. http://jsfiddle.net/k55uD/2/
If this behavior is correct, are there more such cases, attributes, or whatever? Some spec would be nice.
Any help is appreciated.
P.S. I update the post with the example.
Clicking the label will trigger any onclick function attached to that label and any onclick attached to the input itself. Clicking the input will trigger only the onclick for the input.
This is very easy to test. See here:
http://jsfiddle.net/zptw3/
The DOM would treat each element separately, so both the label and the element it is 'for' can have event handlers defined. So yes, if both elements have an onclick handler and the click is within each element, both events will fire.
However this is something you have to define, you don't get a second click by default on the label just because it is 'for' the other element.
Basically, it is up to you - you can set it up to raise two events or a single event but out of the box you will get one event raised for the element you defined the handler on.
This explains events and event order pretty well, as well as offering some advise about browser quirks.
http://www.quirksmode.org/js/events_order.html
EDIT:
If you Specifically, put a click listener on window. Then you will get both events due to propagation, again this is explained in the link provided.
Related
I'm trying to make a chrome extension with javascript which triggers an action on key presses when I'm typing an email in gmail.
I manage to make the extension, which performs a console log correctly when I press the keys on any page.
My problem comes when capturing the event when I am typing in a gmail email writing input, it doesn't capture the event.
The body text box is a contenteditable div, and the from and subject text boxes are inputs. I don't know if this helps
The JS code I inject is as follows:
document.addEventListener('keydown', function (e){
console.log('push')
});
The code works in the search input of the page but not in the write input of the email.
Does anyone know why?
Using document.addEventListener is probably not the right way to go when adding event listeners.
There's a 90% chance that the keydown event is being directly handled by the contenteditable div and the input elements which prevents it from being handled by the document itself. You may need to attach the event listener directly to the contenteditable div and the input elements (referencing them in some way or another - you can take a look at how MailTrack or some Gmail extension to see how they do it), rather than the document.
You can try opening up inspect element and seeing if the classes or IDs change, and make a decision on how to hook them up to your code using those; and attaching the appropriate event listener to them.
You can also try using event delegation to attach the appropriate event listener to a parent element of the input and contenteditable div; then check the event target to see if it is the element you are interested in - but I won't get into that since it's probably not the best approach to this type of situation.
It's entirely possible - since if another chrome extension can do it, yours can probably do it as well. It just comes down to information collection and the appropriate research.
Essentially, what I want to do is place an event listener on a list of dynamically generated elements. When clicking on those elements, the element changes to the <input> tag so the user may alter it. Clicking outside of that element would change the <input> tag back to the original <div> tag. Since only one element would have an input tag at a time, I just used querySelector("input") to search for the element, and detected if the click happened on that <input> element. If it did not, switch it back to <div>
My issue is that it's to my understanding that checking for clicks outside of an element, it would require a listener on the entire document, but when I checked for inside clicks, I used event delegation. However, with two separate listeners, it seems that one automatically undoes the other. Immediately after clicking on an element within the list, the the <input> tag switches back to <div> because the click happened when the element was a <div> thereby not allowing any user alteration.
How can I fix this issue? I was thinking that two separate event listeners wouldn't work, but I can't have one event listener both listen onto the entire document, and the list I apply event delegation onto.
I am fairly new to Javascript, so I would greatly appreciate any answers or corrections to my methodology. Thank you in advance.
I am attempting to edit some javascript code that is in the html of the page (not an imported js file). I am able to set break points and step through them, but I can not edit the javascript during the execution or before/after execution. I prettified ({}) and un-prettified the files. The code piece is not minified in this section.
Can I do this?
Does it matter that the code is inside an attached event. Ie a click etc.
I am useing jquery obviously.
I could have sworn this used to be a common feature. But it has been over a year since I have done a lot of javascript.
Using chromium / chrome there are several methods to modify the html of an existing document. At devtools
Select Elements tab, right click on the element to modify, select Edit as HTML , make modifications in frame containing element, then click outside of editor frame
Select Sources tab, select Snippets tab, right click and select New , write javascript, to execute in existing window press ▶ at right panel to run javascript in Snippets middle panel in existing window. For example if $("body").on("click", function() {alert(123)}) is added as a Snippet clicking body element should call alert(123). The event should also be listed in Event Listeners at right panel of devtools when inspecting element. Removing the listener may be somewhat more challenging; even if you click remove when hovering over the listener at right panel, as the event is already attached to the element. The simplest method would be to add a namespace to the event $("body").on("click.abcnamespace", handler), then call $("body").off("click.abcnamespace")
Modifying text existing handlers will not automatically affect , or cancel the event handler previously attached to the element. The simplest approach would be to copy and save existing javascript containing event handler, select Elements tab , right click on element that has event listener, select Event Listeners at right panel, when hovering over the window, document or HTMLElement having event attached a button should be displayed that says Remove. Click that button to remove the event listener. You should then be able to modify the saved event listener and add it back to the existing document with modifications being applied
I want to know the right event when the user remove focus on a text box. Whether if the user presses tab or clicked to another field. I've seen some solutions like onchange or blur. But it doesn't satisfy all scenarios when the user remove focus. I want to use pure javascript or jquery. Thanks!
jquery focusout() is the best suited in this case
go thought this link
jQuery .focusOut() documentation
I find .focusOut() useful when I'm more specifically concerned with losing focus from a defined input or input group, since it supports event bubbling.
see the demo in http://api.jquery.com/focusout/ it works when user uses tab to focusout or clicks anothoer field
FYI: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
you can use blur() event.
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.
Say I have a JQuery object, el, that has selected an element. Is it legal, safe, and reasonable to call el.trigger("change") if the selected element is a DIV? What about other element types? For that matter, can I call el.change()?
The JQuery documentation for .change() says:
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements.
It's not clear to me what "limited" means here. It might be referring to the fact that these are the only three element types that will produce these events automatically, but it could instead mean that other elements aren't allowed to.
Empirically, Chrome v28 seems to allow it, but I want to know if I can expect it to work in general.
Goal
I have a pseudo-control that's composed of a set of buttons and spans wrapped in a div. Each instance of the control maintains and manages a value, which is modified by clicking the control's buttons. When the value changes, I need to send an event out from the div so that the rest of the page can react. I don't want to listen for the click events outside the control, since that couples the surrounding code to the controls' internals and not all clicks change the value.
I could create a new event name, but the built-in "change" event seems like conceptually correct, so I'd rather use it if I can. As an added bonus, my page already a "change" handler bound the right place with the right behavior (because I have some input and select controls on the page, too).
I need to support IE8 and up, in case the answer varies by browser make and version.
There are no restrictions, you can trigger any event type you like on any HTML element.
The jQuery documentation is simply telling you that change is only automatically triggered on <input>, <textarea> and <select>