當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JS绑定事件三种方式

發布時間：2023/12/20 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 JS绑定事件三种方式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

三種方式

1、在DOM中直接綁定
2、在JS代碼中直接綁定
3、使用事件監聽函數綁定事件
一、在DOM中直接綁定
也就是直接在html標簽中通過 onXXX=“” 來綁定。舉個例子：

<input type="button" value="點我呦" onclick="alert("hello world!")"/>  <input type="button" value="點我呦" onclick="testAlert()"> <script type="text/javascript">function testAlert(){alert("hello world!");} </script>

缺點：

不利于行為和結構相分離，耦合度太高，不建議在項目中使用。
在遇到相同類型的事件時，只會去處理第一個事件，而忽略后續的事件。
傳統方法只會在事件冒泡中運行，而非捕獲和冒泡
事件對象參數(e)僅非IE瀏覽器可用

優點：

非常簡單和穩定，可以確保它在你使用的不同瀏覽器中運作一致
處理事件時，this關鍵字引用的是當前元素

事件解綁
對象.on事件名字=null;

<body> <input type="button" value="第一個按鈕" id="btn1"/> <input type="button" value="干掉第一個按鈕的事件" id="btn2"/> <div id="dv"></div> <script>document.getElementById("btn1").onclick = function () {console.log("碼仙");};document.getElementById("btn2").onclick = function () {document.getElementById("btn1").onclick = null;}; </script> </body>

二、JavaScript代碼中直接綁定

在JavaScript中通過查找DOM對象，對其綁定，elementObject.οnclick=function(){} 的格式，舉例如下：

<input type="button" value="點我呦" id="demo"> <script type="text/javascript">document.getElementById("demo").onclick=function testAlert(){alert("hello world!");} </script>

優點

將行為與結構分離開了
非常簡單和穩定，可以確保它在你使用的不同瀏覽器中運作一致
處理事件時，this關鍵字引用的是當前元素

缺點：

傳統方法只會在事件冒泡中運行，而非捕獲和冒泡
一個元素一次只能綁定一個事件處理函數。新綁定的事件處理函數會覆蓋舊的事件處理函數
事件對象參數(e)僅非IE瀏覽器可用

事件解綁
對象.on事件名字=null;

三、通過事件監聽函數綁定
??????使用 attachEvent(IE方式) 和 addEventListenter(W3C方式) 的好處就是，可以多次的進行事件的綁定，不向原始的方法那樣，前面綁定的事件將會被后面的綁定的事件所覆蓋，最后只能執行后面所綁定的函數。

從網上找到了一個兼容的好辦法，相比較if…else…語句，這個方法用的是

function addEvent(obj,type,handle){try{obj.addEventListener(type,handle,false);}catch(e){try{obj.attachEvent('on'+type,handle);}catch(e){obj['on' + type]=handle;//早期瀏覽器}} }

W3C綁定的優點

1.該方法同時支持事件處理的捕獲和冒泡階段。事件階段取決于addEventListener最后的參數設置：false (冒泡) 或 true (捕獲)。
2.在事件處理函數內部，this關鍵字引用當前元素。
3.事件對象總是可以通過處理函數的第一個參數(e)捕獲。
4.可以為同一個元素綁定你所希望的多個事件，同時并不會覆蓋先前綁定的事件

W3C綁定的缺點

IE不支持，你必須使用IE的attachEvent函數替代。

IE方式的優點

可以為同一個元素綁定你所希望的多個事件，同時并不會覆蓋先前綁定的事件。

IE方式的缺點

1.IE僅支持事件捕獲的冒泡階段
2.事件監聽函數內的this關鍵字指向了window對象，而不是當前元素（IE的一個巨大缺點）
3.事件對象僅存在與window.event參數中
4.事件必須以ontype的形式命名，比如，onclick而非click
5.僅IE可用。你必須在非IE瀏覽器中使用W3C的addEventListener

解除綁定

1.綁定事件對象.addEventListener(“沒有on的事件類型”,命名函數,false);
解綁事件對象.removeEventListener(“沒有on的事件類型”,函數名字,false);
2.綁定事件對象.attachEvent(“on事件類型”,命名函數);
解綁事件對象.detachEvent(“on事件類型”,函數名字);

四、說說JQuery中綁定事件的幾種方法。

主要有on()、bind()、live()、delegate()等幾種，相對應的解綁就是off()、unbind()、live()、undelegate();

1 on()、bind()、live()、delegate()中除了bind()，其他的都可以給后來追加的元素對象添加綁定事件。

2 這幾種方法中各自有對應支持的JQuery版本。

3 在給動態添加的頁面元素綁定事件時，通常用on()方法。

具體的更多了解，可以點擊這個鏈接:http://www.cnblogs.com/DemoJin/p/4794372.html。
JavaScript之事件的綁定與移除:http://www.cnblogs.com/Ayinger/p/6723730.html

//阻止事件冒泡// IE特有的,谷歌支持,火狐不支持window.event.cancelBubble=true;//阻止事件冒泡//谷歌和火狐支持event.stopPropagation();

總結

以上是生活随笔為你收集整理的JS绑定事件三种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：电脑在使用b站的时候插入耳机，耳机没有声
下一篇：关于电子工资条8大问题，搞懂这些不再纠结