如何创建一个完美的伪造jQuery事件对象

Question

我正在为一个网站自动化测试，并且有些事件无法正确地在javascript中触发，特别是在IE浏览器中。 (我正在使用selenium，但每个其他选项都不起作用，因此javascript是我的最后希望)。

该事件函数似乎使用了jquery事件对象中的许多字段，我尝试遵循官方jquery文档，但它只显示了大多数字段名称，没有显示如何填充它们 (因为通常不是用这种方式来使用，但在我的情况下是这样)。

我的问题是：

为了伪造一个鼠标事件，我应该如何填写Event对象的字段，并使用jQuery.Event("事件类型",{param1:value1,param2:value2,...})（如果有更有效的方法，请使用另一种方法）。

该事件对象将与element.trigger('事件名称',EventObject)一起使用。

- R.L

---

你填充的值取决于事件类型以及如果事件自然触发会有哪些值。没有标准值集合。 - ADyson

@ADyson，我的错，我正在尝试模拟鼠标事件，对于造成的混淆感到抱歉。 - R.L

只需注意鼠标事件，即使您创建了完美的jQuery事件，鼠标事件也不会触发：1）在输入元素上（由于浏览器安全限制），2）如果单击处理程序检查事件是否受信任（来自真实鼠标）。 - Tom

Answer 1

您是否阅读了这篇jQuery文档“触发事件处理程序”？

摘录：

如果不用.trigger()，我该如何模仿本地浏览器事件呢？

为了触发本地浏览器事件，您必须在<IE9中使用document.createEventObject，对于所有其他浏览器则需要使用document.createEvent。使用这两个API，您可以编程地创建一个与实际单击文件输入框完全相同的事件。默认操作将会发生，浏览文件对话框将会显示。

jQuery UI团队创建了jquery.simulate.js，以简化触发本地浏览器事件供其自动化测试使用。它的使用方式是基于jQuery的trigger。

基本上，整个内容可以概括如下：

function Settings() {
  this.bubbles = true;
  this.cancelable = true;
  this.view = window;
  this.screenX = 0;
  this.screenY = 0;
  this.clientX = 1;
  this.clientY = 1;
  this.ctrlKey = false;
  this.altKey = false;
  this.shiftKey = false;
  this.metaKey = false;
  this.button = 0; /* Which mouse button was pressed */
  this.relatedTarget = null;
  return this;
}

function simulateMouseEvent(type, target, s) {
  var e = document.createEvent("MouseEvents");
  e.initMouseEvent(type, s.bubbles, s.cancelable, s.view, 0, s.screenX, s.screenY, s.clientX, s.clientY, s.ctrlKey, s.altKey, s.shiftKey, s.metaKey, s.button, s.relatedTarget);
  target.dispatchEvent(e);
}

var settings = new Settings, target = document.getElementById('myButton');

/* Try with something like this: */
simulateMouseEvent('mousedown', target, settings);
simulateMouseEvent('mouseup', target, settings);
simulateMouseEvent('click', target, settings);

来源：https://github.com/jquery/jquery-simulate/blob/master/jquery.simulate.js

此处有完整的参数列表：MouseEvent.initMouseEvent()

- deblocker

Answer 2

在 JQuery 中创建一个事件对象。

var event = jQuery.Event("damn");
event.param1 = "value1";
event.param2 = "value2";

//触发事件

 $( ".some_element" ).trigger( event );

//接收事件

$('.some_element').on("damn", function(e){
    console.log(e.param1,e.param2);
});

- Wilson

---

我有点困惑，我的问题和我说的有什么不同呢？（还有它如何回答我的问题？ :/) - R.L

我们可以手动更新事件对象的所有字段。 您可以尝试使用 event.clientX、event.clientY、event.offsetX 和 event.offsetY。 如果我没有回答您的问题，对不起。 - Wilson

我的意思是这个问题的目的是了解在那些字段中应该填写什么，如果有误解请见谅 :/ - R.L

@Wilson，请不要发布多个答案。您可以在一个答案中包含有关问题/解决方案的所有方法和所有方面。 - Christos Lytras

Answer 3

你可以使用trigger()函数来实现这个功能。 像这样触发事件。

  $('.some_element').trigger("damn", {param1:"value1",param2:"value2"});

而且你可以从任何地方收听

$('.some_element').on("damn", function(e,obj){
console.log(obj.param1,obj.param2);
});

希望这个能够正常工作！！

- Wilson

---

抱歉造成误解，我不是在尝试触发事件，而是在尝试创建事件对象，以便事件拥有与真实事件相同的一切功能。我会进行编辑以避免混淆。 - R.L

我也添加了一个答案，请查看。 - Wilson