dom.html revision 4ed6c4c5fd18811cfc57f26a1c593307d1867746
1516N/A<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
1423N/A<html debug="true">
1423N/A<head>
1423N/A<title>YUI 3.0</title>
1423N/A<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
1423N/A<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
1423N/A<script type="text/javascript" src="/build/oop/oop-debug.js"></script>
1423N/A<script type="text/javascript" src="/build/event-custom/event-custom.js"></script>
1423N/A<script type="text/javascript" src="/build/event/event-debug.js"></script>
1423N/A<script type="text/javascript" src="/build/event-simulate/event-simulate.js"></script>
1423N/A<script type="text/javascript" src="/build/dom/dom.js"></script>
1423N/A<script type="text/javascript" src="/build/node/node.js"></script>
1423N/A<script type="text/javascript" src="/build/dump/dump.js"></script>
1423N/A<script type="text/javascript" src="/build/substitute/substitute.js"></script>
1423N/A
1423N/A<body>
1423N/A
1423N/A<div id="body">asdf</div>
1423N/A
1423N/A<form id="form1" name="form1">
1423N/A
1423N/A<input id="button1" type="button" value="Button 1" class="button" />
1423N/A<input id="button2" type="button" value="Button 2" class="button" />
2215N/A<input id="text1" type="text" value="something" class="nothing" />
1423N/A
1423N/A</form>
2026N/A
2026N/A<script>
2026N/A
2026N/Aif (typeof loadFirebugConsole == 'function') {
1423N/A loadFirebugConsole();
2026N/A}
2026N/A
2026N/AYUI({
2026N/A
2026N/A base: '/build/'
2026N/A
2026N/A}).use('node', 'dump', 'substitute', function(Y) {
1423N/A
1423N/A Y.on('load', function(e) {
2026N/A Y.log('window load event');
1423N/A });
2026N/A
2026N/A // debugger;
1846N/A
1423N/A // alert('starting JS');
2026N/A
2026N/A Y.log('asdf');
2026N/A
2026N/A
2026N/A Y.on('event:ready', function() {
2026N/A Y.log('event:ready SUBSCRIBER');
2026N/A });
2026N/A
2026N/A Y.on('domready', function() {
2026N/A Y.log('domready SUBSCRIBER');
2026N/A });
2026N/A
2026N/A /*
2026N/A
2026N/A Y.on('click', function(e, arg1, arg2) {
2026N/A
2026N/A this.setStyle('background-color', 'red');
2026N/A
2026N/A Y.log('document click' + this);
2026N/A Y.log(Y.Array(arguments));
2026N/A
2026N/A }, document);
2026N/A */
2026N/A
2026N/A Y.on('asdasdafdsf|yui:log', function(e) {
2026N/A var d=document, b=d.body, n=d.createElement("div");
2026N/A if (b) {
2026N/A n.appendChild(d.createTextNode(e.msg));
2286N/A b.appendChild(n);
2286N/A }
2286N/A
2026N/A });
2026N/A
2026N/A/*
2026N/A Y.on('event:ready', function() {
2026N/A Y.log("onDOMReady fired");
2026N/A });
2286N/A */
2026N/A
2026N/A/*
2026N/A
2026N/A document.getElementById('form1').addEventListener('focus',
2026N/A function(e) {
2026N/A Y.log('bubble phase focus');
2026N/A e.stopPropagation();
2026N/A }, false);
2026N/A */
2286N/A
2286N/A
2026N/A Y.on('focus', function() {
2026N/A Y.log("FORM focus fired");
2026N/A }, '#form1');
2026N/A
2026N/A Y.on('blur', function() {
2026N/A Y.log("blur fired");
2026N/A }, '#form1');
2026N/A
2026N/A // Y.on('focus', function() {
2026N/A // Y.log("TEXT focus fired");
2026N/A // }, '#text1');
2026N/A
2026N/A var node = Y.get('#text1');
2026N/A
2026N/A node.on('blahblah|focus', function(e) {
2026N/A Y.log("TEXT focus fired: " + e.type);
2026N/A //node.detach();
2026N/A node.detach('blahblah|*');
2026N/A });
2026N/A
2286N/A
2286N/A /*
2286N/A
2286N/A document.getElementById('text1').addEventListener('focus',
2286N/A function(e) {
2026N/A Y.log('capture phase focus');
2026N/A e.stopPropagation();
2026N/A }, true);
2026N/A */
2026N/A
2026N/A var el = Y.get('#button1');
2286N/A Y.log("get got " + el);
2286N/A el.setStyle('border', '3px solid red');
2286N/A
2286N/A var f = function(e) {
2286N/A Y.log("SUB1, " + this.get('id') + " click event facade: " + e.target);
2286N/A e.stopPropagation();
2286N/A // e.stopImmediatePropagation();
2286N/A },
2286N/A f2 = function(e) {
2286N/A
2286N/A Y.log("SUB2, " + this.get('id') + " click event facade: " + e.target);
2286N/A // h.detach();
2286N/A // Y.detach('click', f, el);
2286N/A // console.log(Y.Event.getListeners(this, 'click'));
2286N/A // console.log(Y.Event.getListeners(this));
2286N/A // Y.Event.purgeElement(this, true, 'click');
2286N/A // Y.Event.detach('click', null, this);
2286N/A Y.detach('blah|*');
2286N/A };
2286N/A
2286N/A // var h = Y.on('blah|click', f, el);
2286N/A // Y.on('blah|click',f2, el);
2026N/A
2026N/A Y.on({
2026N/A 'blah|click': f2,
2026N/A 'blah|mouseover': f
2026N/A }, null, el);
2026N/A
2026N/A var ret = Y.on('click', function(e) {
2026N/A Y.log(this.get('id') + " click event facade: " + e.target);
2026N/A }, '#button2');
2026N/A
2026N/A Y.log('ret: ' + Y.Lang.dump(ret, 1));
2026N/A
2026N/A var buts = Y.Node.all('.button');
2026N/A
2026N/A Y.log('queryAll buttons: ' + Y.Lang.dump(buts.get('length')));
2026N/A
2026N/A buts.each(function(v, k) {
2026N/A Y.log('blah: ' + v);
2026N/A });
2026N/A
2026N/A Y.each(buts, function(v, k) {
2026N/A Y.log('blah2: ' + v);
2026N/A });
2026N/A
2026N/A/*
2026N/A Y.on('mouseover', function(e) {
2026N/A // alert('asdf');
2026N/A Y.log(this.id || this.get('id') + " mouseover: " + e.target);
2026N/A // }, Y.Node.queryAll('.button'));
2026N/A //}, Y.Selector.query('.button'));
2026N/A }, ['#button1', '#button2']);
2026N/A */
2026N/A
2026N/A /*
2026N/A
2026N/A Y.on('TEST:EVENT', function() {
2026N/A Y.log('test event subscriber success: ' + Y.Array(arguments));
2026N/A });
2026N/A
2026N/A Y.fire('TEST:EVENT', 1, 2);
2026N/A
2026N/A Y.fire('asdf:asdf', 1);
2026N/A
2026N/A Y.fire('asdf', 1);
2026N/A */
2026N/A
2026N/A /*
2026N/A
2026N/A var obj = new Y.Event.Target();
2026N/A
2026N/A
2026N/A // test failure
2026N/A obj.subscribe('foo', function() {
2026N/A Y.info(notdefined);
2026N/A });
2026N/A
2026N/A obj.subscribe('foo', function() {
2026N/A Y.info(notdefined);
2026N/A });
2026N/A
2026N/A obj.subscribe('foo', function() {
2026N/A Y.info('foo fired anyway!');
2026N/A });
2026N/A
2026N/A try {
2026N/A obj.fire('foo');
2026N/A } catch(e) {
2026N/A Y.warn('fire() error: ' + Y.Lang.dump(e.errors));
2026N/A }
2026N/A */
2026N/A
2026N/A //if (Object.prototype.hasOwnProperty) {
2026N/A //alert('asdf');
2026N/A //}
2026N/A //window.blah ="ad"
2026N/A //alert(window.hasOwnProperty('blah'));
2026N/A //alert(window.hasOwnProperty('document'));
2026N/A
2286N/A //alert(Y.object.owns(window, 'blah'));
2286N/A
2286N/A var a = [
2026N/A 1,
2026N/A 2,
2026N/A ];
2026N/A
2286N/Avar handle;
2286N/Afunction handleClick(){
2286N/A Y.log(handle);
2286N/A}
2286N/A
2286N/A/*
2286N/A
2286N/Avar body = Y.Node.get("body");
2286N/Ahandle = body.on("click", handleClick);
2286N/A*/
2026N/A
2026N/A//click to confirm it's attached
2026N/A
2026N/A// body.detach("click", handleClick);
2026N/A
2026N/A// handle.detach();
2091N/A
2026N/A//click again, will still show the alert
2026N/A
2026N/A// for (var i in window) {
2026N/A // Y.log(i);
2026N/A// }
2026N/A
2026N/A//A function that pops up a "Hello World" alert:
2026N/Avar helloWorld = function(e) {
2026N/A Y.log("helloWorld function firing.", "info", "example");
2026N/A alert("Hello World!");
2026N/A}
2026N/A
2026N/A/*
2026N/A
2026N/A//subscribe the helloWorld function as an event
2458N/A//handler for the click event on the container
2458N/A//div:
2026N/AY.on("click", helloWorld, "#container");
2026N/A*/
2026N/A
2026N/A
2026N/A//A function that pops up an alert and
2026N/A//prevents the default behavior of the event
2026N/A//for which it is a handler:
2026N/Avar interceptLink = function(e) {
2026N/A // e.preventDefault();
2026N/A alert('asdf');
2026N/A e.halt();
2286N/A Y.log("You clicked on the second YUI link.", "info", "example");
2286N/A alert("You clicked on the second YUI link. Because *preventDefault* was called, this link will not navigate away from the page.");
2286N/A}
2026N/A
2026N/A//subscribe our interceptLink function
2026N/A//as a click handler for the second anchor
2026N/A//element:
2026N/AY.on("click", interceptLink, "#secondA");
2026N/A
2026N/AY.Event._attach(["click", function(e) {
2091N/A console.log('native event -->');
2091N/A console.log(e);
2026N/A console.log('<-- native event');
2026N/A}, "#secondA"], { facade: false } );
2026N/A
2026N/A// Y.Event.onAvailable("#secondA", function() {
2026N/A// Y.log('#secondA is READY');
2026N/A// });
2026N/A
2026N/AY.on('blah|available', function() {
2026N/A Y.log('#secondA is READY');
2026N/A Y.log(arguments);
2026N/A}, '#secondA', Y, 1, 2);
2026N/A
2026N/A
2026N/A//log message to indicate that the example is ready:
2026N/AY.log("When you begin interacting with the example at left, you'll see log messages appear here.", "info", "example");
2026N/A
2026N/AY.on('windowresize', function(e) {
2026N/A Y.log('window resize');
2026N/A});
2026N/A
2026N/A // Y.on('resize', function(e) {
2026N/A // alert('resized');
2026N/A // });
2026N/A
2026N/A});
2026N/A
2026N/A</script>
2026N/A
2026N/A<div id="container">new msgs</div>
2286N/A
2026N/A<p>
2215N/A<a href="http://developer.yahoo.com/yui" id="firstA">The YUI Library. (Link navigates away from page.)</a>
2215N/A</p>
2215N/A
2026N/A<p>
2026N/A<a href="http://developer.yahoo.com/yui" id="secondA">The YUI Library. (Link's default behavior is suppressed.)</a>
2458N/A</p>
2286N/A
2215N/A <form>
2026N/A <input type="radio" id="radio1" name="radiocollection[]" />
2026N/A </form>
2026N/A</body>
2026N/A</html>
2026N/A