復制代碼 代碼如下:
var obj = document.getElementById("name");
function clickMe() {
alert(this.value);
this.value += "!!!!";
alert(this.value);
}
var ActionBinder = function() {//定義一個類
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//注冊doms
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;//注冊一個動作
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//注冊doms的動作
var binder = new ActionBinder();//按照ActionBinder的方法新建一個類
binder.registerDOM(obj);
binder.registerAction(clickMe);
binder.bind();
先上一段用js寫的面向對象的代碼，先建立一個ActionBinder的類，寫法上也類似於java；因為js是基於html的dom對象來操作html的內容，在類中定義一個注冊dom的方法registerDOM，用prototype將該方法原型化，方便調用；另外再增加一個注冊事件的方法registerAction，也用prototype方法原型化；最後再用一個原型化的動作bind將已注冊的dom和已注冊的事件綁定在了一起，並執行。
再上一段原始的js代碼片段:
Code
復制代碼 代碼如下:
<body>
<script>
document.onload= function(){
var obj = document.getElementById("name");
obj.onclick = function(){alert(this.value);}
}
</script>
<input type="text" id="name" />
</body>
代碼也實現了要的效果，對於一些簡單的應用，上面那段效果能夠滿足，但對於比較復雜的一些程序，應用起來就比較麻煩，代碼上寫起來也較繁瑣;如代碼片段
Code
復制代碼 代碼如下:
<body>
<script>
document.onload= function(){
obj1 = document.getElementById("name1");
obj2 = document.getElementById("name2");
obj3 = document.getElementById("name3");
obj1.onclick = function(){alert(this.value);}
obj2.onclick = function(){alert(this.value);}
obj3.onclick = function(){alert(this.value);}
}
</script>
<input type="text" id="name1" value="111" />
<input type="text" id="name2" value="222" />
<input type="text" id="name3" value="333" />
</body>
或者
Code
復制代碼 代碼如下:
<body>
<script>
function clickMe(){alert(this.value);}
</script>
<input type="text" id="name1" value="111" onclick="return clickMe()" />
<input type="text" id="name2" value="222" onclick="return clickMe()" />
<input type="text" id="name3" value="333" onclick="return clickMe()" />
</body>
當然上面兩段代碼也有其他一些更簡單的寫法，總的來說還是出現很多冗余的代碼。
用面向對象的方法寫就比較靈活，如
Code
復制代碼 代碼如下:
<body>
<script>
window.onload = function() {
var objs = document.getElementsByTagName("input");
function clickMe() {
alert(this.value);
}
var ActionBinder = function() {//定義一個類
}
ActionBinder.prototype.registerDOM = function(doms) {
this.doms = doms;//注冊doms
}
ActionBinder.prototype.registerAction = function(handlers) {
this.handlers = handlers;//注冊一個動作
}
ActionBinder.prototype.bind = function() {
this.doms.onclick = this.handlers
}//注冊doms的動作
for (var i=0;i<objs.length;i++ ){
var binder = new ActionBinder();//按照ActionBinder的方法新建一個類
binder.registerDOM(objs[i]);
binder.registerAction(clickMe);
binder.bind();
};
}
</script>
<input type="text" id="name" value="111"/>
<input type="text" id="name1" value="222"/>
<input type="text" id="name2" value="333"/>
</body>
這樣就不會有冗余的代碼，而且js邏輯上也比較清爽，對於多個事件的綁定還有待研究。
