Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    addEventListener - change execution order

    Hello everyone,

    Let's suppose an element has some attached functions on keydown, which where added using the addEventListener function.

    I want to add my own function to be executed but move its execution to the top. In other words I want my function to be executed before any other.

    Changing the source and adding my own addEventListener first is not an option :/

    Has anyone faced anything a similar issue? Do you have any ideas on how to solve it?

    I would like to mention that ANY solution is acceptable even if it requires additional JS frameworks etc.

    Thanks in advance

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,460
    Thanks
    0
    Thanked 632 Times in 622 Posts
    If you need to run code in a specific order then it ALL needs to be called from within the same event handler or listener.

    Using multiple event listeners is for the 99.9999% of the time when the code is completely independent and the order it runs in doesn't matter.

    So if your code must run before the code already in the listener simply add your code to the front of the listener.

    If as is more likely your code is completely independent of the code already there (as you wouldn't be asking the question if it were all part of the same script) then the order it runs in isn't going to make any difference and so you can just add your own listener.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi and thanks for the reply.

    My problem is that the textarea already has a function bind to it and when the user presses ENTER it gets processed. What I want to do is to add something to the text written BEFORE it gets processed.

    But if I use addEventListener I simply cannot get it to execute first. For instance, I simply make it display an alert box and by the time the alert shows up, the text is already processed.

    Any ideas on how to bypass that?

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Howlett View Post
    But if I use addEventListener I simply cannot get it to execute first. For instance, I simply make it display an alert box and by the time the alert shows up, the text is already processed.

    Any ideas on how to bypass that?
    Presumably you don't control the installing of the other handler (not a good position to be in).
    Destroy the textarea and replace it with a new copy with the same attributes. Attach your event handler then attach a handler that emulates whatever the first one does.

  • #5
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    No I don't, by the time my script kicks in it's already too late.

    I thought on replacing the textarea but I don't know which functions are attached to it (I mean, how to list the attached functions) in order to re-attach them afterwards. The framework is too complicated to trace it back (unless there is a way I am not familiar with).

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    How about this:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <form id="theform">
       <textarea name="ta" rows="8" cols="40"></textarea>
    </form>
    
    <script type="text/javascript">
    var f = document.getElementById("theform");
    // this is the event handler that already exists
    f.ta.addEventListener("keydown",func1,false);
    f.ta.addEventListener("keydown",func2,false);
    
    function func1(e) { 
            if ( e.keyCode == 13 ) this.value += "ZAM";  
    } 
    function func2(e) { 
            if ( e.keyCode == 65 ) this.value += "###";  
    } 
    
    // adding one to the front...
    // first, find what is there now
    var prior = f.ta.onkeydown;
    // then replace it with our new function..do *NOT* use addEventListener!
    f.ta.onkeydown = function( e ) {
        this.value = this.value.replace(/ /g, "!");
    }
    // then add back on what was there
    f.ta.addEventListener("keydown", prior, false)
    </script>
    </body>
    </html>
    If you need it to work with old IE then you will have to have it handle both kinds of event models, etc. But it should still work.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote Originally Posted by Old Pedant View Post
    How about this:
    Code:
    // then add back on what was there
    f.ta.addEventListener("keydown", prior, false)
    Installing a handler does not overwrite a listener. Your code shows that a directly-applied handler is executed after any listeners installed with addEventListener. The line above has no effect because prior is null.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    DOH! Teach me not to test more thoroughly. Double DOH.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi again and thank you for your replies.

    I still can't make it work. The textarea I want to hook is the at facebook.com/messages or in chat in gereral. I want to be able to manipulate the content before it's sent (I want a browser extension to add extra functionality).

    Any ideas?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •