The jQuery documentation says the library has built-in support for the following events: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and error.
I need to handle cut, copy, and paste events. How best to do that? FWIW, I only need to worry about WebKit (lucky me!).
UPDATE: I'm working on a "widget" in a Dashboard-like environment. It uses WebKit, so it only really matters (for my purposes) whether these events are supported there, which it looks like they are.
You can add and remove events of any kind by using the .on() and off() methods
Try this, for instance
jQuery(document).on('paste', function(e){ alert('pasting!') });
jQuery is actually quite indifferent to whether the event type you assign is supported by the browser, so you can assign arbitrary event types to elements (and general objects) such as:
jQuery('p').on('foobar2000', function(e){ alert(e.type); });
In case of custom event types, you must .trigger() them "manually" in your code, like this:
jQuery('p').trigger('foobar2000');
Neat eh?
Furthermore, to work with proprietary/custom DOM events in a cross-browser compatible way, you may need to use/write an "jQuery event plugin" ... example of which may be seen in jquery.event.wheel.js Brandon Aaron's Mousewheel plugin
Various clipboard events are available in Javascript, though support is spotty. QuicksMode.org has a compatibility grid and test page. The events are not exposed through jQuery, so you'll either have to extend the library or use native Javascript events.
Mozilla supports an "input" event which I'm having trouble finding useful documentation for. At the very least, I know it fires on paste.
this.addEventListener('input',
function(){//stuff here},
false
);
As jQuery 1.7 you can use bind(...) and unbind(...) methods for attaching and removing respectively handlers.
Here are examples align your questuion:
$('#someElementId').bind('paste', function(){return false;});
- this one will block any attempts to paste from clipboard into element body. You can use also cut, copy and others as event types (see links bellow)
$('#someElementId').bind('copy', function(){return alert('Hey fella! Do not forget about copyrights!');});
So, in other cases, when you want to remove those handlers, you can use unbind() method:
$('#someElementId').unbind('copy');
Here some useful links:
bind()
unbind()
full list of event types
Related
Is the onpaste event a valid javascript event in HTML 5? If so, why does VS 2019 show this error?
It works absolutely fine. Was just wondering if it is to be deprecated in the future or something.
Apart from onpaste not being standard, I strongly suggest to use oninput since it works too and can replace all your other handlers - or better use
input event (browser support)
The input event fires when the value of an <input>, <select>, or <textarea> element has been changed.
which includes when something has been pasted into it
document.getElementById("yourInputID").addEventListener("input",srch)
You can always check canIuse.com to understand which HTML/JS works in what browser.
Look: click.
This feature is non-standard and should not be used without careful consideration.
See full reference on MDN Web Docs.
The onpaste is not standard.
onpaste is not standard (if it were, it would be listed here), but the paste event is standard (though not universally supported, at least not by older browsers).
This dichotomy reflects the consensus that onXyz attribute event handlers are not best practice. Use addEventListener to hook up event handlers:
document.querySelector("css-selector-for-element").addEventListener("paste", handler);
document.getElementById("id-for-element").addEventListener("paste", handler);
// ...
Generally, though, the paste event isn't all that useful; input is a more useful event:
document.querySelector("css-selector-for-element").addEventListener("input", handler);
document.getElementById("id-for-element").addEventListener("input", handler);
// ...
It's fired whenever the input, well, receives input, regardless of the mechanism by which it receives input.
I've added page navigation to the window using the keypress event and noticed it's not working on some browsers. If I use keyup in those browsers the event is triggered.
So my question can be solved by knowing either:
For most browser compatibility do I use keyup or keypress? Can I
use both?
How do I test if an event is supported? For example, if I know the
brower supports keypress I'll add a handler for it. If it supports
keyup, I'll add a handler for that. I can add the event handler
dynamically.
History:
In ES4 there was a willTrigger method but I don't see that method in the DOM.
Update:
I found a possible answer here. It says that in some browsers keypress is dispatched where is does not make any distinction when mentioning keyup.
To quickly differentiate between keypress and keyup, keyup will fire only once, no matter how long a key is pressed down for , whereas the keypress event can fire multiple times. You can use both (I don't see why not - you'd use them for different things) , and basic support for the events is present cross-browser (although figures for mobile browser support is not fully known). There are jquery equivalents of both the .keyup()/ onkeyup and .keypress() / onkeypress
Hope this helps
If it's possible to somehow monitor a change in a div's DOM then that would be my solution - that will be enough to fire my event handler, but in case that's not possible - this is my problem:
I have a div, some javascript function (out of my control) will add or remove an image to this div (potentially nested in several divs/spans).
I need to attach an event (if possible using jQuery) that will fire when this particular image is added or not.
EDIT: To clarify - when I say added - I don't mean some sort of toggle of it's display attribute, I mean literally completely added or completely removed.
You can use the mutation events for that purpose. Be aware that some of those events are deprecated by now.
$('div').on( 'DOMSubtreeModified', function( event ) {
// something was changed
});
If you just need to know if some node was added, use
$('div').on( 'DOMNodeInserted', function( event ) {
// something was changed
});
The event object will give you further information about what exactly happend.
Since you asked for an alternative, there is the jQuery livequery plugin. AFAIK, i'll also use the Mutation Events if available, but it claims to be compatible with all browsers jQuery supports. That means, they will use a fallback solution (most likely intervall timers) to check for changes in incompatible browsers.
Further read: Mutation Events
Is onclick in HTML identical to .click() in jQuery?
Obviously they are identical from a usability standpoint, but I am curious how the browser handles them.
jQuery attaches events using JavaScript behind the scenes.
An important difference is that jQuery allows multiple events to be bound using click(), where as you can only attach one handler using onclick. This is because jQuery uses either addEventListener or attachEvent behind the scenes, as opposed to binding to .onclick directly.
Furthermore, attaching handlers via JavaScript (using jQuery or not) promotes unobtrusive JavaScript (i.e. not mixing JavaScript and HTML), which is a good thing.
No it's not the same. OnClick sets a property of a DOM element, where .click() adds an eventListener.
The differnce between them is that every DOM element can only have on property of a type at once. So if you use onClick= twice on an element, only last added will win, the first will be overwritten.
This will always alert 2, cause the first attachment will be overwritten:
myDiv.onclick = function(){alert('1')}
myDiv.onclick = function(){alert('2')}
Using .click() or .addEventListener('click', myFunction), you can add as many functions as you want. So the following will alert 1 and 2:
myDiv.click(function(){alert('1')})
myDiv.click(function(){alert('2')})
The differnt between jquerys .click() and .addEventListener() is, that the jquery solution works in all browser, cause IE<=8 has a different syntax (attchEvent). And that you can unbind all click handlers in once. The normal JavaScript solution can only detach the passed function not all of them.
(Noting that jQuery is a JavaScript library and so can't do anything that you couldn't do in JavaScript yourself if you had the time...)
The jQuery .click() method is different to onclick in a few key ways. In no particular order:
jQuery endeavours to normalise the event object so that you don't have to worry about the (mostly) minor differences between browsers
jQuery binds events with .addEventListener() or .attachEvent() depending on what your browser supports, so, again, you don't have to worry about the difference
jQuery guarantees that where multiple handlers have been bound for the same element and event they will be run in the order they were attached (noting that using .onclick you can only bind one handler anyway, but with .addEventListener() and .attachEvent() you can bind multiple handlers)
if you use jQuery's .on() or .delegate() (or the deprecated .live()) to attach events, rather than shortcut methods like .click(), it is easy to setup event delegation
Behind the scenes all the standard browser events are still happening, but jQuery provides a wrapper for them to make all of the above happen. Of course there are some other differences, but I see the above as the most important.
Obviously they are identical from a usability standpoint
No they're not. It would be much more accurate to say that jQuery's events are (almost) the same as .addEventListener() or .attachEvent() in how you use them, but even then as detailed above jQuery gives you an extra level of abstraction to save you having to code it all yourself.
the .click() even in JQuery is not the same. It is a piece of codes on top of the onclick in html. JQuery allows to bind methods to a event using this layer on top of the normal html events.
You can change/override .click() to adapt your needs. For instance when using a mobile browser or pda etc.
I have a facebook connect button on this site here is the code
<fb:login-button onlogin="javascript:jfbc.login.login_button_click();"
perms="email,publish_stream,user_about_me,user_hometown,user_location,user_birthday,user_religion_politics,user_interests,user_activities,user_website"
size="medium" v="2"><a class="fb_button fb_button_medium">
<span class="fb_button_text"\>Login With Facebook</span></a></fb:login-button>
and i want to trigger this button with a javascript call and doing research i found this jquery that seems that it would do the trick (havent tested though) and i was wondering if there is an equivelent javascript or mootool because jquery is not installed. I can install it if i cant find a solution. Or if anyone has another idea on how to trigger this facebook button
$("fb\:login-button").trigger("click");
There are two ways to "trigger" a listener:
call it directly (e.g. element.onclick())
dispatch an event into the DOM that the listener will respond to
The trouble with the first method is that it doesn't replicate a bubbling event so the listener may not work as intended (e.g. there is no associated event object or bubbling, the listener's this keyword may not be correctly set).
The trouble with the second is that some browsers will not allow programatically dispatched events to do certain things (click on links for example). Also, in some browsers you have to use the W3C dispatchEvent and in others the Microsoft fireEvent.
So unless the listener has been designed specifically to work with one method or the other and is called appropriately, your chances of triggering the listener successfully are quite low.
PS. Some libraries provide their own event system, with custom events and bubbling of otherwise non-bubbling events, but in that case you have to set and trigger the listener using that library, otherwise it will probably not respond to either of the above methods.
You should be able to just invoke the same code that is invoked inline:
jfbc.login.login_button_click();
I suppose it would be something like
document.getElementsByTagName("fb\:login-button")[0].click();
I'm sure that would work very well with a "normal" DOM element that handles the click event; however, I'm not entirely sure it will work in all browsers with the fb:login-button element shimmed into HTML. You'll have to let me know.
Looks like you should be able to do:
document.body.getElementsByTagName("fb\:login-button")[0].click();
It looks like you want a namespaced element selector, so you should use:
document.getElementsByTagNameNS('fb', 'login-button')[0].click();
The : is the namespace separator.
I ran into this tonight, absolutely positioned a new button image over the iframe, and was planning on using pointer-events:none to pass through and click the iframe, but I was looking for a cross-browser solution, here you go.
jQuery('.button_fb_connect').live('click', function(){ FB.login() })
Your simply running the js function FB.login() after clicking your new element, obviously you can use whatever event you want.
Thats in jQuery of course, but thats the function you want, not just a simple click event trigger.