JS事件-event-知识整理

JS 事件(event)知识整理

事件流

1.定义:描述的是页面中接受事件的顺序;

2.分两类

  • 事件冒泡:是指由具体元素接收,然后向上级一直传递到最不具体的元素节点
  • 事件捕获:最不具体的即诶单先接受,而最具体的节点时最后接收事件

事件处理

1.html事件处理:直接加到html结构中

1
<div id="A" onclick="click()">BUTTON</div>

2.DOM 0级结构处理:把一个函数直接赋值给一个事件处理程序属性

1
2
3
target.onclick = function(){
alert(this);
}

3.DOM 2级结构处理:

addEventListener(type,function,useCapture)
1
2
3
function func(){
}
target.addEventListener('click',func,false);

4.IE事件处理

attachEvent
detachEvent
1
2
3
function func(){
}
target.attachEvent('onclick',func);

鼠标事件

  • mouseover:鼠标移动到元素上触发事件
  • mousemove:鼠标已经移动到元素上并且在元素区域移动
  • mousedown:点击鼠标的按键(左键,右键,滚轮)
  • mouseup:当设备弹起的时候
  • scroll:滑动滑动条的时候
  • mousewheel:滚动鼠标滚轮的时候触发
  • mouseout:移除目标元素后触发

事件注册(4个方法)

//除IE
target.addEventListener(type,listener,useCapture)
target.removeEventListener(type,listener,useCapture)
target:文档节点
type:字符串,事件名称,不含”on”,列子”click”,”mousedown”
istener:实现eventListener接口或者是javaScript的函数
usecCapture:true使用捕捉;false使用冒泡
//IE
target.attachEvent(type,listener)
target.detachEvent(type,listener)
target:文档节点
type:字符串,事件名称,含”on”,列子”onclick”,”onmousedown”
listener:实现eventListener接口或者是javaScript的函数

两者使用原理:对可执行的优先级不同

ele.attachEvent(“click”,method1);
ele.attachEvent(“click”,method2);
ele.attachEvent(“click”,method3);
执行顺序为method3>method2>method1;

ele.addEventListener(“click”,method1,false);
ele.addEventListener(“click”,method2,false);
ele.addEventListener(“click”,method3,false);
执行顺序为method1>method2>method3;

兼容的方法
1
2
3
4
5
6
7
8
9
10
11
var func = function(){};
addEvent(target,"load",func)
var addEvent = function(target,type,fun){
if(target.attach){
target.attach('on'+type,fun);
return;
}
if(target.addEventListener){
target.addEventListener(type,fun,false);
}
}

remove也如此

获取事件的对象和对象源
1
2
3
4
5
6
function eventHandler(e){
//获取事件对象
e = e || window.event; //IE和chrome下是window.event,FF下是e
//获取对象源
var target = e.target || e.srcElement;//IE和chrome下为e.srcElement FF下为target
}
取消事件默认行为
1
2
3
4
5
6
7
8
9
10
11
function preventDefaultHandler(e){
e = e || window.event;
if(e.preventDefault){
e.preventDefault();//IE除外
}
else{
e.returnValue = false;
//注意:这个地方无法用return false代替
//return false 只是结束函数
}
}
阻止事件冒泡
1
2
3
4
5
6
7
8
9
function stopPropagationHandler(e){
e = e || window.event
if(e.stopPropagation){
e.stopPropagation();
}
else{
e.cancelBubble = true;//IE
}
}
事件委托
事件委托是将事件加到容器元素上,然后判断是否点击了容器元素就是点击了容器内部
1
2
3
4
5
6
7
myTable.onclick = function(e){
e = e || window.event;
targetNode = e.target || e.srcElement;
if(targetNode.nodeName.toLowerCase=='tr'){
alert("you click the tr");
}
}

事件流

Alt text

  • 事件触发的过程:当一个事件被触发时,body会最先得到事件发生的信息,依次向下传递,这就是事件的捕捉过程
  • 还记得事件注册方法addEventListener(type,function,useCapture),当useCapture为false的时候,说明事件冒泡阶段执行,如果为true的时候,说明事件捕获阶段执行
  • 冒泡事件:从下向上依次执行事件处理函数,当然需元素注册了句炳,在这个过程中可以阻止冒泡
  • 一般事件的执行过程为捕获—处理-冒泡(有的浏览器不支持捕获)