Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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? Thanks in advance.

** Bonus points for anyone who can tell me what the 3rd parameter "False" is good for.

like image 320
Matrym Avatar asked Nov 08 '09 04:11

Matrym


People also ask

What is a addEventListener in JavaScript?

The addEventListener() is an inbuilt function in JavaScript which takes the event to listen for, and a second argument to be called whenever the described event gets fired. Any number of event handlers can be added to a single element without overwriting existing event handlers.

What is the benefit of using addEventListener instead of inline event handlers?

addEventListener() has multiple advantages: Allows you to register unlimited events handlers and remove them with element. removeEventListener() . Has useCapture parameter, which indicates whether you'd like to handle event in its capturing or bubbling phase.

What is false in addEventListener?

addEventListener("click", first, true); when clicking child element, first method will be called before second . By default, the useCapture flag is set to false which means you handler will only be called during event bubbling phase.


2 Answers

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.

like image 66
Christian C. Salvadó Avatar answered Sep 30 '22 10:09

Christian C. Salvadó


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.

like image 32
Aarif Avatar answered Sep 30 '22 09:09

Aarif