JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件
JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件
# 前言
DOM0 级事件就是 html 元素添加onclick 属性，或者给元素添加onclick事件，但是同元素的同一事件只能绑定一个函数，否则后面的事件会覆盖前面的事件。 如果我们想一个元素绑定多次同一个时间，比如我想绑定2个onclick事件，2个都要生效，于是就有了DOM2 级事件，通过addEventListener绑定的事件。 为什么没有 DOM1 级事件，我也很好奇，DOM1 一般只有设计规范没有具体实现，所以一般没有所谓的DOM1 级事件。
DOM0 级事件
DOM0 级事件就是前面讲到的事件绑定有2种方式，在HTML 中 或在 Script 中绑定事件
- 在页面元素中
onclick="" - scrip 中给元素添加
onclick属性
绑定事件
<body>
<h1>onclick 点击示例</h1>
<button id="btn1" onclick="myFunc();">点我1</button>
<button id="btn2">点我2</button>
<script>
function myFunc() {
alert('点我 do something...')
}
// 绑定btn2
document.getElementById('btn2').onclick = myFunc;
</script>
</body>取消事件
事件属性设置为null可以取消对应的事件
<body>
<h1>onclick 点击示例</h1>
<button id="btn1" onclick="myFunc();">点我1</button>
<button id="btn2">点我2</button>
<script>
function myFunc() {
alert('点我 do something...')
}
// 绑定btn2
document.getElementById('btn2').onclick = myFunc;
// 取消btn1 的onclick事件
document.getElementById('btn1').onclick = null;
</script>
</body>重复绑定
如果对同一个事件绑定2次，那么后面的会覆盖前面的
<body>
<h1>onclick 点击示例</h1>
<button id="btn1" onclick="myFunc();">点我1</button>
<button id="btn2">点我2</button>
<script>
function myFunc() {
alert('点我 do something...')
}
function myFunc2() {
alert('第二个绑定函数 do something...')
}
// btn1 再绑定一次
document.getElementById('btn1').onclick = myFunc2;
</script>
</body>后面的会覆盖前面的，不会2个都生效。
DOM2 级事件
如果我们想 2 个事件都生效，用到 DOM2 级事件，通过 addEventListener 绑定的事件。
addEventListener添加监听语法
element.addEventListener(event, function, useCapture);参数
- event 是事件的类型，不要使用 “on” 前缀。如使用 “click” ,而不是使用 “onclick”。
- function 是事件触发后调用的函数。
- useCapture 该参数是可选的, 是个布尔值用于描述事件是冒泡还是捕获， 默认值为 false, 即冒泡传递。
addEventListener添加监听事件
addEventListener添加监听事件
- 第一个参数传事件名称（不需要on开头了）
- 第二个参数传需执行的函数 <body> <h1>onclick 点击示例</h1> <button id="btn1" >点我1</button> <script> function myFunc() { alert('点我 do something...') } // btn1 绑定一次 document.getElementById('btn1').addEventListener('click', myFunc); </script> </body>
removeEventListener 移除事件
如果我们想对前面的事件移除，用removeEventListener 移除事件， 事件名称和函数名称需完全一致。
<body>
<h1>onclick 点击示例</h1>
<button id="btn1" >点我1</button>
<script>
function myFunc() {
alert('点我 do something...')
}
// btn1 绑定一次
document.getElementById('btn1').addEventListener('click', myFunc);
// 移除事件
document.getElementById('btn1').removeEventListener('click', myFunc)
</script>
</body>需要注意的是，事件处理函数是匿名函数，则无法被移除！
addEventListener 同一事件监听多个
给同一个元素的同一个事件，添加多个监听事件
<body>
<h1>onclick 点击示例</h1>
<button id="btn1" >点我1</button>
<script>
function myFunc() {
alert('点我 do something...')
}
function myFunc2() {
alert('第二个绑定函数 do something...')
}
// btn1 绑定一次
document.getElementById('btn1').addEventListener('click', myFunc);
// btn1 再绑定一次onclick
document.getElementById('btn1').addEventListener('click', myFunc2);
</script>
</body>同样的，也可以使用removeEventListener移除当前元素的某一事件行为的多个不同方法
事件冒泡和事件捕获
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。
如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 捕获阶段 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：<div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
在 冒泡阶段 中，内部元素的事件会先被触发，然后再触发外部元素，即：<p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
addEventListener() 方法可以指定 useCapture 参数来设置传递类型：
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
addEventListener( event, function, useCapture);腾讯云开发者
