事件一般是用于浏览器和用户操作之间的交互,当用户执行某些特殊的操作时,浏览器给予反应,触发绑定的事件,事件流
,事件发生时会在元素节点和根节点之间按照约定的顺序传播,事件经过的所有节点都会受到事件的影响,这个传播过程被称为 DOM 事件流
函数事件
事件一般是用于浏览器和用户操作之间的交互,当用户执行某些特殊的操作时,浏览器给予反应,触发绑定的事件
事件流
,事件发生时会在元素节点和根节点之间按照约定的顺序传播,事件经过的所有节点都会受到事件的影响,这个传播过程被称为 DOM 事件流
true 是捕获,false 是冒泡,默认为冒泡事件
1.addEventListener()--添加事件监听函数
给元素添加一个事件,假如有多个事件,不会覆盖,会依次执行
<div id="demo">dom</div>
<script>
document.getElementById('demo').addEventListener("click", myfun)
document.getElementById('demo').addEventListener("click", myfun1)
function myfun() {
console.log('事件监听函数')
}
function myfun1() {
console.log('addEventListener')
}
</script>
注意: 1.这里有一个细节,addEventListener() 里面有两个参数,第一个表示触发的条件,第二个表示触发的事件 正常情况下,第二个参数直接写函数名并且不加参数
()
,如果加了参数()
则表示立即执行,不需要触发第一个参数要求的条件
2.在这里绑定事件的时候,事件名不能和定义的变量名一样,否则无效
2.removeEventListener()--移除事件监听函数
下面这个 demo,当鼠标在 div 中移动的时候,出现随机数,点击按钮后,移除事件监听函数
<!-- css -->
<style>
#demo {
width: 100px;
height: 100px;
border: 1px solid #000;
}
</style>
<!-- html -->
<div id="demo"></div>
<input type="button" value="点击移除" onclick="remove()">
<div id="show"></div>
<!-- js -->
<script>
document.getElementById('demo').addEventListener("mousemove", myfun)
function myfun() {
document.getElementById('show').innerHTML = Math.random()
}
function remove() {
document.getElementById('demo').removeEventListener("mousemove", myfun)
}
</script>
3.利用事件的捕获和冒泡做点事情
addEventListener() 和 removeEventListener() 其实拥有三个参数,刚才说过了,第一个表示触发条件,第二个表示触发事件,第三个参数正常情况下可以省略,但是要知道它代表的意思
用布尔值来表示,true 或者 false,默认是 false
- true 表示在捕获阶段调用事件处理程序
- false 表示在冒泡阶段调用事件处理程序
根据图片可以看出,捕获阶段要先于冒泡阶段,因此,true 事件要先于 flase 事件触发,多个 true 事件按顺序触发,多个 false 事件,写在后面的先触发
结论:写在前面的 true 事件 > 写在后面的 true 事件 > 写在后面的 false 事件 > 写在前面的 false 事件
因此,利用这个参数,可以控制同一个元素的不同事件触发的顺序
<div id="out">
<p>最外面</p>
<div id="middle">
<div id="inner">最里面</div>
</div>
</div>
<!-- 第一种情况 -->
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击 inner 时,触发顺序为:inner-------middle------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
<!-- 第二种情况 -->
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击 inner 时,触发顺序为:out------middle-------inner
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
<!-- 第三种情况 -->
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击 inner 时,触发顺序为:out------inner-------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
<!-- 第四种情况 -->
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击 inner 时,触发顺序为:out-------middle------inner
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
<!-- 第五种情况 -->
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击 inner 时,触发顺序为:middle-------inner------out
out.addEventListener('click',function(){alert("我是最外面的");},false);
middle.addEventListener('click',function(){alert("我是中间的");},true);
inner.addEventListener('click',function(){alert("我是最里面的");},false);
</script>
<!-- 第六种情况 -->
<script>
var out = document.getElementById('out');
var middle = document.getElementById('middle');
var inner = document.getElementById('inner');
//点击 inner 时,触发顺序为:out-------inner------middle
out.addEventListener('click',function(){alert("我是最外面的");},true);
middle.addEventListener('click',function(){alert("我是中间的");},false);
inner.addEventListener('click',function(){alert("我是最里面的");},true);
</script>
4.事件处理程序
- HTML 事件处理程序
<button onclick="test()">测试</button>
<script>
function test() {
alert("HTML 事件处理程序");
}
</script>
1.优点:事件处理程序中的代码,能够访问全局作用域中的任何变量 2.缺点:时差问题、扩展的作用域链在不同浏览器中会导致不同结果、html 代码与 js 代码高度耦合
- DOM0 级事件处理程序
<button id="btn">测试</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function test() {
alert("DOM0 级事件处理程序");
}
</script>
1.优点:代码简单,浏览器兼容性好,解决了 html 代码和 js 代码的高度耦合问题 2.缺点:一个元素只能绑定一个事件处理函数,只会在事件冒泡中运行
- DOM2 级事件处理程序
该级别的事件处理程序,运用的就是事件捕获和冒泡机制
<button id="btn">测试</button>
<script>
var btn = document.getElementById("btn");
// 事件监听
btn.addEventListener("click", function() {
alert("DOM2 级事件处理程序,我在捕获阶段执行");
}, true);
btn.addEventListener("click", function() {
alert("DOM2 级事件处理程序,我在冒泡阶段执行");
}, false);
// 移除事件监听
var fun = function() {
alert("我要被移除了");
}
btn.addEventListener("click", fun, false);
btn.removeEventListener("click", fun, false);
</script>
1.优点:同时支持事件处理的捕获和冒泡阶段,并且一个元素可以绑定多个处理函数 2.缺点:IE 不支持