For example, I have registered a proxy event on an element
Do something
Say I have a reference to this element (e.g. from event.node inside the event handler), how can I remove/unsubscribe "doSomething" from just this specific element? (I still want to keep this event for other elements)
Related
According to the XForms specification most events are said to "bubble".
As per the DOM Level 2 Event Specification an event that "bubbles" means that the handlers for this event associated with ancestor elements of the event dispatch target will also receive this event.
For an event to be specified as "bubbles" it means the xf:dispatch action cannot modify the bubble behavior to limit it to the target.
I don't understand what the benefit is of so many xforms events to bubble. For example, xforms-select and xforms-deselect. They apply to xf:item (of xf:select*) and xf:case (of xf:switch, i.e., used in a form with tabs).
Let's say I have an xf:case with an xforms-select handler that will cause a refresh on an expensive rendering widget, just when the tab is actually selected rather than every time the model is updated. Now I also have an xf:select in that same tab. Now whenever the user selects another item in that selection, the xf:case would receive the xforms-select at the bubble phase, doing the costly update operation every time.
This doesn't seem to make sense.
In fact xforms-node-attached has it right: we really want to be specific as to which form element gets the node attached. But apart from that, most events are said to bubble.
I could conform myself better with this issue if I understood the reason for this. Otherwise I am tempted to change my XForms engine to change the definition of xforms-select and xforms-deselect not to bubble.
This is to allow what is known as event delegation:
"Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future." (from an older version of this jQuery doc page)
In general, this is a good thing:
You use less event listeners.
A listener can listen on multiple targets.
You don't need to remove/add listeners as DOM elements are added/removed.
It seems that, in the HTML world, things have moved towards letting everything bubble. For example, the old focus event didn't bubble, and the newer focusin event bubbles.
If you have an event handler which gets activated by events dispatched to multiple targets, in some cases you need the ability to discriminate. This is where event context information is useful. Libraries like jQuery also allow you to associate an event handler filtered by CSS selector, which is neat.
Now in the case of xforms-select specifically, your issue is that you cannot discriminate between this event dispatched to an xf:case vs. an xf:select. This might mean XForms shouldn't have a single event for these two scenarios, or it should have enough event context information to discriminate between the two. I don't think that this is making a case for not letting the event bubble.
I'm using a RadComboBox in the load on demand (lazy) mode with a web service.
I'm using a client side item template of this form: <input type='checkbox' id='cb_#= Value #'/><span>#= Text #</span> (adding a checkbox before each item's text)
In the itemDataBound client side handler for this RadComboBox I'm retrieving the particular item's DOM element and the nested checkbox'es DOM element and adding a click handler function for each of them (using jquery's $(element).click(function() {})).
The click handler functions work fine until I scroll the items out of view and then scroll back, after that the click handlers are not called anymore (the checkbox selection is also lost).
I suppose this is because the DOM elements representing the items get re-created as they are scrolled in and out of view. But the itemDataBound event is raised only once and is not raised again when an item is scrolled back in view.
The only workaround I can think of is to use the onclick attribute in the HTML and reference a global function from there, but this is ugly.
Is there a nicer solution for this then using the onclick attribute?
What it does actually it appends to innerHtml of the list element, but this is effectively re-moving and re-adding every node under the list element.
I worked around this by assigning my click hander and doing the databiding in the itemsRequested client side handler, iterating over the entire list of items obtained with the get_items() method of the RadCombobBox client side object.
itemsRequested is called every time after new items are added to the list and therefore every time after the DOM is re-created.
Is there a way of getting a list of classes available in javafx.scene.control and the events of each one?
I would like to have in a table all the controls available in javafx (obviously those that come with it) and in another table all the events associated to each control.
Thanks.
Just use the Javadocs and look at the list of properties defined for each class. Properties whose names being "on" represent event handlers, so indicate that the control (or other node) fires properties of the indicated type.
So for example, Button has an onAction property of type EventHandler<ActionEvent>, so you can register handlers for action events with it.
All properties (whether or not their name matches the onXXX pattern) represent observable properties with which you can register ChangeListeners or InvalidationListeners. So Label has a text property with which you can register a ChangeListener that will be notified if the text changes.
I make an element in jQuery plugin:
this.addButton = $("<a>", {
text: "ADD",
"class": "addButton"
}).appendTo(this.element);
Then i add live functionality:
this.addButton.live("click", function() {
that.somefunction("addSomething");
});
And it isn't working.
IF i change "live" to "bind" it works OR when i do:
$('.addButton').live("click", function() {
that.somefunction("addSomething");
});
it works too. But why adding live to an dynamically added element doesn't work?
Any ideas?
live() needs to examine the event on a parent element to work. The way you have set it up, the event can not propagate to any parent element.
Because of the way live() works:
The .live() method is able to affect elements that have not yet been
added to the DOM through the use of event delegation: a handler bound
to an ancestor element is responsible for events that are triggered on
its descendants. The handler passed to .live() is never bound to an
element; instead, .live() binds a special handler to the root of the
DOM tree. In the example above, when the new element is clicked, the
following steps occur: A click event is generated and passed to the
for handling. No handler is directly bound to the , so the
event bubbles up the DOM tree. The event bubbles up until it reaches
the root of the tree, which is where .live() binds its special
handlers by default.
* As of jQuery 1.4, event bubbling can optionally stop at a DOM
element "context". The special click handler bound by .live()
executes. This handler tests the target of the event object to see
whether it should continue. This test is performed by checking if
$(event.target).closest(".clickme") is able to locate a matching
element. If a matching element is found, the original handler is
called on it. Because the test in step 5 is not performed until the
event occurs, elements can be added at any time and still respond to
events.
lives doesn't bind an event to an object, it attach a listener to the window and then when the events bubble ups it checks for the original target. So you don't add it to the new object.
The onBrowserEvent method of an abstract cell returns a parent element.
If I have multiple HTML items rendered within the cell, such as spans or divs, how do I get and distinguish which one triggered the event?
NativeEvent#getEventTarget() will give you the exact element that fired the event. You can then walk up until you find an element with some discriminant (e.g. a specific CSS class name), or walk down from the parent element and use Element#isOrHasChild().
Have a look at how CompositeCell dispatches the event to the appropriate cell,or how ButtonCell checks that you clicked the button inside the cell.