JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件
Posted 上海-悠悠
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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);
以上是关于JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件的主要内容,如果未能解决你的问题,请参考以下文章