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级事件的区别介绍