memo.xight.org

Home > Changelogメモ > 2006-01 > 2006-01-31 > Behaviour - Using CSS selectors to apply Javascript behaviours

2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12
2002 : 01 02 03 04 05 06 07 08 09 10 11 12

2006-01-31

Behaviour - Using CSS selectors to apply Javascript behaviours

- Summary
onclick などのイベントで HTML を汚さずに記述する方法を提供．
CSS selectorを利用して，振る舞いを定義する．

- Before

<li>
	<a onclick="this.parentNode.removeChild(this)" href="#">
		Click me to delete me
	</a>
</li>

- After

<li>
<ul id="example">
	<li>
		<a href="/someurl">Click me to delete me</a>
	</li>
</ul>

var myrules = {
	'#example li' : function(el){
		el.onclick = function(){
			this.parentNode.removeChild(this);
		}
	}
};
 
Behaviour.register(myrules);

- Reference
Behaviour : Using CSS selectors to apply Javascript behaviours
http://bennolan.com/behaviour/
Prototype JavaScript Framework: Class-style OO, Ajax, and more
http://prototype.conio.net/