js動態加入的DIV中的onclick事件簡單實例

最簡單的是這樣：

<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>

   

上面的方法其實原理都一樣，都是定義onclick 屬性的值。值得注意的是，如果多次定義obj.onclick，例如：obj.onclick=method1; obj.onclick=method2; obj.onclick=method3，那麼只有最後一次的定義obj.onclick=method3才生效，前兩次的定義都給最後一次的覆蓋掉了。

再看 IE 中的 attachEvent：

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick=function(){alert(this.value)};
</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.attachEvent("onclick",method1);
bObj.attachEvent("onclick",method2);
bObj.attachEvent("onclick",method3);
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事件簡單實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持PHP中文網。

更多js動態添加的DIV中的onclick事件簡單實例相關文章請關注PHP中文網！