DOM0级同DOM2级
DOM0级分为两个:
一是写在标签内的onclick事件;
<button id="btn" onclick="alert('happy')">按钮</button>
二是在JS写的onclick = function() {}函数
document.getElementById("btn").onclick = function() { alert('thanks') };
DOM2级只有一个:
监听方法,原生方法addEventListener()用于添加事件处理程序(可以添加多个事件处理程序,触发时按照添加顺序依次调用);
removeEventListener()用于移除事件处理程序。
document.getElementById("btn").addEventListener("click", function(){alert("come on")} , false);
两个方法都有三个参数:
event:表示事件名,如click;
function: 事件处理程序函数;
useCapture: true表示捕获阶段调用,false表示在冒泡阶段调用。
DOM2级包含3个事件:事件捕获阶段、处于目标阶段、事件冒泡阶段
<div><a></a></div>,点击a
捕获阶段传播: document ——> div ——> a,然后发生在a。
冒泡阶段传播: a ——> div ——> document
区别:
如果定义两个DOM0级事件,会出现覆盖,DOM2不覆盖,会依次执行。DOM0和DOM2可以共存,不互覆盖。
<a href="#" id="hash" onclick="fn();fn1()">
<button>返回上面进行开通</button>
</a>
<!-- 以下四个script的结果是分开执行所得 -->
<!-- 内嵌DOM0:把onclick写在标签内,都是DOM0级事件,fn和fn1依次执行。 -->
<script>
var btn = $("#hash").get(0);
function fn() {
console.log('ade');
}
function fn1() {
console.log('ade111');
}
// ade
// ade111
</script>
<!--绑定onclick事件作为DOM0级,会覆盖行内onclick,也会覆盖前面的绑定事件-->
<script>
var btn = $("#hash").get(0);
btn.onclick = function () {
console.log("111");
}
btn.onclick = function () {
console.log("222");
}
function fn() {
console.log('ade');
}
function fn1() {
console.log('ade111');
}
// 222
</script>
<!--DOM2-->
<script>
var btn = $("#hash").get(0);
$("#hash").click(function() {
console.log("JQ的DOM2级点击第一次");
});
$("#hash").click(function() {
console.log("JQ的DOM2级点击第二次");
});
btn.addEventListener("click", function () {
console.log("原生DOM2级点击第一次");
}, false);
btn.addEventListener("click", function () {
console.log("原生DOM2级点击第二次");
}, false);
// JQ的DOM2级点击第一次
// JQ的DOM2级点击第二次
// 原生DOM2级点击第一次
// 原生DOM2级点击第二次
</script>
<!--DOM0和DOM2-->
<script>
// 作为DOM0级被调用
function fn() {
console.log('ade');
}
// 作为DOM0级被调用
function fn1() {
console.log('ade111');
}
// 作为DOM0级
var btn = $("#hash").get(0);
btn.onclick = function() {
console.log('111');
}
// DOM0
$('#hash').click(function() {
console.log('JQ的DOM2级点击第一次');
});
// DOM2
btn.addEventListener('click', function () {
console.log('原生DOM2级第一次click')
}, false);
// 111 (fn()、fn1()被覆盖)
// jq的DOM2级点击第一次
// 原生DOM2级第一次click
</script>