jquery繫結事件以及js繫結事件

jquery繫結事件:

bind事件

onelive

delegate

on對應的**：

//jquery繫結click事件的寫法start

$("#click1").bind("click",function() );

$("#click2").one("click",function() );

/*$("#click3").live("click",function() );*/

$("#click4").delegate(".click4child","click",function() );

$("#click5").on("click",".click5child",function() );

js繫結事件：

addeventlistener

click7

click8

child1

child2

clild3

child1

child2

對應的**：

//js事件繫結寫法

document.getelementbyid("click6").addeventlistener("click",function() );//最後乙個引數預設是false,表示冒泡;為true表示捕獲

document.getelementbyid("click7").onclick = function()

function click8()

var click9 = document.getelementbyid("click9");

var click9child1 = document.getelementsbyclassname("click9child1")[0];

var click9child2 = document.getelementsbyclassname("click9child2")[0];

var click9child3 = document.getelementsbyclassname("click9child3")[0];

click9child1.addeventlistener("click",function() );

click9child2.addeventlistener("click",function() ,true);

click9child3.addeventlistener("click",function(event) );

// 在做上述問題的時候，如果要點選child3時，出現的順序是2,3,1.為什麼呢？child1表示的是冒泡，child2表示的是捕獲，child3表示的是冒泡。

// 要點選child3,先看它父級的父級,從上到下的順序是(child1,child2,child3)，因為不管什麼時候先執行捕獲然後執行冒泡，所以結果排出來的順序是(child2,child3,child1)。

// 如果要點選child2，同樣先看父級的父級,從上到下的順序是(child1,child2),所以結果排出來的順序是(2,1)

//ie8以下不支援以上寫法

//下面我們來看支援ie的繫結事件的寫法

var click10 = document.getelementbyid("click10");

var click10child1 = document.getelementsbyclassname("click10child1")[0];

var click10child2 = document.getelementsbyclassname("click10child2")[0];

click10.attachevent("onclick",function() );

click10child1.attachevent("onclick",function() );

click10child2.attachevent("onclick",function(event) );

child1

child2

在寫**之前引用乙個公共檔案eventutil.js,檔案如下：

var eventutil = else if (element.attachevent) else

},stoppropagation: function(event) else  }}

var click11 = document.getelementbyid("click11");

var click11child1 = document.getelementsbyclassname("click11child1")[0];

var click11child2 =document.getelementsbyclassname("click11child2")[0];

eventutil.addhandler(click11,"click",function() );

eventutil.addhandler(click11child1,"click",function() );

eventutil.addhandler(click11child2,"click",function(event) );

這些我只是寫了給元素新增事件以及阻止冒泡的方法，後續如果有新增，會新增。如果有問題，麻煩指出。

js繫結事件和解綁事件

在js中繫結多個事件用到的是兩個方法 attachevent和addeventlistener,但是這兩個方法又存在差異性 attachevent方法 只支援ie678,不相容其他瀏覽器 addeventlistener方法 相容火狐谷歌,不相容ie8及以下 addeventlistener方法 d...

jquery中事件重複繫結以及解綁問題

一般的情況下，對於這種情況，我們常規的思路是，先解綁，再繫結，如下 selector unbind click bind click function 當這樣會有乙個問題，unbind會把其之前的所有的click事件都unbind掉，可能會影響其他的繫結，有如下有兩種方法解決 第一種 使用事件命令空...

jquery 事件 繫結與解綁

一 on 的多事件繫結 elem on mouseover mouseout function 多個事件繫結乙個函式 elem on mouseout function 目標節點 點選在這個元素上 div on click p fn 事件繫結在最上層div元素上，當使用者觸發在a元素上，事件將往上冒...