if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", handler, false);
document.addEventListener("readystatechange", handler, false);
window.addEventListener("load", handler, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", handler);
window.attachEvent("onload", handler);
}
Above codes is taken from a site.
Questions:
why for DOMContentLoaded and readystatechange, we use document.addEventListener(); while load, we use window.addEventListener(), why?
For readystatechange, we can use in IE this way:document.attachEvent("onreadystatechange", handler);, how aobut DOMContentLoaded? is there a way that we can use it in IE?
Context, who owns the events you are trying to listen. You don't listen for events on <button> elements when you want to listen to <input> elements :D
DOMContentLoaded is supported natively in IE9+. Prior to IE9, readystatechange can be used.
Related
Phonegap 3.4.0, jQuery 1.9.1, jQuery Mobile 1.4.2.
I've posted other questions about issues with my app, but the underlying problem seems to be that my event listeners are not working correctly. This could either be that I've done it wrong, or there is a conflict.
I have this code in my javascript file:
function onPause() {
initialize();
navigator.app.exitApp();
}
function onResume() {
initialize();
}
function onBack(e) {
alert("running");
if($.mobile.pageContainer.pagecontainer( 'getActivePage' ).attr( 'id' ) == "login") {
e.preventDefault();
alert("halted");
navigator.app.exitApp();
}
}
function onDeviceReady(){
document.addEventListener("pause", onPause, false);
document.addEventListener("resume", onResume, false);
document.addEventListener("backbutton", onBack, false);
}
$( "body" ).load(function() {
document.addEventListener("deviceready", onDeviceReady, false);
});
However, none of the functions, onPause, onResume, or onBack are ever called. Which leads me to believe my event listeners are not correct or something is wrong. Am I missing something? Is there something I can check that might be causing this problem?
.load() is deprecated since version 1.8 of jQuery. So your event listeners are probably never added. .ready() would be the replacement for .load().
But you should think about using it anyway. At least in the way you are doing it now. Because there is no need to wait for the body to load to add an event listener and it might be possible that the "deviceready" event fires before the body is ready. So you would miss the event. I actually don't know if this could ever happen in a cordova app, but I wouldn't take the risk.
I am loading an external script using jQuery's $.getScript function and it has something in it which I cannot understand:
if (!!window.addEventListener){ // FF
window.addEventListener('load', init, false);
} else if (!!window.attachEvent){ // IE
window.attachEvent('onload', init);
} else {
window.onclick = init;
}
Can someone please explain what this does?
I'm not sure but it adds some event listeners to check that the page is loaded.
But since I am loading the script with $.getScript function, I don't need those listeners anymore.
Is there a way to unbind them in the callback of the $.getScript function?
addEventListener adds event handlers, and attachEvent does the same for browsers that doesn't support addEventListener, which is just older IE.
The condition you have checks which one is available, and attaches an event handler to the window.onload event that calls the function init().
If none of the regular onload handler are available, it falls back to calling the init() function once the window is first clicked.
To remove the function, you'll have to try and do the opposite once the script has loaded.
You say you're using $.getScript, and that has a callback, so something like :
$.getScript('myscript.js', function() {
if (window.removeEventListener) {
window.removeEventListener( 'load', init, false );
}else if ( window.detachEvent ) {
window.detachEvent( 'onload', init );
}else{
window.onclick = function() {};
}
});
of course, it would be much easier and better to just remove the original event handler in the script you're loading if you no longer need that event handler.
This function fires in firefox/chrome :
$(document).on("reset", "form", function(){
alert("working");
});
What alternatives are out there for IE (I have 8 installed so I'd like to make it work from 8 onwards).
Try attaching the event handler directly to your form:
$(document).ready(function(){
$("form").bind("reset", function(e) {
alert("working");
});
});
This apparently works for multiple browsers including IE8.
Your method may not be working because of how IE8 handles event propagation... From jQuery documentation:
In Internet Explorer 8 and lower, the paste and reset events do not bubble. Such events are not supported for use with delegation, but they can be used when the event handler is directly attached to the element generating the event.
I want to add either a scroll event listener or a touchstart event listener. Initially I used the touch event to deactivate the scroll event listener as shown in the code below:
window.addEventListener('scroll', scrollStart, false);
window.addEventListener('touchstart', touchStart, false);
function scrollMenu() {
// do something
}
function touchStart(e) {
window.removeEventListener('scroll', scrollStart);
// do something
}
But I realized that on some occasions, the scroll event is triggered as soon as the page loads. Therefore, I cannot use the aforementioned method. Is there another way to check if the browser supports a touch event listener without adding the event?
Does Modernizr solve your problem? See example here for the various ways to detect touch events and each one's browser compatibility:
http://modernizr.github.com/Modernizr/touch.html
You should be able to check whether the ontouchstart attribute exists in the window:
if ("ontouchstart" in window) {
window.addEventListener('touchstart', touchStart, false);
} else {
window.addEventListener('scroll', scrollStart, false);
}
... I can't confirm the x-browser-ness of this though.
Is it possible to have keyboard event listener canvas.addEventListener('onkeydown', ev_keydown, false); like we have Mouse event Listeners
canvas.removeEventListener('mousedown', ev_mousedown, false);
canvas.addEventListener('mousedown', ev_mousedown, false);
in JavaScript.
If not then what would be the alternate?
Check if this works for you. Your sample line had the a prefix of on which is only used for IEs method attachEvent.
function listener(elem, evnt, func)
{
if (elem.addEventListener)
elem.addEventListener(evnt,func,false);
else if (elem.attachEvent) // For IE
return elem.attachEvent("on" + evnt, func);
}
listener(document.getElementById('myCanvas'), 'keydown', ev_keydown);
jQuery offers a simple way to bind eventlisteners to DOMElements
and there are also eventlisteners for keyboard events here are some links
http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
http://api.jquery.com/keyup/
you can bind them to window and this should do what you want
you can also use your own method to bind events in a cross-browser compatible way
function bindEvent(e, typ, handler) {
if(e.addEventListener) {
e.addEventListener(typ, handler, false);
}else{
e.attachEvent('on'+typ, handler);
}
}
this should also allow you to bind the mentioned types of events