js 事件繫結

2022-08-22 14:27:09 字數 1526 閱讀 2943

事件繫結的方式

1.  dom  元素行內繫結

<

div

onclick

="alert(1)"

>

div>

2. js on+eventtype

document.onclick =function()

3. addeventlistener

document.getelementbyid("mybtn").addeventlistener("click", myfunction);

function

myfunction()

4.addevent

addevent( document.getelementbyid('foo'), 'click', dosomething );

5. attachevent

document.attachevent('click',function());

特點區別

dom  元素行內繫結

js on+eventtype

attachevent

addeventlistener

addevent

事件處理程式與html結構混雜在一起

由於該方法的事件函式是全域性的,很容易命名衝突

該方法限制了繫結事件處理的函式的次數

document.onclick =function()

document.onclick =function()

3會覆蓋2

繫結多個不會被覆蓋

可以繫結多個事件但不會被覆蓋

**函式內的this指向target本身

element.addeventlistener(event, function, usecapture

)removeeventlistener()

和addeventlistener的卻別 **函式this指向window

例子

document.onclick =function()

document.onclick =function()

document.onclick =function()

document.attachevent('click',function())

document.attachevent('click',function())

document.attachevent('click',function())

document.addeventlistener('click',function(),false)

document.addeventlistener('click',function(),false)

document.addeventlistener('click',function(),false)

33   2   1

1    2    3

js事件繫結

事件繫結,常見的是odiv.nclick function 這種方式繫結事件太單一,如果繫結多個,那麼最後乙個事件會覆蓋掉之前的,也就是說只執行最後一次繫結的事件,這裡要說的是addeventlistener方法,和ie下的attachevent方法 html 如下 box son1 son2 介面...

js 繫結事件

建立乙個js的繫結事件,而這個需要乙個addeventlistener事件。在js裡不要將事件寫在標籤裡 建立乙個canvas物件,並且繫結物件。發現出現test.html 26 uncaught typeerror cannot read property addeventlistener of ...

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

jquery繫結事件 bind事件 onelive delegate on對應的 jquery繫結click事件的寫法start click1 bind click function click2 one click function click3 live click function click...