Client Framework

Home » Client Framework » Forum » removing event listeners

removing event listeners

23 January, 2008 - 12:27 — tamas.kovacs

Hi Guys,

Could somebody show me a working example about the removeEventListener method?

thx
Tom

‹ Multiple JS function parameters with addEventListener How to change the color of the 'toolBar' ?? ›

removing event listeners example

23 January, 2008 - 14:51 — yudi

Hi tamac.kovacs

Please have a look the add and remove event listener example below.

<e:script type="text/javascript">
    function myFunction()    {
                alert('iamclicked');
    }
</e:script>
<xi:include href="../../bindings/config.xml" />
<img id="shoppingCart" src="clickMe.jpg" />
<button> add click event lister to image
<e:handler event="click" type="text/javascript">
oShoppingCartImage = bb.document.getElementById('shoppingCart');
oShoppingCartImage.addEventListener('click', myFunction, false);
</e:handler>
</button>
<button>remove click event lister to image
<e:handler event="click" type="text/javascript">
oShoppingCartImage = bb.document.getElementById('shoppingCart');
oShoppingCartImage.removeEventListener('click', myFunction, false);
</e:handler>
</button>

Cheers,

Yudi

It is working, but..

23 January, 2008 - 15:23 — tamas.kovacs

Hi Yudi!

Thank you very much the answer, I'm tried now this example and it is working fine.
But in my case, this is the mode how I adding the event listener:

eval( "bb.callMethod(oList, 'addEventListener', ['click', function(event){bb.callFunction('pCallWindow', ['"+sWinref+"','none']);}, false])");

so if I modifying your code like this:

<e:script type="text/javascript">
    function myFunction(text)    {
                alert('iamclicked:'+text);
    }
</e:script>
<xi:include href="../../bindings/config.xml" />
<img id="shoppingCart" src="../../media/gth_messagebox_info.png" />
<button> add click event lister to image
<e:handler event="click" type="text/javascript">
oShoppingCartImage = bb.document.getElementById('shoppingCart');
oShoppingCartImage.addEventListener('click', function(event){myFunction('anytext');}, false);
</e:handler>
</button>
<button>remove click event lister to image
<e:handler event="click" type="text/javascript">
oShoppingCartImage = bb.document.getElementById('shoppingCart');
oShoppingCartImage.removeEventListener('click',  function(event){myFunction('anytext');}, false);
</e:handler>
</button>

the removeEventListener method not works, maybe cannot find the removable function.

Re: removeEventListener problem

24 January, 2008 - 12:26 — Sergey

The code doesn't work because the function (listener) being removed is not the one that had been attached.

Let's consider the code #1:

oShoppingCartImage = bb.document.getElementById('shoppingCart');
oShoppingCartImage.addEventListener('click', function(event){myFunction('anytext');}, false);

Here an anonymous function is created function(event){myFunction('anytext');} and added to element as the listener.

In the code #2:

oShoppingCartImage = bb.document.getElementById('shoppingCart');
oShoppingCartImage.removeEventListener('click',  function(event){myFunction('anytext');}, false);

Here one more anonymous function is created function(event){myFunction('anytext');}) and attempted to be removed. However this function is not removed, simply because this anonymous function was not yet added (another anonymous function was added)!

Hope the explanation will help.

thank you!

24 January, 2008 - 12:39 — tamas.kovacs

Thank you Sergey! That was the problem! This is the right way to using it:

Adding:

oShoppingCartImage = bb.document.getElementById('shoppingCart');
oShoppingCartImage.addEventListener('click', testfnc = function(event){myFunction('anytext');}, false);

Removing:

oShoppingCartImage = bb.document.getElementById('shoppingCart');
oShoppingCartImage.removeEventListener('click', testfnc, false);

Thanks again!
Tom