Could someone explain to me what exactly this means
trigger executes the code for the event handler but not actually executes the event itself?
Consider the following code:
$('#parent').on('click',function (event){
console.log(event);
});
$('#parent').trigger('click');
trigger does produce an Event object since it consoles it. So, in which way it does not execute the event?
jQuery has a rather nice event system, that handles events in a more complex way than the basic event bubbling. For instance it allows multiple events, of the same type, on an element.
That means that jQuery events sit on top of the browser events and add features. When you trigger a jQuery event it just send messages up the jQuery DOM tree, which causes things to respond, but it does not necessarily generate the native browser events.
You can still hit the native event generation by using the underlying DOM elements and methods that jQuery wraps:
// This will generate a click event "for jQuery to hear"
$('#parent').trigger('click');
or this does exactly the same as above:
$('#parent').click();
Whereas this will fire the native DOM click event "actually clicks the button/link":
$('#parent')[0].click();
Update (from A. Wolff):
Some jQuery click events are passed on to the native click event. An exception being anchor links (which do not). I would have to test it to see if native clicks are generated or not for buttons and other inputs.
Related
Hi I'm developing my view in JS and I'm stuck in binding a click handler for my horizontal layout element. I've tried using Jquery
$("#myHorizontalLayout").bind("click",function(){window.alert()});
Which didn't work then I tried using attachPress with the element which obviously didn't exist. Please help.
Update:
The JS view is the default view of the application.
When on/bind does not work, it could be that the HTML of the control has actually not been created yet at this point in time. But even if you delay the binding, the re-rendering (re-creation of the HTML after changes) would remove your listener, at least when bound on the control itself.
A proper way of doing this is using the generic attachBrowserEvent function available on every control (here: on the layout) which internally handles all the rendering/rerendering stuff, see this example:
http://jsbin.com/hijutunefi/1/edit?html,output
attachBrowserEvent works for any browser event, as it attaches a new browser event listener to the root node of the control. For the most common browser events UI5 does event delegation, so for the "click" event and several others addEventDelegate can also be used, as pointed out by aborjinik.
Alternatively, listening on the <body> level with normal jQuery mechanisms should in general also work.
Which didn't work then I tried using attachPress with the element which obviously didn't exist. Please help.
Does this means that the element on which you are attaching event handler doesn't exists at this point? If this is the case you can hook the handler to some container, upper in the DOM hierarchy which you are sure that exists and filter the click events.
Example:
$("body").on("click", "#myHorizontalLayout", function(){
alert("Hey, you!");
});
As of jQuery 1.7, the .on() method is the preferred method for
attaching event handlers to a document. For earlier versions, the
.bind() method is used for attaching an event handler directly to
elements. Handlers are attached to the currently selected elements in
the jQuery object, so those elements must exist at the point the call
to .bind() occurs.
Reference here
So try replacing bind with on and let me know if it works or not.
In short
Is there a way in which, when listening to a native event, I can detect if the event was somehow used by CKEditor before it propagated to my listener, or prevent it from propagating at all?
Use case
I'm listening to the keyup event using jQuery, to detect when escape is pressed. When it is, the user is prompted if they want to discard changes, and the CKEditor instance is destroyed and its element removed from the DOM.
$('body').on('keyup', function(e){
if(e.which==27){
CKEDITOR.instances.myDiv.destroy();
$('#myDiv').remove();
}
});
The problem here is that CKEditor allows the user to interact with certain UI elements using the escape key. For instance to close a dialog window or drop-down list.
So my event should only execute its code if CKEditor did not already use the event to close a UI element of its own.
Attempt
I tried to listen to the dialogShow and dialogHide events to detect if a dialog window is open, and my action should thus be ignored. This didn't work for two reasons:
CKEditor handles the event first, so by the time the event propagates to my listener, no dialog windows are open and my code is executed.
Even if it would work, it wouldn't for drop-down lists as they do not trigger the dialog* events.
Ideas
I don't know enough about the workings of CKEditor to come up with a solution, but I think I'm looking for something along the lines of:
A setting in CKEditor to prevent event propagation: CKEDITOR.instances[0].noEventPropagation = true
An indication in the original event object: if(event.CKEditorWasHere){/*do nothing*/}
A plugin providing functionality that I can use.
Worst case scenario: A setTimeout in the dialogHide event which I'll use to suppress my own events for a short time.
So
Maybe I'm completely overlooking something. This seems to me like a common problem which should have a simple solution.
Thanks for your time.
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 am dealing with a long prototype.js code that is activated by a 'change' event listener and I need to create a jQuery function that simulates a 'change' event to activate the prototype script. How can I do this?
note: $('select[id="..."]').val(...).trigger('change'); does not activate the prototype script
jQuery's .trigger() only works for event handlers added via jQuery (see: http://api.jquery.com/trigger/)
Any event handlers attached with .on() or one of its shortcut methods are triggered when the corresponding event occurs. They can be fired manually, however, with the .trigger() method.
Prototype's .fire() only works for custom events (see: http://api.prototypejs.org/dom/Event/fire/)
Fires a custom event of name eventName with element as its target. Custom events must include a colon (:) in their names.
Unfortunately, the only way to do what you're describing is to grab some kind of reference to the "long prototype.js code" and manually call it. (This would depend on what the implementation you are referring to looks like.) It's not possible to fire a true "native" change event using javascript.
I'm customizing an existing ASP.NET 3.5 AJAX web application that I can't modify the source code to (it's SharePoint 2010).
I need to add a click event handler as the first event on a Close button. However, I'd like to check what the existing event handlers already registered on this button do first, so I don't mess anything up.
I'm still learning ASP.NET AJAX and can see the Sys.UI.DomEvent class has methods to add and remove event handlers, but not enumerate them. I know jQuery and am familiar with JavaScript debugging in Chrome.
How can I see which events are registered and insert a custom event handler at a particular position?
There is a technique that will at least allow you to be the first in line (unless another script employs the same trick - unlikely).
What you have to do is hijack the click event. This related question demonstrates the technique: Hijacking onchange event without interfering with original function
All we do is redefine the click function to be one of our own choosing, e.g.
var myButton = document.getElementById('button1')
var oldClick = myButton.click;
myButton.click = function(evt) {
//do whatever you want. When done, call the default click function:
if (oldClick) oldClick(evt);
}
(the syntax in the linked question is superior, but the above code is easier to read).