我有一个web应用程序,我想在自动化测试期间通过注册一个全局javascript侦听器来调试,该侦听器每次点击给定的dom节点就会发出一个日志事件或类似的事件。我不在乎解决方案是纯javascript还是使用其中一个框架。这是一种轻量级的方法吗?
不知道你想记录什么,或者在哪里,但也许这就是你需要的:
window.addEventListener('click',function(e)
{
console.log(e);
//or
var xhr = new XMLHttpRequest();
xhr.open('post', 'url/to/logscript', true);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencode');//or application/json
var data = {node: (e.target || e.srcElement).tagName,
other: (e.target || e.srcElement).baseURI};
xhr.onreadystatechange = callback;//<-- define your own, or leave as is
xhr.send(data);//serialize or JSON.stringify
},false);
在日志脚本中,您可以存储所需的事件数据。
在jQuery中,您可以这样做:
$(window).on('click', function(e)
{
e = e instanceof jQuery ? e[0] : e;//get the real event, I believe jQ wraps the event object...
$.ajax({method: 'post',
data: e,
url: 'path/to/logscript',
success: function(response)
{
//this is the callback function from the vanilla JS snippet
}
});
}
我最终使用了一个稍微修改过的jquery函数版本,该函数对输出进行json化并进行审查(使用来自另一个示例的代码),因为它包含循环引用(由于DOM结构)。
$(窗口)。On ('click'), function(e) {e = e instanceof jQuery ?e[0]: e;//得到真正的事件,我相信jQ包装了事件对象…
$.ajax({method: 'post',
data: JSON.stringify(e, censor(e)),
url: 'debug',
success: function(response) {
//this is the callback function from the vanilla JS snippet
}
});
});
function censor(censor) {
return (function() {
var i = 0;
return function(key, value) {
if(i !== 0 && typeof(censor) === 'object' && typeof(value) == 'object' && censor == value)
return '[Circular]';
if(i >= 29)
return '[Unknown]';
++i;
return value;
}
})(censor);
}
后端rails控制器看起来像这样:
class DebugController < ApplicationController
def index
puts params['data']
end
end
当特定节点被单击时,它将记录到控制台,使用事件委托(事件冒泡),因此只有一个(或全局)事件侦听器。
var node = document.getElementsByTagName("p")[0];
window.addEventListener("click", function (evt) {
if (evt.target === node) {
console.log("clicked");
};
}, false);
在jsfiddle 在jsfiddle中点击你的问题,查看console.log