Alibaba.com UED

一个简单的例子：

YUI().use('node-event-simulate', function(Y) { 

     Y.one("body").simulate("click");}

);

这样就模拟点击了body的click事件。

当然你还可以附加其它按键，例如模拟shift键同时按下点击效果。

Y.one("body").simulate("click", { shiftKey: true });

同理alt键也是如此

node.simulate("click", { altKey: true} );

更方便的是你可以指定源

node.simulate("mouseout", { relatedTarget: document.body });

还有坐标

node.simulate("mousedown", { clientX: 100, clientY: 100 });

对于ui层面的改变它也同样敏感

YUI().use('node-event-simulate', function(Y) {
  var node = Y.one("#myInput");
  // 模拟节点选择改变
  node.simulate("change");
  // 模拟节点被选中
  node.simulate("select");
}
);

<button id=”btn”>Click!</button>
<script type=”text/javascript”>
// <![CDATA[
document.getElementById('btn').onclick = function (e) {
if (typeof e == 'undefined') e = window.event;
setTimeout(function () {
var target = (typeof e.target == 'undefined' ? e.srcElement : e.target);
alert(target);
}, 1000);
}
// ]]>
</script>

<button id=”btn”>Click!</button>
<script type=”text/javascript”>
// <![CDATA[
document.getElementById('btn').onclick = function () {
setTimeout(function () {
alert(window.event.srcElement);
}, 1000);
}
// ]]>
</script>

不辜负期望，以上代码同样产生了JS错误。然后我把alert(window.event.srcElement);改成了alert(window.event)，这次终于没有错误了，而弹出的消息框里的内容是null。然后我又去翻了翻MSDN Library，看到了下边这段描述：

The event object is available only during an event—that is, you can use it in event handlers but not in other code.

也就是说，与其它浏览器在事件触发之后为每个事件创建一个单独的Event对象相对，IE的所有事件公用一个Event对象，也就是window.event。因此为了避免冲突，针对某个事件的window.event对象只在该事件的事件处理函数的执行过程中有效，一旦事件处理函数执行完了，window.event就被IE设置为null了。

到此为止，似乎问题的原因已经很明了了。但是细心的同学也许会反驳，IE其实也是为每个被触发的事件创建一个单独的Event对象，只不过每次都通过window.event来引用新生成的对象。因此我写了下边这段代码来验证这种观点。

<button id=”btn”>Click!</button>
<script type=”text/javascript”>
// <![CDATA[
var lastEventObj = null;
document.getElementById('btn').onclick = function () {
if (lastEventObj == null)
lastEventObj = window.event.srcElement;
else
alert(lastEventObj === window.event.srcElement);
}
// ]]>
</script>

按钮在第一次被点击时，该事件的Event对象被lastEventObj变量所引用。因此就算在按钮第二次被点击时window.event被设置为新的Event对象的引用，仍然可以使用lastEventObj变量来访问到第一次点击事件时的Event对象。如果IE在每次事件被触发时都创建一个新的Event对象，那么lastEventObj === window.event.srcElement应该返回false。如果IE为所有事件公用一个Event对象，只是在每次事件触发时重新设置该对象的属性的话，lastEventObj === window.event.srcElement应该返回true。经过测试，返回值是false。

问题开始变得有些诡异了。既然每次事件被触发时的Event对象都是不同的，在本文的第二段代码里边，的确是在变量e中保存了对Event对象的引用的。即使事件处理函数执行完毕后window.event被设置为null，在1秒后自动执行的匿名函数中仍然应该可以使用变量e来访问先前的Event对象，但是为什么会产生JS错误呢？问题的原因在这时再此变得扑朔迷离了。我做了一些试验后得到了一些惊人的结论，以下我直接列举出一些事实。

1、window.event对象不是真正的JavaScript 对象。

按照ECMAScript规范，JavaScript中只应该存在有两种数据类型——值类型和对象。而一切对象都应该衍生于Object对象，因此Object.prototype中定义的方法，例如toString，应该在一切对象上都可以调用。那么我们来看看下边的代码：

<button id=”btn”>Click!</button>
<script type=”text/javascript”>
// <![CDATA[
document.getElementById('btn').onclick = function () {
alert(typeof window.event.toString);
}
// ]]>
</script>

点击按钮后，弹出的消息框里竟然显示的是undefined。由此可见，任何标准的JavaScript对象应该包含的成员却在window.event对象上消失了。既然window.event已经不是一个标准的JavaScript对象了，所以如果有什么理所当然的事情在window.event上变得不对劲了也不要感到特别惊奇。

2、实际上，IE还是为所有事件公用一个Event对象。

我们直接使用下边的代码来说明问题。

<button id=”btn1″>Click1!</button>
<button id=”btn2″>Click2!</button>
<script type=”text/javascript”>
// <![CDATA[
var btn1EventObj = null;
document.getElementById('btn1').onclick = function () {
btn1EventObj = window.event;
alert(btn1EventObj.srcElement.id);
}
document.getElementById('btn2').onclick = function () {
alert(btn1EventObj === window.event);
alert(btn1EventObj.srcElement === window.event.srcElement);
alert(btn1EventObj.srcElement.id);
}
// ]]>
</script>

这次我们有了两个按钮，每个按钮都绑定了一个事件处理函数。我们先点击btn1按钮，该点击事件的Event对象的引用在btn1事件处理函数中被保存在了全局变量btn1EventObj中。然后我们试着用btn1EventObj变量来访问btn1的id属性，很好，弹出的消息框中的确显示的btn1。

接下来我们点击btn2按钮，在btn2的事件处理函数中我们做了一些测试。测试btn1EventObj === window.event时，不出所料，返回了false。看来window.event已经变成了另外一个Event对象的引用。然后我们再测试btn1EventObj.srcElement === window.event.srcElement，居然返回了true。等号左边的本来应该是按钮btn1，而右边应该是按钮btn2，现在它们居然相等了。然后我们再看看btn1EventObj.srcElement.id，结果它的值变成了btn2了。事情变得明了了，对象btn1EventObj与对象window.event之间的关系可以用下边的图来表示。

IE确实为每个事件创建了一个单独的Event对象，而window.event在事件处理函数的执行过程中也总是指向最新创建的Event对象。问题是每个Event对象的属性却共享的同一个属性值。在这个例子中，当按钮btn2被点击后，共享的属性值srcElement被更新为了按钮btn2。因此通过btn1EventObj.srcElement访问到的属性值也就被改变了。

3、被共享的Event对象属性值也只在事件处理函数的执行过程中才有效

在事件处理函数执行完毕后，并不仅仅是window.event被设置为null这么简单。可以看看如下代码：

<button id=”btn”>Click!</button>
<script type=”text/javascript”>
// <![CDATA[
var eventObj = null;
document.getElementById('btn').onclick = function () {
eventObj = window.event;
setTimeout(function () {
alert(typeof eventObj.srcElement);
}, 1000);
}
// ]]>
</script>

<button id=”btn”>Click!</button>
<script type=”text/javascript”>
// <![CDATA[
var target = null;
document.getElementById('btn').onclick = function () {
target = window.event.srcElement;
setTimeout(function () {
alert(target.id);
}, 1000);
}
// ]]>
</script>