www.webdeveloper.com
Results 1 to 10 of 10

Thread: Quick Help with Some Javascript Please...

  1. #1
    Join Date
    Dec 2013
    Posts
    8

    Quick Help with Some Javascript Please...

    Could somone please explain to me(possibly in detail) possibly write a function that would have if statements inside that would only run depending on which event has occured. Example,

    function test() {
    if(Element.clicked) {
    // executed code
    }
    if(Element.mouseOver) {
    // executed code
    }
    if(Element.mouseout) {
    // executed code
    }
    }

    I know this isnt proper, I was just trying to get the point across. Hope you understand what I am trying to accomplish here.
    If you cant use multiple "event captures" in one funtion then how would I capture ANY event in an if statement, in a function? Also, with just javascript, no JQuery. Thanks for the help

  2. #2
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    242
    There's a number of ways at your disposal to call your code based on the event being triggered. Two most common are:

    1. Calling your code via HTML attributes
    2. Handling an event via Object's properties

    Code:
    <a id="link" href="#" onclick="alert(this.href)">Link</a> //first method
    document.getElementById('link').onclick = function() {alert(this.href)} //second method
    The first method is straightforward and there's no need to explain it any further.

    With the second method you are handling an event via object's properties. When using this method the most common way of handling an event is to define your function at the top of to code (usually inside of the HTML head tag) and then connect your event handler to that function.

    Code:
    <head>
        <script>
            function myFunction() {alert("I'm handled via object's properties")} // function to execute when the event has been triggered 
        </script>
    </head>
    <body>
        <a id='link' href="#">Link</a>
        <script>
            document.getElementById('link').onclick = myFunction; // function to be called on click (note that the parentheses are left out)
        </script>
    </body>
    But based on your question I'm making assumption that what you want is to get hold of an event object and use its properties to further investigate and query an event.

    You can do this on two ways:

    1. You can pass an event object to the calling function from within HTML attribute
    2. Events that are handled through the object's properties passes this event object automatically to the function that is connected with them

    Either way you'll have to define a function with at least one parameter. When the event fires it will pass one argument to the calling function and that one argument will be the Event object.

    So here's one example that uses it

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>Untitled</title>
        <style>
            div { border: 1px solid black; width: 200px; height: 200px; }
            p { border: 1px solid red; width: 200px; height: 20px; text-align: center; }
            table, td, tr { border: 1px solid green; width: 200px; height: 20px; text-align: center; }
        </style>
        <script type='text/javascript'>
            function myFunction(e) {
                if (e.target.nodeName == "DIV") alert("I'm div element!");
                if (e.target.nodeName == "P") alert("I'm p element!");
            }
        </script>
    </head>
    <body>
        <div id="div"></div>
        <p id="p">This is a paragraph!!</p>
        <table><tr><td>Nothing happens</td></tr></table>
        <script>
            document.onclick = myFunction;
        </script>
    </body>
    </html>
    You set the onclick event on the document object. Whenever the event occurs it will call the myFunction and pass the Event object as its argument. Inside of a function you check which element has triggered the event. If it is a "DIV" element you alert the user with the appropriate message. If on the other hand it is a "P" element you alert the user with another message indicating that he has clicked on the p element.
    Last edited by tech_soul8; 12-10-2013 at 05:00 PM.

  3. #3
    Join Date
    Dec 2013
    Posts
    8
    Thank you very much for your detailed explanation, I am in process of reading but just wanted to say thanks cvause it looks like it took some time. Thanks alot.

  4. #4
    Join Date
    Dec 2013
    Posts
    8
    your explanation is great. and I didnt understand completely the things you wrote until after I read them so thanks for that. What I was really trying to figure out is if there is a way to have 1 function for multiple events on the same element. Example:

    firstElem.addEventListener('click',multiFunction,false);
    firstElem.addEventListener('mouseover',multiFunction,false);
    firstElem.addEventListener('mouseout',multiFunction,false);

    function multiFunction() {
    if(firstElem == 'click') {
    // run code
    }
    if(firstElem == 'mouseover') {
    // run code
    }
    if(firstElem == 'mouseout') {
    // run code
    }
    }

    something to that effect. Or do I just need to make seperate function for each. I know I could just make an anonymous function for each event listener but im trying to figure out a more organized way of doing this. It doesnt have to be exactly like i wrote it I just wanted you to get the right idea.

  5. #5
    Join Date
    Dec 2013
    Posts
    8
    im mainly trying to figure out how to tell which event was triggered on an element that has multiple events on it. like how would i capture it in an 'if' statement. if(event.triggered == 'click') { //code }. Thats what I am trying to figure out.

  6. #6
    Join Date
    Dec 2013
    Posts
    8
    Thanks alot for the explanation, I posted few more comments just forgot to put them here in your 'reply' area, instead they are in the forum as posts, but they are meant for you.

  7. #7
    Join Date
    Dec 2013
    Posts
    8
    well I take it there is no way for me to delete my own reply lol. Im new to this site.

  8. #8
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    242
    Quote Originally Posted by JJamesInc View Post
    your explanation is great. and I didnt understand completely the things you wrote until after I read them so thanks for that. What I was really trying to figure out is if there is a way to have 1 function for multiple events on the same element.
    Of course you can do that. You use the event's type property to determine which type of event has occurred and based on the type of event you execute your code.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
        <title>Untitled</title>
        <style>
            div { border: 1px solid black; width: 200px; height: 200px; }
        </style>
        <script type='text/javascript'>
            function myFunction(e) {
                switch (e.type) {
                    case "click": {
                        alert("I'm activated with the onclick event!!");
                        break;
                    }
                    case "mouseout": {
                        alert("I'm activated with the mouseover event!!");
                        break;
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="div"></div>
        <script>
            document.getElementById('div').onclick = myFunction;
            document.getElementById('div').onmouseout = myFunction;
        </script>
    </body>
    </html>
    Last edited by tech_soul8; 12-13-2013 at 04:03 PM.

  9. #9
    Join Date
    Dec 2013
    Posts
    8
    OH OK, more simple than I thought. Thank you very much for the help, and I am sorry for the long response. Been busy for the holidays. Thanks again. I appreciate the info. Happy Holidays...

  10. #10
    Join Date
    Dec 2013
    Posts
    8
    long response time*

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles