版权声明:本文为博主原创文章,若文章中有错误请联系博主改正,请不要恶意留言(不喜欢请绕道)。欢迎大家转载,转载时请注明原文地址:https://blog.csdn.net/qq_37674616/article/details/82470350
目录
事件
事件,就是文档或浏览器窗口中发生的一些特定交互瞬间。
事件的三要素
事件目标
事件处理程序
事件对象
例如 btn.function(event){} 对该用事件来代码分析,则 btn为事件目标 ,事件处理程序为 function函数, 事件对象 event
事件流
事件流描述的是从页面中接收事件的顺序。事件流可分为冒泡事件流和捕获事件流。
冒泡事件流
该事件流又称IE事件流,该事件流是从内向外传播(即逐级向上传播)
下图此时事件会按照如下顺序传播:
handle1 -->handle2 -->handle3 -->handle4
<html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
<script>
div.onclick=handle1;
body.onclick=handle2;
html.onclick=handle3;
document.onclick=handle4;
function handle1(){}
function handle2(){}
....
</script>
捕获事件流
该事件流又称NetScape Communicator(网景).
思想:是不太具体的节点应该更早接受到事件,而最具体的节点应该最后接受到事件。即事件是从外到内传播
此时事件会按照如下顺序传播:
handle4 -->handle3 -->handle2 -->handle1
<html>
<head>
<title></title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>
<script>
div.onclick=handle1;
body.onclick=handle2;
html.onclick=handle3;
document.onclick=handle4;
function handle1(){}
function handle2(){}
....
</script>
DOM事件流
该事件分三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。首先从事件捕获阶段开始,然后到实际的目标接受事件,最后为事件冒泡阶段。
事件处理程序
DOM0级事件处理程序
该处理程序不存在兼容性问题。
缺点:
1.是要等待html页面加载完毕后才能操作
2.只能添加一个事件处理程序(会覆盖)
形式:
var btn=document.getElementById('myBtn');
btn.onclick=function(){
console.log('我不会被执行');
}
btn.onclick=function(){
console.log(this.id); //"myBtn"
}
//删除绑定
btn.onclick=null;
**:DOM0级中的this指向调用者即事件目标
DOM2级事件处理程序
该事件处理程序存在兼容性问题,一般分为IE8版以下和非IE8版本以下
优点:可以添加多个事件处理函数(执行顺序有差异的区别对待)
非IE8版本以下
定义两个方法用于处理指定和删除事件程序:addEventListener()和removeEventListener().
addEventListener(type,handle,boolean)
参数
type:要处理事件的事件名
handle:事件处理的函数
boolean:true/false
true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用处理程序。默认为false
removeEventListener(type,handle,boolean)
参数
type:要处理事件的事件名
handle:事件处理的函数
boolean:true/false
true表示在捕获阶段调用事件处理程序,false表示在冒泡阶段调用处理程序。默认为false
事件执行顺序
var btn=document.getElementById('myBtn');
btn.addEventListener('click',function(){
console.log(this.id);
});
btn.addEventListener('click',function(){
console.log("hello");
});
**:从上到下执行顺序执行即先打印ID然后"hello";
匿名函数不能解绑事件
var btn=docuemnt.getElementById('myBtn');
btn.addEventListener('click',function(){
console.log(this.id);
});
btn.removeEventListener('click',function(){ //没有用!
console.log('事件被移除');