How the Document gets loaded - javascript

I am trying some hands on with javascript core concepts and came across this interesting thought. When I use the native javascript and try executing some events on the document load as below I get an error:
document.addEventListener('load',function(){ //this doesn't alert doesn't get fired
alert("document load event listener fired!");
});
But if I change the above code as below it works:
window.addEventListener('load',function(){//this works alert gets fired
alert("Window load event listener fired!");
});
A possible explanation that comes to my mind is that the window the parent object in browser object model is loaded the first before anything else can be ready or accessed.
However in jQuery (something I have been more comfortable with) the syntax clearly starts with document as below:
$(document).ready(function() {
// some code here
});
I guess jQuery has an inbuilt wrapper around $(document) which actually takes care of firing the window load event before any further code mentioned inside it can be executed.
Is my understanding correct?

Related

Will $(document ).ready() fire if the code which checks is inserted after the event happend?

I have a page where some additional Javascript code is downloaded to the page after the page itself has been loaded, (for example when the user clicks a button, a call is made to the server which pulls down an extra .js file).
If that additional code has a check for DOM ready like so..
$( document ).ready(function() {
console.log( "will they see me?" );
});
Will that line be printed to the console since by the time this code runs on the page, the jQuery DOM ready event has already fired?
In other words, does this check need to be present when the actual event happens or would it also fire after the event happened?
Yes. You've got a method to test that in your question already:
$(document).ready(function() {
console.log("will they see me?");
});
Run that in the console, and watch the message get printed out.

Run a script after knockout has finished

I have a front-end script that alerts when a link is clicked. The problem is, the link that my script looks for is loaded on the page via a knockout template, and I can't get my script to run after that happens.
I am not able to execute this within knockout, unfortunately, it must be done within my front-end CMS. Not ideal, I know.
Is there any way to work around knockout and ensure my script runs AFTER the knockout template has finished loading? I got it to work with a timeout, but that's not ideal. I've also tried docready, onload, etc, and no dice.
My script is very simple, I'm wondering if there is something specific to knockout that I can wrap it in...
$('.myLink').on('click', function(event) {
var foo = $(this).text();
alert(foo);
});
You could attach the event handler to an ancestor that does exist on the page on page load and create a delegated event handler:
$(document.body).on('click', '.myLink', function (event) {
/* ... */
});

How to override an event in JavaScript whatever the library previously used to bind it?

I'm trying the greasemonkey extension for Firefox in order to override some JavaScript events on the websites I visit.
For instance, I want to display a message when the blur event has been bound to the window element, whatever the page I visit.
I thought it was pretty easy. But it is much harder to make this working on every case, because depending on the library the website uses, the JavaScript events seems to be stored in different places.
Here is a test I have made in a greasemonkey user script :
window.onload = function(event) {
// Handle pure JS
if (window.onblur) {
console.log('There is a blur event on the window element of this page');
}
// Handle jQuery
if (window.jQuery) {
var jExpando = window[window.jQuery.expando];
if (jExpando.events.blur) {
console.log('There is a blur jQuery event on the window element of this page');
}
}
}
This works on every page that uses pure JavaScript or jQuery, but I'm not able to catch blur events listeners of other libraries such as Mootools, Prototype...
Thus, this is pretty bad code, considering I have to handle all the existing JavaScript libraries myself and I have no idea how to do that.
Is there a way to get all event listeners bind on a specific JavaScript object (whatever the library used to attached them) so I can override some of them?
Most libraries use addEventListener, so you'll want to override that with a function of your own. Be sure to keep a reference to the original addEventListener method so the events can still be added.
I have an example Greasemonkey script here: http://userscripts.org/scripts/show/174829
It will listen to all events and tell you which ones were added. Obviously, you can modify this to make 'blur' events not register.

Load 3rd Party JavaScript when user clicks an element

I know I can inject the script when the user clicks an element by creating a script element and injecting it on the page via document.appendChild. However, the script is listening for onload and onDOMContentReady (or their own home grown domReady event, not sure).
If I inject the script only when the user clicks an element, the callbacks for onload/onDOMContentReady will never fire because those events have already passed.
Any ideas? This 3rd party script pulls in all these other requests and it's not optimal for page loading.
EDIT: I read the question again...and if you are using something like jQuery, it will fire your handler function in any other document ready calls even if document ready has already been fired. It will just execute the function right away. If you are looking for a pure javascript way to do it, you need to take extra consideration to check to see if dom ready has already been fired, and fire your function yourself, otherwise attach it to the dom ready callback.
I don't see a problem with just doing something like this (with jquery for brevity):
// on document ready
$( function() {
// attach the click handler
$('#loadScript').click( function( e ) {
// on click, get the script
$.getScript('path/to/your/script.js', function() {
// your script is loaded, so what you need from here
// to handle this click event.
});
});
});
I think you are over thinking it a bit. You only need to worry about making it possible to load the script once the dom elements are ready. You could look at using something like require.js as well.

Does ready event fire when page-turn

I am making a book, and use jQuery to change pages etc.
At the top I have an $(document).ready(function() that does different stuff when the page is loaded.
On the GUI page I got a "change page" button, and when this is pushed, the function turnPage() is called. This method contain some code pluss this:
$.mobile.changePage("#device"+window.device, {
transition: "slide",
reverse: false,
changeHash: true
});
My question is, when turnPage() is called, is also $(document).ready(function() called?
(Yes, I am new to this)
DOM ready event is an event that fires when the DOM is fully loaded except of images (<img>).
The event fires once for each page load. So:
If the turn page() function makes a redirect, the answer is Yes.
If the turn page() function only gets data with ajax request, the answer is No.
Important Update:
I found this in the official plugin website :
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the $(document).ready() function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event.
...
...
So turn page does an ajax request, so the final answer is No.
What is the ready event:
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external.

Categories