keydown EventListener in IE7 - javascript

I've written this code inside the HEAD tags of my HTML page. It works fine in Firefox, Chrome and Safari, but doesn't in IE7. I would like to know how to fix it.
<script type="text/javascript">
if ( window.addEventListener ) {
window.addEventListener("keydown", function(e) {
alert(e.keyCode);
}, true);
}
</script>

Microsoft has implemented their own way of doing this called attachEvent. You can read more about this over at quirksmode.org: http://www.quirksmode.org/js/events_advanced.html

You're screwed: you're using event capturing (passing true as the last parameter to addEventListener). IE has no such equivalent, in any version, including IE8 in IE8 mode.
Is there a reason you must use event capturing rather that event bubbling here? IOW, pass false as your last parameter? Then, you'd be able to port this (somewhat) to use IE's attachEvent proprietary method, or use a library (as others have suggested and added links for).

There is no window.addEventListener in IE, you need to use attachEvent. There's good documentation on events here, or you could switch to using a library that abstracts away browser differences.

Try:
window.attachEvent
More fully:
//set page event handlers
if (window.attachEvent) {
//IE and Opera
window.attachEvent("keydown", "");
} else if (window.addEventListener) {
// IE 6
window.addEventListener("keydown", "");
} else {
//FireFox
document.addEventListener("keydown", "");
}

Related

Behaviour of event.stopPropagation(); in different browser

I want to use event.stopPropagation(); method of jquery to stop bubbling of events.
But i am not sure if it works for all browsers as it is. Can any one please help in making it work for all browsers
eg :Ie(7,8,9,10),firefox,chrome.
event.stopPropagation() is normalized across browsers, so it should work on all platforms and all browsers. As a general practice event.stopPropagation is used in combination with event.preventDefault and these two actions are equal with return false statement.
function() {
return false;
}
// IS EQUAL TO
function(e) {
e.preventDefault();
e.stopPropagation();
}
event.stopPropagation(); is a intelligent function, once you have included JQuery library which uses pure JavaScript , handles every browser.

preventDefault() not working as desired

<script>
function confirmDel(evt)
{var con =false;
con=confirm('Do you really want to remove this purchase?.');
if(con)
{
return true;
}else
{
event.preventDefault();
}
}
</script>
my html
<a title="View Log" onclick="return confirmDel(this);" href="index.php?mod=tech_support">delete</a>
above code works fine in chrome browser but fails in Mozilla .
but when i use return false instead of event.preventDefault(); it works fine in both.
can anyone explain why this happens
The problem is with event.preventDefault(). The event you're passing is evt, not event. You have to use:
evt.preventDefault();
event.preventDefault() works in Chrome because it mimics old IE behavior for backwards compatibility (just like it also has innerText).
In old IE, the event object was window.event. So calling event.preventDefault() calls the global event object, which works in Chrome and IE, but not Firefox which doesn't implement this non-standard behavior.

Jquery load not working on internet explorer after then ready function

In firefox or chrome or other browsers i dont have this problem but in ie not working.
$(document).ready(function(){
$('#divplayer').load("/player/index.php");
$("a.eklebeni").live('click', function(event){
event.preventDefault();
$('.png', this).attr('src', 'img/eklendi.png');
$.get($(this).attr("href"), function(data) {
$('#divplayer').html('<img src="img/player.png" class="png" alt="" />');
$('#divplayer').load("/player/index.php");
});
});
I dont know why but load function not working ?
Thanks
Neither of these a jQuery related solutions... but they're both things you should be aware of in the difference between IE and W3C (everyone else). It looks like you might have coded for the latter which is why in IE it's not working as you expect, but without knowing what's not working this is a big of a WAG.
In IE, window.event gives you access to the event (not the first argument passed to the event handling code) so your function should be:
//...
.live('click',function(event) {
event=event||window.event;
//...
To prevent an event in W3C you should use event.preventDefault(), in IE you need to set event.returnValue=false in order to prevent the default event. Which means changing a change to event.preventDefault():
if (event.preventDefault) {event.preventDefault():}
else {event.returnValue=false;}
I've had this happen a million times with IE caching the content, which doesn't help because there will be no errors or problems reported, it just won't work. Try something like this and see what happens:
$('#divplayer').load("/player/index.php?timestamp=" + (+new Date));

trigger onresize in cross browser compatible manner

I would like to trigger the onresize event from my C# code behind. I think this can be done with
Page.clientScript.RegisterScriptBlock(this.getType(), "id", "javascript code");
I have tried element.onresize() but it doesnt seem to work in firefox. What is the correct way to trigger an onresize event similar to the following jQuery?
$("body").trigger("resize");
Using jQuery itself isn't an option.
This should do the trick, DOM Level 2, no idea whether this works in IE6, quirks mode still has no information on this stuff:
if (document.createEvent) {
var e = document.createEvent('HTMLEvents');
e.initEvent('resize', true, false);
document.body.dispatchEvent(e);
} else if (document.createEventObject) {
document.body.fireEvent('onresize');
}
Tested in FF, Chrome and Opera.
use this $(window).resize();
(tested in FF, chrome, IE8)
// old answer, fails in FF
document.body.onresize()

MSIE and addEventListener Problem in Javascript?

document.getElementById('container').addEventListener('copy',beforecopy,false );
In Chrome / Safari, the above will run the "beforecopy" function when the content on the page is being copied. MSIE is supposed to support this functionality as well, but for some reason I'm getting this error:
"Object doesn't support this property or method"
Now, it's my understanding that Internet Explorer won't play with the body node, but I would have thought providing a node by ID would work fine. Does anyone have any ideas about what I'm doing wrong?
** Bonus points for anyone who can tell me what the 3rd parameter "False" is good for.
In IE you have to use attachEvent rather than the standard addEventListener.
A common practice is to check if the addEventListener method is available and use it, otherwise use attachEvent:
if (el.addEventListener){
el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
el.attachEvent('onclick', modifyText);
}
You can make a function to do it:
function bindEvent(el, eventName, eventHandler) {
if (el.addEventListener){
el.addEventListener(eventName, eventHandler, false);
} else if (el.attachEvent){
el.attachEvent('on'+eventName, eventHandler);
}
}
// ...
bindEvent(document.getElementById('myElement'), 'click', function () {
alert('element clicked');
});
You can run an example of the above code here.
The third argument of addEventListener is useCapture; if true, it indicates that the user wishes to initiate event capturing.
In case you are using JQuery 2.x then please add the following in the
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge;" />
</head>
<body>
...
</body>
</html>
This worked for me.
try adding
<meta http-equiv="X-UA-Compatible" content="IE=edge">
right after the opening head tag
Internet Explorer (IE8 and lower) doesn't support addEventListener(...). It has its own event model using the attachEvent method. You could use some code like this:
var element = document.getElementById('container');
if (document.addEventListener){
element .addEventListener('copy', beforeCopy, false);
} else if (el.attachEvent){
element .attachEvent('oncopy', beforeCopy);
}
Though I recommend avoiding writing your own event handling wrapper and instead use a JavaScript framework (such as jQuery, Dojo, MooTools, YUI, Prototype, etc) and avoid having to create the fix for this on your own.
By the way, the third argument in the W3C model of events has to do with the difference between bubbling and capturing events. In almost every situation you'll want to handle events as they bubble, not when they're captured. It is useful when using event delegation on things like "focus" events for text boxes, which don't bubble.
As of IE11, you need to use addEventListener. attachEvent is deprecated and throws an error.
As PPK points out here, in IE you can also use
e.cancelBubble = true;
Using <meta http-equiv="X-UA-Compatible" content="IE=9">, IE9+ does support addEventListener by removing the "on" in the event name, like this:
var btn1 = document.getElementById('btn1');
btn1.addEventListener('mousedown', function() {
console.log('mousedown');
});
The problem is that IE does not have the standard addEventListener method. IE uses its own attachEvent which does pretty much the same.
Good explanation of the differences, and also about the 3rd parameter can be found at quirksmode.

Categories