最簡單的是這樣：
<input type="button" onclick="alert(this.value)" value="我是 button" />
動態添加onclick事件：
<input type="button" value="我是 button" id="bu"><script type="text/javascript">var bObj=document.getElementById("bu");bObj.onclick= objclick;function objclick(){alert(this.value)};</script>如果使用匿名函數 function(){}，則如下面所示：
<input type="button" value="我是 button" id="bu"><script type="text/javascript">var bObj=document.getElementById("bu");bObj.onclick=function(){alert(this.value)};</script>上面的方法其實原理都一樣，都是定義 onclick 屬性的值。值得注意的是，如果多次定義 obj.onclick，例如：obj.onclick=method1; obj.onclick=method2; obj.onclick=method3，那么只有最后一次的定義obj.onclick=method3才生效，前兩次的定義都給最后一次的覆蓋掉了。
再看 IE 中的 attachEvent：
<input type="button" value="我是拉登" id="bu"><script type="text/javascript">var bObj = document.getElementById("bu");bObj.attachEvent("onclick",method1);bObj.attachEvent("onclick",method2);bObj.attachEvent("onclick",method3);function method1(){alert("第一個alert")}function method2(){alert("第二個alert")}function method3(){alert("第三個alert")}</script>執行順序是 method3 > method2 > method1 ，先進后出，與堆棧中的變量相似。需要注意的是attachEvent 中第一個參數是on開頭的，可以是 onclick/onmouseover/onfocus 等等
據說(未經確認驗證)在 IE 中使用 attachEvent 后最好再使用 detachEvent 來釋放內存
再看看 Firefox 中的的 addEventListener：
<input type="button" value="我是布什" id="bu"><script type="text/javascript">var bObj = document.getElementById("bu");bObj.addEventListener("click",method1,false);bObj.addEventListener("click",method2,false);bObj.addEventListener("click",method3,false);function method1(){alert("第一個alert")}function method2(){alert("第二個alert")}function method3(){alert("第三個alert")}</script>可以看到，在 ff 中的執行順序是 method1 > method2 > method3 ， 剛好與 IE 相反，先進先出。需要注意的是 addEventListener 有三個參數，第一個是不帶“on”的事件名稱，如 click/mouseover/focus等。
以上這篇js動態添加的DIV中的onclick事件簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
