<?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>dev.enekoalonso.com &#187; events</title>
	<atom:link href="http://dev.enekoalonso.com/tag/events/feed/" rel="self" type="application/rss+xml" />
	<link>http://dev.enekoalonso.com</link>
	<description>having fun with code</description>
	<lastBuildDate>Wed, 12 Oct 2011 21:40:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Handling events on iPhone webapps</title>
		<link>http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/</link>
		<comments>http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/#comments</comments>
		<pubDate>Fri, 05 Dec 2008 22:02:29 +0000</pubDate>
		<dc:creator>Eneko Alonso</dc:creator>
				<category><![CDATA[uncategorized]]></category>
		<category><![CDATA[apple]]></category>
		<category><![CDATA[events]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[webapp]]></category>

		<guid isPermaLink="false">http://dev.enekoalonso.com/?p=82</guid>
		<description><![CDATA[This week I have been working on a website for iPhone phones and I have discovered some interesting things about events. I am using plain Javascript, with no third party libraries, so I don&#8217;t know if they have any fix for these issues or if they affect them. For example, a couple of days ago [...]]]></description>
			<content:encoded><![CDATA[<p>This week I have been working on a website for iPhone phones and I have discovered some interesting things about events. I am using plain Javascript, with no third party libraries, so I don&#8217;t know if they have any fix for these issues or if they affect them.</p>
<p>For example, a couple of days ago I was posting <a href="http://dev.enekoalonso.com/2008/12/02/detecting-iphones-orientation/">how to detect the iPhone&#8217;s orientation</a>. The problem with the method I used is that I am assigning explicitly the function to handle the event, which means only that function will handle the event. If I wanted to add a second function to handle the same event, for example inside an object, I would have to use the window.addEventListener method. But apparently <strong>addEventListener does not work on the iPhone for some events</strong>.</p>
<p>The following code wont work on the iPhone (although it works on the iPhone simulator)</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="kw2">function</span> updateLayout<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">if</span> <span class="br0">&#40;</span>window.<span class="me1">orientation</span><span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; document.<span class="me1">body</span>.<span class="me1">setAttribute</span><span class="br0">&#40;</span><span class="st0">&#39;class&#39;</span>, <span class="st0">&#39;landscape&#39;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; <span class="kw1">else</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; document.<span class="me1">body</span>.<span class="me1">setAttribute</span><span class="br0">&#40;</span><span class="st0">&#39;class&#39;</span>, <span class="st0">&#39;portrait&#39;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">window.<span class="me1">addEventListener</span><span class="br0">&#40;</span><span class="st0">&#39;orientationchange&#39;</span>, <span class="kw2">function</span><span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; updateLayout<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span>, <span class="kw2">false</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1">window.<span class="me1">addEventListener</span><span class="br0">&#40;</span><span class="st0">&#39;load&#39;</span>, <span class="kw2">function</span><span class="br0">&#40;</span>event<span class="br0">&#41;</span> <span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; updateLayout<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span>, <span class="kw2">false</span><span class="br0">&#41;</span>;</div>
</li>
</ol>
</div>
<p>I have found the addEventListener function works with input fields (focus and blur events), with links (click event) and with window (load event). I have found it doesn&#8217;t work on forms (submit event) neither with the custom onorientationchange event as shown avobe. I haven&#8217;t tested other events yet.</p>
<p>It may be that all these issues have been fixed in newer versions of the iPhone OS X &#8211; the one I have for testing is 1.1.4 (4A102).</p>
<h3  class="related_post_title">Related Posts:</h3><ul class="related_post"><li>May 12, 2011 -- <a href="http://dev.enekoalonso.com/2011/05/12/angry-birds-as-a-web-app/" title="Angry Birds as a Web App">Angry Birds as a Web App</a> (0)</li><li>June 14, 2011 -- <a href="http://dev.enekoalonso.com/2011/06/14/titanium-studio-and-titanium-mobile-1-7/" title="Titanium Studio and Titanium Mobile 1.7">Titanium Studio and Titanium Mobile 1.7</a> (0)</li><li>May 6, 2011 -- <a href="http://dev.enekoalonso.com/2011/05/06/finding-duplicate-ids-on-an-html-page/" title="Finding duplicate ID&#8217;s on an HTML page">Finding duplicate ID&#8217;s on an HTML page</a> (0)</li><li>September 17, 2010 -- <a href="http://dev.enekoalonso.com/2010/09/17/mootools-core-for-server-and-mobile-development/" title="MooTools Core for Server and Mobile Development">MooTools Core for Server and Mobile Development</a> (1)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

