列出在 PhantomJS 中加载的页面的所有 DOM 事件答案

【问题标题】：List all DOM events of a page loaded in PhantomJS列出在 PhantomJS 中加载的页面的所有 DOM 事件
【发布时间】：2016-03-10 12:30:03
【问题描述】：

我想记录所有在 JS 和 html 中绑定的事件。我目前的解决方案，它没有记录任何东西，我做错了什么，或者有没有更好的方法来捕获事件并保存其回调？

'use strict';
var page = require('webpage').create();

page.onConsoleMessage = function(msg) {
    console.log('CONSOLE: ' + msg);
};

page.open('url', function (status) {
    var _count = function() {
        return page.evaluate(function() {
            var htmlAddEventListener = HTMLElement.prototype.addEventListener;
            HTMLElement.prototype.addEventListener = function(name, cb) {
                console.log('1', name);
                this.boundEvents || (this.boundEvents = {});
                (this.boundEvents[name] || (this.boundEvents[name] = [])).push(cb);
                return htmlAddEventListener.apply(this, arguments);
            }
            var elementAddEventListener = Element.prototype.addEventListener;
            Element.prototype.addEventListener = function(name, cb) {
                console.log('1', name);
                this.boundEvents || (this.boundEvents = {});
                (this.boundEvents[name] || (this.boundEvents[name] = [])).push(cb);
                return elementAddEventListener.apply(this, arguments);
            }
            var documentAddEventListener = Document.prototype.addEventListener;
            Document.prototype.addEventListener = function(name, cb) {
                console.log('2', name);
                this.boundEvents || (this.boundEvents = {});
                (this.boundEvents[name] || (this.boundEvents[name] = [])).push(cb);
                return documentAddEventListener.apply(this, arguments);
            }
            var windowAddEventListener = window.addEventListener;
            window.addEventListener = function(name, cb) {
                console.log('3', name);
                this.boundEvents || (this.boundEvents = {});
                (this.boundEvents[name] || (this.boundEvents[name] = [])).push(cb);
                return windowAddEventListener.apply(this, arguments);
            }

            var elementDispatchEvent = Element.prototype.dispatchEvent;
            Element.prototype.dispatchEvent = function(name, cb) {
                console.log('1a', name);
                return elementDispatchEvent.apply(this, arguments);
            }
        });
    }
    _count();

});

【问题讨论】：

它看起来像是订单。当我在评估结束时触发一个事件时，我会记录它。

标签： javascript testing phantomjs

【解决方案1】：

在页面加载后，您正在更改内置对象原型中的各种addEventListener 函数。 page.open 回调在所有即时页面 JavaScript 运行后大部分时间都会被调用。如果您正在加载的页面没有使用动态请求，则不会显示任何内容。

您应该在页面 JavaScript 执行之前从运行的事件处理程序中调用_count。例如page.onInitialized、page.onLoadStarted、page.onNavigationRequested 和page.onUrlChanged。确保您不会多次调用它。

【讨论】：