网页载入后，为元素（div、img、text、button）动态添加javascript事件

每个html元素几乎都有诸如onclick、onblur、onchange等属性，用于调用javascript事件。在平常的网页设计中，如果只有一两个元素要添加javascript事件，通常把js的方法直接写到这些属性中；如果有很多元素都要调用javascript事件，一个个写显得比较麻烦，通常在网页载入后，用js代码动态添加，这样比较省事。

其实，用js代码动态添加元素的javascript事件，代码比较简单，几句代码就能实现。之前的写法常常要分W3C标准、ie和dom的浏览器，现在ie及主流浏览器也遵循W3C标准了，如果不考虑旧版本的浏览器，只写W3C标准的即可。

一、网页加载后，为div动态添加onclick单击事件

html代码：

<div>网页加载后，为div动态添加onclick单击事件</div>
  <div>不管网页中有多少个div，全都可以动态添加上单击事件</div>

javascript代码：

<script type="text/javascript">
  function AddOnclickOnload() {
    var divArr = document.getElementsByTagName("div");
    for (var i = 0; i < divArr.length; i++) {
    AddEvent(divArr[i], "click", hideDiv);
    }
  }

function hideDiv() {
  }
  function AddEvent(obj, eventType, functionName) {
    if(obj.addEventListener){
      obj.addEventListener(eventType, functionName, false);//W3C标准
    }
    else if(obj.attachEvent){
      obj.attachEvent("on" + eventType, functionName);//ie
    }
    else {
      obj["on" + eventType] = functionName;//dom
    }
  }
  AddOnclickOnload();//直接调用
  </script>

以是代码为页面中的所有div动态添加onclick单击事件，只需在 window.onload 事件中调用 AddOnclickOnload() 方法，或者直接调用也行。

值得注意的是，动态添加方法时，方法名称不要加引号，如 AddEvent(divArr[i], "click", hideDiv)，hideDiv 就没有加引号，如果加引号，则错误，单击没有反应。

二、网页加载后，为img动态添加onmouseover事件

html代码：

<img src="/images/test1.jpg" alt="网页加载后，为img动态添加onmouseover事件" />
  <img src="/images/test2.jpg" alt="网页加载后，为所有img图片动态添加鼠标响应事件" />

javascript代码：

function AddOnmouseoverForImgs() {
    var imgArr = document.getElementsByTagName("img");
    for (var i = 0; i < imgArr.length; i++) {
      AddEvent(imgArr[i], "mouseover", ScaleImg);
    }
  }

function ScaleImg() {
  }
  AddOnmouseoverForImgs();

三、网页加载后，为文本框text动态添加onblur事件

html代码：

<input type="text" name="nameId" maxlength="30" />
  <input type="text" name="Address" maxlength="100" />

javascript代码：

function AddOnblurForText() {
    var textArr = document.getElementsByTagName("input");
    for (var i = 0; i < textArr.length; i++) {
      if (textArr[i].type == "text") {
        AddEvent(textArr[i], "blur", CheckText);
      }
    }
  }

function CheckText() {
  }
  AddOnblurForText();

四、网页加载后，为按钮button动态添加onclick单击事件

html代码：

<input type="button" id="btnId" value=" 提 交 " />

javascript代码：

function AddOnclickForButton() {
    var obj = document.getElementById("btnId");
    AddEvent(obj, "click", submited);
  }
  function submited() {
  }
  AddOnclickForButton();

以上代码只是为一个button动态添加onclick单击事件，如果要为多个button动态添加，可以像上面的方法一样获取网页内或某个元素中的所有button，然后循环添加。