Javascript: Setting onclick dynamically and passing in the element itself

Question 1

i'm dynamically creating some <div> elements and then filling their innerhtml properties with text. i'm trying to set their onclick event handlers like this:

mydiv.onclick = function() { alert("hello!") };

that i can do. what i would like to do is be able to access the value / innerhtml (new to javascript and dom, so i'm unsure of what term is what i'm looking for) within the newly defined onclick function. how would i go about accessing the data of mydiv within the function being defined for its onclick property? mydiv will be something simple like:

<div>stackoverflow</div>

any help would be greatly appreciated!

Question 2

the onclick handler is executed in the context of the element.

mydiv.onclick = function () { alert(this.innerhtml); };

Question 3

i am sure this is what you want:

function touchhandler(event)
{
    var touches = event.changedtouches,
        first = touches[0],
        type = "";
    switch(event.type)
    {
        case "touchstart": type = "mousedown"; break;
        case "touchmove":  type = "mousemove"; break;        
        case "touchend":   type = "mouseup";   break;
        default:           return;
    }

    // initmouseevent(type, canbubble, cancelable, view, clickcount, 
    //                screenx, screeny, clientx, clienty, ctrlkey, 
    //                altkey, shiftkey, metakey, button, relatedtarget);

    var simulatedevent = document.createevent("mouseevent");
    simulatedevent.initmouseevent(type, true, true, window, 1, 
                                  first.screenx, first.screeny, 
                                  first.clientx, first.clienty, false, 
                                  false, false, false, 0/*left*/, null);

    first.target.dispatchevent(simulatedevent);
    event.preventdefault();
}

function init() 
{
    document.addeventlistener("touchstart", touchhandler, true);
    document.addeventlistener("touchmove", touchhandler, true);
    document.addeventlistener("touchend", touchhandler, true);
    document.addeventlistener("touchcancel", touchhandler, true);    
}

i've captured the touch events and then manually fired my own mouse events to match. although the code isn't particularly general purpose as is, it should be trivial to adapt to most existing drag and drop libraries, and probably most existing mouse event code. hopefully this idea will come in handy to people developing web applications for the iphone.

update:

in posting this, i noticed that calling preventdefault on all touch events will prevent links from working properly. the main reason to call preventdefault at all is to stop the phone from scrolling, and you can do that by calling it only on the touchmove callback. the only downside to doing it this way is that the iphone will sometimes display its hover popup over the drag origin. if i discover a way to prevent that, i'll update this post.

second update:

i've found the css property to turn off the callout: -webkit-touch-callout.

Question 4

the mouseout event on the inner div ‘bubbles’ to the outer div. to detect that this has happened from the outer div, check the target property of the event:

<div id="outer">
    <div id="inner">x</div>
</div>

document.getelementbyid('outer').onmouseout= function(event) {
    // deal with ie nonsense
    if (event===undefined) event= window.event;
    var target= 'target' in event? event.target : event.srcelement;

    if (target!==this) return;
    ...
};

the usual problem with mouseout is you get it when the pointer moves “out” of the parent even if it's only moving “in” to the child. you can detect this case manually by looking up the ancestor list of the element the mouse is moving into:

    var other= 'relatedtarget' in event? event.relatedtarget : event.toelement;
    while ((other= other.parentnode).nodetype===1)
        if (other===this) return;

this is the mousein/mouseout model: it is only interested about which element is the mouse's immediate parent. what you more often want is the mouseenter/mouseleave model, which considers element trees as a whole, so you'd only get mouseleave when the pointer was leaving the element-or-its-descendants and not moving directly into the element-or-its-descendants.

unfortunately mouseenter/mouseleave is currently an ie-only event pair. hopefully other browsers will pick it up as it is expected to be part of dom level 3 events.

Question 5

  $("#anydiv").html('<input id="id1"/>');

....

 $("#anydiv").append('<input id="id2"/>');

Question 6

you need lazy loading. try this:

struct mymap {
    private static var _prop1: myprotocol?
    static var prop1: myprotocol {
        get { return _prop1 ?? myclass() }
        set(value) { _prop1 = value }
    }
}

or this:

struct mymap {
    private static var _prop1: myprotocol?
    static var prop1: myprotocol {
        get {
            if _prop1 == nil {
                _prop1 = myclass()
            }
            return _prop1!
        }
        set(value) { _prop1 = value }
    }
}

Javascript: Setting onclick dynamically and passing in the element itself

Answers

javascript,javascript-events