<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>西红柿爱番茄 &#187; 模拟事件</title>
	<atom:link href="http://www.ilovejs.net/archives/tag/%e6%a8%a1%e6%8b%9f%e4%ba%8b%e4%bb%b6/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ilovejs.net</link>
	<description>到了创造为主的阶段，不忘继续学习</description>
	<lastBuildDate>Thu, 15 Dec 2011 06:18:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>解析模拟事件</title>
		<link>http://www.ilovejs.net/archives/176</link>
		<comments>http://www.ilovejs.net/archives/176#comments</comments>
		<pubDate>Wed, 06 Jan 2010 09:04:40 +0000</pubDate>
		<dc:creator>Supersha</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[event]]></category>
		<category><![CDATA[模拟事件]]></category>

		<guid isPermaLink="false">http://www.ilovejs.net/?p=176</guid>
		<description><![CDATA[昨晚在《Javascript权威指南》书本中看到了“合成事件”这样的一个名词，开始怎么都不明白，看了它提供的例子，也都是糊里糊涂，不知道这样使用有什么作用，直到今天，上网几番查找，都没有讨论它的用处，都是简单介绍了createEvent，createEventObject等等方法的语法，都没有现成Demo来说明它的用途。时间从上午到了下午，最后还是回到了书本中，又重新看了一下《Javascript权威指南》中提供的例子，照着书本写例子来测试，第一次发现可以动态声明事件，类似于addEventListener和attachEvent的用途，发现的端倪，继续深入。之后继续上网查资料，发现了“模拟事件”，这个名词，哟和！！突然有些豁然开朗，对，“模拟事件”，因此就尝试在HTML元素行内声明事件，之后用createEvent和createEventObject生成新事件，在window.onload回调函数下测试，模拟成功！终于明白了它的这一点用途了，也开始想到了jQuery中的trigger函数的原理了！ 下面来看看我写的一个封装的imitateEvent对象： [javascript] /* elem：是DOM元素引用，将要添加模拟事件的DOM元素 eventType：需要模拟的事件的类型 handler：事件回调函数，这个函数可有可无。 */ var imitateEvent = {}; imitateEvent.imitate = function(elem, eventType, handler){ elem = typeof &#8230; <a href="http://www.ilovejs.net/archives/176" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>
昨晚在《<a href="http://product.dangdang.com/product.aspx?product_id=20019046">Javascript权威指南</a>》书本中看到了“合成事件”这样的一个名词，开始怎么都不明白，看了它提供的例子，也都是糊里糊涂，不知道这样使用有什么作用，直到今天，上网几番查找，都没有讨论它的用处，都是简单介绍了createEvent，createEventObject等等方法的语法，都没有现成Demo来说明它的用途。时间从上午到了下午，最后还是回到了书本中，又重新看了一下《<a href="http://product.dangdang.com/product.aspx?product_id=20019046">Javascript权威指南</a>》中提供的例子，照着书本写例子来测试，第一次发现可以动态声明事件，类似于addEventListener和attachEvent的用途，发现的端倪，继续深入。之后继续上网查资料，发现了“模拟事件”，这个名词，哟和！！突然有些豁然开朗，对，“模拟事件”，因此就尝试在HTML元素行内声明事件，之后用createEvent和createEventObject生成新事件，在window.onload回调函数下测试，模拟成功！终于明白了它的这一点用途了，也开始想到了<a href="http://www.jquery.com/">jQuery</a>中的<a href="http://docs.jquery.com/Events/trigger#eventdata">trigger</a>函数的原理了！
</p>
<p>下面来看看我写的一个封装的imitateEvent对象：<br />
[javascript]<br />
/*<br />
elem：是DOM元素引用，将要添加模拟事件的DOM元素<br />
eventType：需要模拟的事件的类型<br />
handler：事件回调函数，这个函数可有可无。<br />
*/<br />
var imitateEvent = {};<br />
imitateEvent.imitate = function(elem, eventType, handler){<br />
    elem = typeof elem !== &quot;object&quot; ? document.getElementById(elem) : elem;<br />
    //处理W3C下createEvent的第一个参数的设置，它有三种类型：Events，MouseEvents以及UIEvents<br />
    //不过UIEvents非常少用，在此就不提供模拟这些事件<br />
    //在这里声明Events和MouseEvents对象的目的是确定适用Events类型还是MouseEvents类型<br />
    var Events = {<br />
        &quot;click&quot;: &quot;click&quot;,<br />
        &quot;blur&quot;: &quot;blure&quot;,<br />
        &quot;change&quot;: &quot;change&quot;,<br />
        &quot;dblclick&quot;: &quot;dblclick&quot;,<br />
        &quot;error&quot;: &quot;error&quot;,<br />
        &quot;focus&quot;: &quot;focus&quot;,<br />
        &quot;keypress&quot;: &quot;keypress&quot;,<br />
        &quot;keydown&quot;: &quot;keydown&quot;,<br />
        &quot;keyup&quot;: &quot;keyup&quot;,<br />
        &quot;load&quot;: &quot;load&quot;,<br />
        &quot;resize&quot;: &quot;resize&quot;,<br />
        &quot;scroll&quot;: &quot;scroll&quot;,<br />
        &quot;select&quot;: &quot;select&quot;,<br />
        &quot;submit&quot;: &quot;submit&quot;,<br />
        &quot;unload&quot;: &quot;unload&quot;<br />
    };<br />
    var MouseEvents = {<br />
        &quot;mousedown&quot;: &quot;mousedown&quot;,<br />
        &quot;mousemove&quot;: &quot;mousemove&quot;,<br />
        &quot;mouseout&quot;: &quot;mouseout&quot;,<br />
        &quot;mouseover&quot;: &quot;mouseover&quot;,<br />
        &quot;mouseup&quot;: &quot;mouseup&quot;<br />
    };<br />
    var evt = null;<br />
    if (document.createEvent) { // W3C DOM<br />
        //通过createEvent创建一个新事件，默认是Events<br />
        evt = document.createEvent(Events[eventType] ? &quot;Events&quot; : MouseEvents[eventType] ? &quot;MouseEvents&quot; : &quot;Events&quot;);<br />
        //初始化事件<br />
        evt.initEvent(eventType, true, false);<br />
        //分派事件<br />
        elem.dispatchEvent(evt);<br />
		//如果没有提供handler函数，则默认用一个空函数代替，下面IE中也是这样设置<br />
        elem.addEventListener(eventType, handler ? handler : function(){}, false);<br />
    } else if (document.createEventObject) { // IE<br />
        //通过createEventObject创建一个新事件<br />
        evt = document.createEventObject();<br />
        //分派事件<br />
        elem.fireEvent(&quot;on&quot; + eventType, evt);<br />
      elem.attachEvent(&quot;on&quot; + eventType, handler ? function(){ handler.call(elem);} : function(){});<br />
    }<br />
}<br />
[/javascript]</p>
<p>
如果在DOM元素已经通过其他方式添加了事件的时候，在模拟事件对象中又提供了handler回调函数，则事件则会叠加，可能这就是所谓的“合成事件”吧。
</p>
<p>下面是提供的Demo：<br />
[html]<br />
&lt;div id=&quot;div&quot; onclick=&quot;test();&quot;&gt;<br />
       Click me please.<br />
&lt;/div&gt;<br />
&lt;script type=&quot;text/javascript&quot;&gt;<br />
    //添加事件模拟，这样在window.onload的时候就调用了div标签的onclick事件<br />
     //在这里提供了handler回调函数，如果没有提供的话，就只会执行其他方式声明的事件。<br />
    imitateEvent.imitate(document.getElementById(&quot;div&quot;), &quot;click&quot;, function(){<br />
       alert(this.nodeName);<br />
    });<br />
    function test(){<br />
       alert(&quot;You have mouseovered me already.&quot;);<br />
    }<br />
&lt;/script&gt;<br />
[/html]<br />
上面我对于模拟事件的一点点见解，如果有错误之处，还请高手指点一二，指正错误，不胜感激！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ilovejs.net/archives/176/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

