事件基础:
1. 事件是一种通知机制。
2. 事件是按照事件类型进行匹配的。
事件侦听:
事件侦听对象.addEventListener("click",clickHandler);
function clickHandler(e){
//return 事件函数中不要使用return
}
注意:
- clickHandler只能是一个回调函数,不能直接执行(不能直接加括号)。
- 因为当收到事件时,执行该函数,如果加()表示立即执行,收到事件后就不会执行了。
- addEventListener这个方法并没有对于clickHandler函数的返回结果做处理,因此 clickHandler使用return无效。
- 这里clickHandler是不能传参的,clickHandler里面有且只有一个参数是event对象。
事件抛发:
var target=new EventTarget();
target.addEventListener("chilema",clickHandler);
var evt=new Event("chilema");//创建事件对象
target.dispatchEvent(evt);//派发事件(抛发事件)
注意:
- 分两种事件:系统派发事件,自定义派发事件。
- 侦听和派发的对象是同一个。
- 侦听和派发的事件类型完全相同。
- chilema就是这里事件类型,其实事件类型就是一个任意字符串。
- 系统派发的事件字符串是固定的,自定义派发的事件,字符串可以任意。
- EventTarget叫事件目标对象,Event实例的对象叫事件对象。侦听和派发的对象可以是DOM元素,也可以是EventTarget,或者继承EventTarget的类。
- 事件侦听回调函数,不能传参,因此事件回调函数中有且仅有一个参数,这个参数即为事件对象(e)。
事件传输基础基于两个:
- 事件目标对象注册侦听事件,必须先注册再侦听。
- 向事件目标对象派发事件对象
高内聚低耦合:
javascript
var obj={
a:function(){
document.addEventListener("b",this.b);
},
b:function(e){
var num=e.num+10;
var evt=new Event("a");
evt.num=num;
document.dispatchEvent(evt);
}
}
var obj1={
a:function(){
document.addEventListener("a",this.b);
var evt=new Event("b");
evt.num=2;
document.dispatchEvent(evt);
},
b:function(e){
console.log(e.num);
}
}
obj.a();
obj1.a();
事件原理:
事件原理三阶段
捕获 目标 冒泡
外 到达目标 内
| |
内 外
addEventListener(事件类型,事件回调函数,是否捕获阶段执行(默认false)||对象{once:true})//是否只执行一次
阻止事件冒泡:
e.stopPropagation();
e.cancelBubble=true;//IE8以下浏览器
阻止默认事件:
e.preventDefault();