Node Basics
//首先写一个HTML;
<div id="demo">
<p><em>Whose child am I?</em></p>
</div>
//然后通过YUI实例的one方法获得Node实例
var node = Y.one('#demo p');
访问Node的属性 可以通过 set 或者get方法
一般来说,Node的属性都是一些直接来自DOM节点内的一些String,numbers或者booleans,还有一些返回值是Node或者NodeList实例代表其返回的是其它DOM节点.
YUI().use('node', function(Y) {
var node = Y.one('#demo p');
var onClick = function(e) {
var tag = e.target.get('parentNode.tagName'); // e.target === node || #demo p em
e.currentTarget.one('em').setContent('I am a child of ' + tag + '.'); // e.currentTarget === node
};
node.on('click', onClick);
});
DOM Methods
所有的普通的Node实例都可以使用DOM方法.这些方法有add,remove,retrieve其它节点.
下面的例子用一个handler实现当click触发时将一个节点移到一个新的list里;
YUI().use('node', function(Y) {
var onClick = function(e) {
var node = Y.one('#demo2').appendChild(e.currentTarget);
node.addClass('yui-pass');
};
Y.all('#demo li').on('click', onClick);
});
<ul id="demo">
<li>lorem</li>
<li>ispum</li>
<li>dolor</li>
<li>sit</li>
</ul>
<ul id="demo2">
<li>foo</li>
</ul>
<script type="text/javascript">
YUI().use("node", function(Y) {
var onClick = function(e) {
var node = Y.one('#demo2').appendChild(e.currentTarget);
node.addClass('yui3-pass');
};
Y.all('#demo li').on('click', onClick);
});
NodeList Events
下面的实例展示了以NodeList
<ul id="demo">
<li><p>i am <em>lorem</em></p></li>
<li><p>i am <strong>ispum</strong></p></li>
</ul>
<script type="text/javascript">
YUI().use("node", function(Y) {
var onClick = function(e) {
e.currentTarget.setContent(e.type + ': ' + e.target.get('tagName')); // e.currentTarget === #demo li
this.addClass('yui3-pass'); // this defaults to the NodeList instance
};
Y.all('#demo li').on('click', onClick);
});
</script>
显然 e.currentTarget.setContent中,context就是NodeList实例,所以this指向的就是NodeList 实例。
NodeList
通过all方法获取NodeList实例
var nodes = Y.all('#demo li');
NodeList的属性访问和Node一样,简单的属性(strings,numbers,booleans)都是直接从HTML元素里访问的。如果返回值是Node实例则代表返回的是HTML元素本身。
<ul id="demo">
<li>lorem</li>
<li>ispum</li>
<li>dolor</li>
<li>sit</li>
</ul>
<script type="text/javascript">
YUI().use("node", function(Y) {
var nodes = Y.all('#demo li');
var onClick = function(e) {
this.setContent('thanks from all of us!'); // this === nodes
e.currentTarget.setStyle('backgroundColor', 'green'); // e.currentTarget === #demo li
};
nodes.on('click', onClick);
});
</script>
上面的例子中nodes.on('clicl',onClick);NodeList里面所有元素都随着handler的触发而改变。
Delegating Node Events
把list级别的listerner授权到item级别来执行;
<ul id="demo">
<li><em>click me if you don't mind...</em></li>
<li><em>click me if you don't mind...</em></li>
<li><em>click me if you don't mind...</em></li>
<li><em>click me if you don't mind...</em></li>
</ul>
<script type="text/javascript">
YUI().use("selector-css3", "node", function(Y) {
var nodes = Y.all('#demo li');
var onClick = function(e) {
e.currentTarget.addClass('yui3-pass'); // e.currentTarget === #demo li
e.target.setContent('thanks for the click!'); // e.target === #demo li or #demo li em
e.container.setStyle('border', '5px solid blue'); // e.container === #demo
nodes.filter(':not(.yui3-pass)').setContent('Click me too please!');
};
Y.one('#demo').delegate('click', onClick, 'li');
});
显然通过Y.one('#demo').delegate('click', onClick, 'li');可以把click授权到Item级别来触发;