sandbox/event/dom.html

	dom.html revision 3f3aa287185afb5d48d7ef0717054a154c372dc9
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html debug="true">
<head>
<title>YUI 3.0</title>
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
<script type="text/javascript" src="/build/oop/oop-debug.js"></script>
<script type="text/javascript" src="/build/event-custom/event-custom.js"></script>
<script type="text/javascript" src="/build/event/event-debug.js"></script>
<script type="text/javascript" src="/build/event-simulate/event-simulate.js"></script>
<!--
<script type="text/javascript" src="/build/dom/dom.js"></script>
-->
<script type="text/javascript" src="/build/node/node.js"></script>
<script type="text/javascript" src="/build/dump/dump.js"></script>
<script type="text/javascript" src="/build/substitute/substitute.js"></script>

<body>

<div id="body">asdf</div>

<form id="form1" name="form1">

<input id="button1" type="button" value="Button 1" class="button" />
<input id="button2" type="button" value="Button 2" class="button" />
<input id="text1" type="text" value="something" class="nothing" />

</form>

<script>

if (typeof loadFirebugConsole == 'function') {
    loadFirebugConsole();
}

YUI({

    base: '/build/'

}).use('node', 'dump', 'substitute', function(Y) {

    Y.on('load', function(e) {
        Y.log('window load event');
    });

    // debugger;

    // alert('starting JS');

    Y.log('asdf');


    Y.on('event:ready', function() {
        Y.log('event:ready SUBSCRIBER');
    });

    Y.on('domready', function() {
        Y.log('domready SUBSCRIBER');
    });

    /*

    Y.on('click', function(e, arg1, arg2) {

        this.setStyle('background-color', 'red');

        Y.log('document click' + this);
        Y.log(Y.Array(arguments));

    }, document);
    */

    // Y.on('asdasdafdsf|yui:log', function(e) {
    //     var d=document, b=d.body, n=d.createElement("div");
    //     if (b) {
    //         n.appendChild(d.createTextNode(e.msg));
    //         b.appendChild(n);
    //     }

    // });

/*
    Y.on('event:ready', function() {
        Y.log("onDOMReady fired");
    });
    */

/*

    document.getElementById('form1').addEventListener('focus',
        function(e) {
            Y.log('bubble phase focus');
            e.stopPropagation();
        }, false);
    */

    Y.on('click', function() {
        Y.log("never should happen");
    }, '#neverwillbehere');

    Y.on('click', function() {
        Y.log("lazy element worked");
    }, '#lazy');


    Y.on('focus', function() {
        Y.log("FORM focus fired");
    }, '#form1');

    Y.on('blur', function() {
        Y.log("blur fired");
    }, '#form1');

    // Y.on('focus', function() {
    //     Y.log("TEXT focus fired");
    // }, '#text1');

    var node = Y.get('#text1');

    node.on('blahblah|focus', function(e) {
        Y.log("TEXT focus fired: " + e.type);
        //node.detach();
        node.detach('blahblah|*');
    });


    /*

    document.getElementById('text1').addEventListener('focus',
        function(e) {
            Y.log('capture phase focus');
            e.stopPropagation();
        }, true);
    */

    var el = Y.get('#button1');
    Y.log("get got " + el);
    el.setStyle('border', '3px solid red');

    var f = function(e) {
        Y.log("SUB1, " + this.get('id') + " click event facade: " + e.target);
        e.stopPropagation();
        // e.stopImmediatePropagation();
    },
    f2 = function(e) {

        Y.log("SUB2, " + this.get('id') + " click event facade: " + e.target);
        // h.detach();
        // Y.detach('click', f, el);
        // console.log(Y.Event.getListeners(this, 'click'));
        // console.log(Y.Event.getListeners(this));
        // Y.Event.purgeElement(this, true, 'click');
        // Y.Event.detach('click', null, this);
        Y.detach('blah|*');
    };

    // var h = Y.on('blah|click', f, el);
    // Y.on('blah|click',f2, el);

    Y.on({
        'blah|click':     f2,
        'blah|mouseover': f
    }, null, el);

    var ret = Y.on('click', function(e) {
        Y.log(this.get('id') + " click event facade: " + e.target);
    }, '#button2');

    Y.log('ret: ' + Y.Lang.dump(ret, 1));

    var buts = Y.Node.all('.button');

    Y.log('queryAll buttons: ' + Y.Lang.dump(buts.get('length')));

    buts.each(function(v, k) {
        Y.log('blah: ' + v);
    });

    Y.each(buts, function(v, k) {
        Y.log('blah2: ' + v);
    });

/*
    Y.on('mouseover', function(e) {
        // alert('asdf');
        Y.log(this.id || this.get('id') + " mouseover: " + e.target);
        // },  Y.Node.queryAll('.button'));
    //},  Y.Selector.query('.button'));
    },  ['#button1', '#button2']);
    */

    /*

    Y.on('TEST:EVENT', function() {
        Y.log('test event subscriber success: ' + Y.Array(arguments));
    });

    Y.fire('TEST:EVENT', 1, 2);

    Y.fire('asdf:asdf', 1);

    Y.fire('asdf', 1);
    */

    /*

    var obj = new Y.Event.Target();


    // test failure
    obj.subscribe('foo', function() {
        Y.info(notdefined);
    });

    obj.subscribe('foo', function() {
        Y.info(notdefined);
    });

    obj.subscribe('foo', function() {
        Y.info('foo fired anyway!');
    });

    try {
        obj.fire('foo');
    } catch(e) {
        Y.warn('fire() error: ' + Y.Lang.dump(e.errors));
    }
    */

    //if (Object.prototype.hasOwnProperty)  {
        //alert('asdf');
    //}
    //window.blah ="ad"
    //alert(window.hasOwnProperty('blah'));
    //alert(window.hasOwnProperty('document'));

    //alert(Y.object.owns(window, 'blah'));

    var a = [
        1,
        2,
    ];

var handle;
function handleClick(){
    Y.log(handle);
}

/*

var body = Y.Node.get("body");
handle = body.on("click", handleClick);
*/

//click to confirm it's attached

// body.detach("click", handleClick);

// handle.detach();

//click again, will still show the alert

// for (var i in window) {
    // Y.log(i);
// }

//A function that pops up a "Hello World" alert:
var helloWorld = function(e) {
	Y.log("helloWorld function firing.", "info", "example");
	alert("Hello World!");
}

/*

//subscribe the helloWorld function as an event
//handler for the click event on the container
//div:
Y.on("click", helloWorld, "#container");
*/


//A function that pops up an alert and
//prevents the default behavior of the event
//for which it is a handler:
var interceptLink = function(e) {
	// e.preventDefault();
    alert('asdf');
	e.halt();
	Y.log("You clicked on the second YUI link.", "info", "example");
	alert("You clicked on the second YUI link.  Because *preventDefault* was called, this link will not navigate away from the page.");
}

//subscribe our interceptLink function
//as a click handler for the second anchor
//element:
Y.on("click", interceptLink, "#secondA");

Y.Event._attach(["click", function(e) {
    console.log('native event -->');
    console.log(e);
    console.log('<-- native event');
}, "#secondA"], { facade: false } );

// Y.Event.onAvailable("#secondA", function() {
//     Y.log('#secondA is READY');
// });

Y.on('blah|available', function() {
    Y.log('#secondA is READY');
    Y.log(arguments);
}, '#secondA', Y, 1, 2);


//log message to indicate that the example is ready:
Y.log("When you begin interacting with the example at left, you'll see log messages appear here.", "info", "example");

Y.on('windowresize', function(e) {
    Y.log('window resize');
});

    // Y.on('resize', function(e) {
        // alert('resized');
    // });

    Y.on('mousewheel', function(e, arg1) {
        Y.log('mousewheel: ' + e.wheelDelta + ', ' + arg1);
    }, Y, 1);

});

</script>

<div id="container">new msgs</div>

<p>
<a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a>
</p>

<p>
<a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a>
</p>

    <form>
        <input type="radio" id="radio1" name="radiocollection[]" />
    </form>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p>blah</p>
    <p id="lazy">Me</p>
</body>
</html>