I have a page, on the left there is a list of links users can click, when they are clicked, a div on the right side will load the correct content via Ajax according to the link.
Now I want to fire a function when the right side div's content changed every time.
After a search in Stack Overflow, I learn that there are Mutation Events, I use the DOMSubtreeModified event:
right_div.addEventListener("DOMSubtreeModified", handler, false);
However, when I click the link on the left side, it seems that handler will be called several time. I want it be called only once when the new contents of it has been loaded. How could I do this?
The DOMSubtreeModified is "a general event for notification of all changes to the document". You can set mutation events for specific mutations:
DOMAttrModified event
DOMCharacterDataModified event
DOMNodeInserted event
DOMNodeInsertedIntoDocument event
DOMNodeRemoved event
DOMNodeRemovedFromDocument event
And there are the following types:
DOMElementNameChanged
DOMAttributeNameChanged
So if you are replacing a node, it might cause two (or more) mutation events - one when the node is removed, another when it is replaced. Futher events may also be dispatched, such as character data modified. if you are listening for an event only when the text content is changed, try the DOMCharacterDataModified event:
A user agent must dispatch this event
after CharacterData.data or
ProcessingInstruction.data have been
modified, but the node itself has not
been inserted or deleted. The proximal
event target of this event must be the
CharacterData node or the
ProcessingInstruction node.
Related
I have a web-application that needs to capture any keyboard event on the page, and target them to the appropriate editable-div.
If the editable-div has focus, then the event flows to my event handler and to the DOM to push the character corresponding to the key into the DIV.
However, if the editable-div is not the current focus target, I am able to capture the event with my event handler, but the character corresponding to the key pressed is not pushed into the DIV.
My previous implementation had a dependency on jQuery, and $.trigger() was doing the right thing: moving the keyboard event from a non-matching target to the default editable-div I choose.
I am trying to achieve the same without jQuery, and with Google Closure. I tried various incantations of dispatchEvent without success in triggering the new virtual keypress.
In ClojureScript, trying to do something naive such as
(.dispatchEvent new-target (.getBrowserEvent event))
will cause the browser to complain that The event is already being dispatched.
Is there any simple solution to this problem?
You can use goog.testing.events/fireKeySequence to create events similar like jQuery's trigger.
More discussions.
I have code which is written:
window.addEventListener("orientationchange", function() {
//code here;
}, false);
And it works fine...but I am being told to add by the Mozilla dev page:
elem.dispatchEvent(event);
Can anyone tell me why I need to add the dispatch and why it is working without it (what the dispatch actually does would also be very useful!).
W3C also recommends in the specification to remove an event when done with it, but for an orientation change it could happen at any time, is it OK to leave it there?
Much obliged for any help.
addEventListener says that, on the object (window in your example) you want to react whenever that object dispatches and event with the a given type (e. g. orientationchange)
You are listening to an event from an object.
dispatchEvent is what you call if you want to send or trigger an event. Internally, the browser is doing this whenever the user rotates their device, which triggers orientationchange . In this specific example, you don't need to trigger this manually unless you need to do so for testing.
removeEventListener does what you'd expect, and makes it so that you no longer are listening for triggered events. It is usually good to do this if you know you no longer want to listen to the event or that the event will no longer be fired so that you can free up memory resources. For your case, it seems like you don't need to do this.
Here is more information about DOM and JavaScript Events, http://www.w3schools.com/jsref/dom_obj_event.asp.
dispatch meaning send off to a destination or for a purpose.
dispatchEvent is the last step of the create-init-dispatch process, which is used for dispatching events into the implementation's event model.
EventTarget.dispatchEvent
Dispatches an Event at the specified EventTarget, invoking the affected EventListeners in the appropriate order. The normal event processing rules (including the capturing and optional bubbling phase) apply to events dispatched manually with dispatchEvent()
I am trying to understand events(such as: click, keyPress...) in js. But when I studied online, I saw it mentioned a lot on 'DOM events'. So my question is js events the same as DOM events? If not, what is the difference?
DOM events fires when the DOM changes or interacts with user, and they are Javascript events.
Please have a read all of them: http://www.w3schools.com/jsref/dom_obj_event.asp
Apart from DOM events, you can define your own event objects in Javascript and use the 'dispatchEvent' method to fire that event. For example:
var event = new Event('build');
// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);
// Dispatch the event.
elem.dispatchEvent(event);
In short, you can think of DOM events are native Javascript events that fires from DOM elements. While a Javascript event can be a DOM event or Custom event
A DOM event is any event that elements or objects in the DOM listen on. For example, a button click, a text input keypress, a mouseover. Generally DOM events are triggered by some sort of user interaction (mouse events, keyboard events, form submissions etc). DOM events can be triggered programatically though.
There are other events that wouldn't be regarded as DOM events, for example:
AJAX response (onreadystatechange)
WebSocket message received (MessageEvent)
LocalStorage data changed (storage)
An event is a system when certain actions performed are recorded and can be acted upon. Such as clicking on a button, hovering over some box, selecting some text, or even receiving a new message on a certain channel.
In js, DOM events are standard events that correspond to actions performed directly on an element in the DOM such as when the user clicks on something, the click event(directly corresponding to the user clicking the button) is triggered and any event handlers attached to the element will be called.
Here's a list of events:
https://en.wikipedia.org/wiki/DOM_events
These are recognized and supported by the browsers and are natively triggered.
Many js libraries make their own system of events over these DOM events. They wrap around the element that is listened to and when an event is triggered, they propogate the event to the handling function
They can also support custom events on DOM or any other object by having the user call a specific function such as
obj.on("receive", function(){alert("Hello")})
//Later
obj.trigger("receive")
So the anonymous function(display an alert) will be called whenever you trigger the receive event. What happens here is that the on function will keep a list of handlers attached to the object and the trigger function will call each one and call them using any required data
Dom Events: This event perform on the DOM component to perform certain action over it like (events/properties,etc)
Js Events: This events will perform action over the content of the DOM object like (validation(condition),expression,methods over the Dom object,etc)
I have a couple of questions regarding events attached to DOM nodes. Consider the following:
http://jsfiddle.net/hXq6r/15/
Basic:
[1?] What level is the [I] (class="fixed") dom node? What level is the [II] class="container"> dom node?
[2?] How do you describe the relationship between the objects mentioned in 1? Ancestors are siblings?
[3?] When clicking the .fixed - why is the hyperlink event not triggered?
Problem:
All runs as expected. Now running this code in the Android WebView causes the problem: The click event is fired first on #button and then again on the hyperlink. I am running phonegap 1.4.1 I have no event handler attached to the hyperlink, it is just the default hyperlink event.
[4?] How is the default hyperlink event named? Click?
Advanced:
[5?] Which of the elements fires the click event first? Does it depend on the 1. level in the dom?
[6?] It seems that [I] fires first.
[7?] How can I stop the click event on [II] from firing if [I] fired previously? I just set a variable to check. Is this the best solution?
[8?] Event propagation - I assume this is of no use for this example, because we are looking at children, no ancestors. Should I delegate the event on a higher level?
Thanks : ). Hopefully this helps me with grasping the whole event basics.
Useful:
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_order.html
In IE, if flash has focus, and receives a keydown event, it does not appear to bubble the event up through the DOM (I can't capture the event by listening on document, however the same listener can capture key events from html siblings, so I know my listener is working).
However, some other plugins on the page (I am looking at you windows media player) still respond to key events that initiate in flash (and I need to prevent that from happening)! It seems that the key event initiated in flash takes the bubble express highway straight to the top (where the top is whatever is above document in the DOM hierarchy).
I have tried terminating the events in as3, and tried different wmodes... neither approach works. Is there something I might have missed?
Focus just the swf container :
document.getElementById('flash-object').focus();