1 // The purpose of this is to show how and when events fire, considering 5 steps
2 // happening as follows:
5 // 2. Load same URL, but adding an internal FRAGMENT to it
6 // 3. Click on an internal Link, that points to another internal FRAGMENT
7 // 4. Click on an external Link, that will send the page somewhere else
10 // Take particular care when going through the output, to understand when
11 // things happen (and in which order). Particularly, notice what DOESN'T
12 // happen during step 3.
14 // If invoked with "-v" it will print out the Page Resources as they are
15 // Requested and Received.
17 // NOTE.1: The "onConsoleMessage/onAlert/onPrompt/onConfirm" events are
18 // registered but not used here. This is left for you to have fun with.
19 // NOTE.2: This script is not here to teach you ANY JavaScript. It's aweful!
20 // NOTE.3: Main audience for this are people new to PhantomJS.
23 var sys = require("system"),
24 page = require("webpage").create(),
26 step1url = "http://en.wikipedia.org/wiki/DOM_events",
27 step2url = "http://en.wikipedia.org/wiki/DOM_events#Event_flow";
29 if (sys.args.length > 1 && sys.args[1] === "-v") {
33 function printArgs() {
35 for (i = 0, ilen = arguments.length; i < ilen; ++i) {
36 console.log(" arguments[" + i + "] = " + JSON.stringify(arguments[i]));
41 ////////////////////////////////////////////////////////////////////////////////
43 page.onInitialized = function() {
44 console.log("page.onInitialized");
45 printArgs.apply(this, arguments);
47 page.onLoadStarted = function() {
48 console.log("page.onLoadStarted");
49 printArgs.apply(this, arguments);
51 page.onLoadFinished = function() {
52 console.log("page.onLoadFinished");
53 printArgs.apply(this, arguments);
55 page.onUrlChanged = function() {
56 console.log("page.onUrlChanged");
57 printArgs.apply(this, arguments);
59 page.onNavigationRequested = function() {
60 console.log("page.onNavigationRequested");
61 printArgs.apply(this, arguments);
63 page.onRepaintRequested = function() {
64 console.log("page.onRepaintRequested");
65 printArgs.apply(this, arguments);
68 if (logResources === true) {
69 page.onResourceRequested = function() {
70 console.log("page.onResourceRequested");
71 printArgs.apply(this, arguments);
73 page.onResourceReceived = function() {
74 console.log("page.onResourceReceived");
75 printArgs.apply(this, arguments);
79 page.onClosing = function() {
80 console.log("page.onClosing");
81 printArgs.apply(this, arguments);
84 // window.console.log(msg);
85 page.onConsoleMessage = function() {
86 console.log("page.onConsoleMessage");
87 printArgs.apply(this, arguments);
91 page.onAlert = function() {
92 console.log("page.onAlert");
93 printArgs.apply(this, arguments);
95 // var confirmed = window.confirm(msg);
96 page.onConfirm = function() {
97 console.log("page.onConfirm");
98 printArgs.apply(this, arguments);
100 // var user_value = window.prompt(msg, default_value);
101 page.onPrompt = function() {
102 console.log("page.onPrompt");
103 printArgs.apply(this, arguments);
106 ////////////////////////////////////////////////////////////////////////////////
108 setTimeout(function() {
110 console.log("### STEP 1: Load '" + step1url + "'");
114 setTimeout(function() {
116 console.log("### STEP 2: Load '" + step2url + "' (load same URL plus FRAGMENT)");
120 setTimeout(function() {
122 console.log("### STEP 3: Click on page internal link (aka FRAGMENT)");
123 page.evaluate(function() {
124 var ev = document.createEvent("MouseEvents");
125 ev.initEvent("click", true, true);
126 document.querySelector("a[href='#Event_object']").dispatchEvent(ev);
130 setTimeout(function() {
132 console.log("### STEP 4: Click on page external link");
133 page.evaluate(function() {
134 var ev = document.createEvent("MouseEvents");
135 ev.initEvent("click", true, true);
136 document.querySelector("a[title='JavaScript']").dispatchEvent(ev);
140 setTimeout(function() {
142 console.log("### STEP 5: Close page and shutdown (with a delay)");
144 setTimeout(function(){