dom0級事件
|
1
2
3
4
5
6
7
8
9
10
|
<a href=
"#"
id=
"hash"
onclick=
"fn();fn1();"
>
<button type=
"button"
>返回上面進行開通</button>
</a>
var
btn=$(
'#hash'
).get();
btn.onclick=
function
(){
alert(
'111'
);
};
btn.onclick=
function
(){
alert(
'222'
);
};
|
像上面把onclick寫在標簽內，都是dom0級事件，fn和fn1依次執行; 第二種獲取元素，綁定onclick事件也是dom0級，第二個會覆蓋第一個onclick，也會覆蓋行內的onclick，只會彈出222。
dom2級事件
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$(
'#hash'
).click(
function
(){
alert(
'jq的dom2級點擊第一次'
)
});
$(
'#hash'
).click(
function
(){
alert(
'jq的dom2級點擊第二次'
)
});
btn.addEventListener(
'click'
,
function
(){
alert(
'原生dom2級第一次click'
)
},
false
);
btn.addEventListener(
'click'
,
function
(){
alert(
'原生dom2級第二次click'
)
},
false
)
|
以上的綁定都屬於dom2級事件綁定，前面兩種都是jq的綁定方式，后面都是原生js的綁定方式，不會覆蓋，會依次執行jq的綁定方法和原生的綁定方法，這就是於dom0級的去別處；
dom0和dom2共存
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<a href=
"#"
id=
"hash"
onclick=
"fn();fn1();"
>
<button type=
"button"
>返回上面進行開通</button>
</a>
<script type=
"text/javascript"
>
function
fn(){
alert(
'ade'
);
}
function
fn1(){
alert(
'ade111'
);
}
var
btn=$(
'#hash'
).get(0);
btn.onclick=
function
(){
alert(
'111'
);
};
$(
'#hash'
).click(
function
(){
alert(
'jq的dom2級點擊第一次'
)
});
btn.addEventListener(
'click'
,
function
(){
alert(
'原生dom2級第一次click'
)
},
false
);
</script>
|
上面的例子有兩個dom0級和兩個dom2級綁定事件，js里面寫的dom0級會覆蓋行內的fn和fn1方法，但是js里面的dom0可以喝dom2共存，結果是彈出111 jq的dom2級點擊第一次 原生dom2級第一次click；
以上內容是JS中dom0級事件和dom2級事件的區別介紹