memo.xight.org

日々のメモ

Behaviour - Using CSS selectors to apply Javascript behaviours

Posted on | Tagged :

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/