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
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Clarification Concerning Events

    I'm getting into the DOM thing. Way cool... anyway...

    I see that DOM handles events but I don't quite get "it." I understand that DOM does not directly support DHTML events - i.e. you cannot do this:
    Code:
    var mychkbox = createElement('input');
    mychkbox.id="chekov";
    mychkbox.onclick()="doyothang(this);";
    mychkbox.checked=false;
    etc.
    I'm trying to imagine DOM handles events somewhat generically kinda like a standard Mac GUI program - all events are passed to a general event handler and the handler figures out what kind of event it is and calls appropriate functions.

    But I don't see how the script can see what specific element was clicked on - a specific checkbox for example.

    What am I trying to do, you ask?
    I'm dynamically creating table rows, each row has several fields constituting one data record. I want to default-disable a certain textbox (which I do), but I want to enable it when I click on it's associated checkbox. Easy in DHTML, is it possible in DOM?

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    EventTarget.addEventListener('typeofevent', EventHandler, useCapture);

    EventTarget is typically an element or document node (can be a text node). EventHandler is a reference to a function which takes a single argument (refering to the event object), and useCapture is a boolean for whether the listener should fire during the capturing or bubbling phase of the event.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Not grocking it yet

    Uh, OK. What are the typeofevent(s)? In DHTML we specify "onclick", "onmouseover", etc. How do we tell DOM we're looking specifically for a click, then a click on a specific object - this checkbox? I can't find a list of what these event types are. Are they (duuuhhh) the exact type/spelling as with DHTML?


    What I think I understand at this point
    Please tell me where I'm going wrong; and fill in the blanks

    Gotta create an event:
    var clickEvent = DocumentEvent.createEvent("click"); // what are the different event types?

    Then you gotta set some properties:
    clickEvent.initEvent ('click', false, false); // "click" seems redundant! We alredy specified the event type when we created it.

    Then you gotta tell what function to do when an event occurs:
    write a function w/ a parameter that takes an Event object:
    function checkboxEventHandler (clickEvent) {...}

    Then you gotta register the event listener. This typically takes place when you create the object itself:
    var myCheckbox = document.createElement ("checkbox");
    myCheckbox.addEventListener (typeofevent, checkboxEventHandler, false); // AGAIN, how do you 'say' "a click event"?

    FINALLY..
    Now, when the checkbox is clicked on the checkboxEventHandler function is called.

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    document.createEvent('MouseEvents');
    // create a MouseEvent

    You don't use the event name in that, only what event type it is going to inherit from.

    For example the event 'load' is initialized by "HTMLEvents" in the argument.

    Now, with the specific type of event, you initialize it with the event name, and some context info.

    myMouseEvent.initEvent('click', blablablabla);


    None of that though is required to setup an event listener. This rather progmatically creates events you can dispatch at will.

    Anyway, just an example to setup an event listener for a click event:

    function myListener(event) {
    // do something!
    }

    myCheckBox.addEventListener('click', myListener, false);

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not understanding something. Are you saying that I am to make up the event type myself? That makes no sense whatsoever. DOM must implement - OK the specific implimentation (NS 7.0, IE5.x, etc.) must implement the event types - Something has to. I can't make them up on the fly in script!?

    I'm still left with the same question: "what are the events?" ie. "what events are supported?" ie "what are the different event types?". Sorry if I'm sounding rude here, but while the generic format for scripting events in DOM is needed, we're beating that dead horse too much.

    A partial answer:
    http://www.mozilla.org/docs/dom/domr...f.html#1022767

    This is a list of all the events supported in Gecko. BUT this leaves the question of events supported in IE - specifically IE 5.5 (if any!).

    I tried the demo code (see example 5):
    http://www.mozilla.org/docs/dom/domr...es.html#998748

    While this code fully functions in Netscape 7.0 (macintosh - I take my iBook to work ) it is not fully working in IE 5.5 (windoze 98). Specifically the "addEventListener" isn't executing. Maybe this property is not implemented. Maybe "click" is not a valid event. Apparently "onclick" is not either.

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Internet Explorer does not implement the DOM2 Events specifications. While it has several comparable properties of the event object, and a few methods which can achieve similar effects, its own event implementation is not compatible at all with DOM2's.

    Namely, it doesn't support event capturing, it doesn't pass event objects around as arguments (always keeps it in global window.event), you can't progmatically create events, it doesn't have any DOM2 MutationEvents (onpropertychange is arguably a basic implementation of attrmodified), doesn't have several equivalent MouseEvents, etc. Too many differences to list really.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Major Bummer :mad:

    So anyone know of a reference so I can find out what IE can do?

    Please don't tell me to goto msdn.microsoft.com. I can't find *&%$ in that mess! If you know of a specific page in msdn, then OK.

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Well, there are a few basics I can list here:

    addEventListener --> attachEvent(eventname, listener)
    attachEvent always bubbles

    detachEvent is the equivalent of removeEventListener

    Events are "oneventname" instead of "eventname" in IE. somelement.attachEvent('onclick', doSomething);
    for example.

    Ummm, a list of events IE supports:
    http://msdn.microsoft.com/library/de...nce/events.asp

    And a list of properties that can be found on window.event:
    http://msdn.microsoft.com/workshop/a.../obj_event.asp

  • #9
    New Coder
    Join Date
    Jul 2002
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.wsabstract.com/dhtmltutors/domevent1.shtml
    A nice tutorial on the DOM event handlers and the differences between IE & NS6 when using them.


  •  

    Posting Permissions

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