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’t know if they have any fix for these issues or if they affect them.
For example, a couple of days ago I was posting how to detect the iPhone’s orientation. 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 addEventListener does not work on the iPhone for some events.
The following code wont work on the iPhone (although it works on the iPhone simulator)
-
function updateLayout() {
-
if (window.orientation)
-
document.body.setAttribute('class', 'landscape');
-
else
-
document.body.setAttribute('class', 'portrait');
-
}
-
-
window.addEventListener('orientationchange', function(event) {
-
updateLayout();
-
}, false);
-
-
window.addEventListener('load', function(event) {
-
updateLayout();
-
}, false);
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’t work on forms (submit event) neither with the custom onorientationchange event as shown avobe. I haven’t tested other events yet.
It may be that all these issues have been fixed in newer versions of the iPhone OS X – the one I have for testing is 1.1.4 (4A102).