一种安全的给页面组件添加事件的方法

一种安全的给页面组件添加事件的方法

通常的网页编程原则是把形式，内容和表现分开，这样页面组件的事件处理就转移到了
window.onload或是Dom.onready中,写在一起。

有时，如果对页面组建进行删除或是更改id，会导致js出现错误，找不到组件，结果下面的正确js也无法执行了。
在进行页面调整阶段这个问题很常见。

当然，修改过来是正确的做法，另外我们还可以通过组件检测来做，这样的好处是页面调整后，js无需改变。
以下代码供参考：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
  < head >
   < title >  New Document  </ title >
   < meta  name ="Generator"  content ="EditPlus" >
   < meta  name ="Author"  content ="" >
   < meta  name ="Keywords"  content ="" >
   < meta  name ="Description"  content ="" >
  </ head >

  < body >
   < button  id ="btn1" > BTN1 </ button >
   < br />
    < button  id ="btn2" > BTN2 </ button >
  </ body >
</ html >

< script  type ="text/javascript" >
<!--

if (document.getElementById( " btn1 " )){
    document.getElementById( " btn1 " ).onclick = function (){
        alert( 1 );
    };
}

if (document.getElementById( " btn2 " )){
    document.getElementById( " btn2 " ).onclick = function (){
        alert( 2 );
    };
}

// -->
</ script >