#6.25
大纲:
HTML event事件应用:
1.非IE中的event事件
2.IE中的event事件
3.兼容性问题
4.event一些其他常用属性
5.event案例
1.非IE中的event事件
1.1 event对象及获取event对象方法
1.2 event中常用的属性和方法
1.1 event对象及获取event对象方法
描述:当dom tree中某个事件被触发的时候,会同时自动产生一个用来描述事件所有的相关信息(比如出发事件的元素、或者是事件的类型)的对象,这个对象就是event(事件对象)。
获取方式:
(1)在脚本中直接通过event来获取
例子:
div.οnclick=function(){
console.log(event);
console.log(typeof event);
}
console.log(event);
(2)还可以通过函数传参数的形式来使用,一般而言我们使用【形参e或eve】来代替
例子:
div.οnclick=function(aa){
console.log(aa);
console.log(event);
}
1.2 event中常用的属性和方法
1.2.1 非IE下event对象的常用属性
(1)type属性
描述:type属性用来获得【当前触发事件】的类型,此属性只读。
语法:event.type
(2)bubbles属性
描述:bubbles属性用来获得【当前触发事件的类型】是否冒泡,
如果当前事件类型支持冒泡则返回true,否则返回false。
语法:event.bubbles
举例:
div.onclick=function(eve){
console.log('div受到监听');
console.log(event.bubbles);
//阻止事件传播
eve.stopPropagation();
}
document.body.onclick=function(){
console.log('body受到监听');
}
(3)eventPhase属性
描述:事件传导至【当前节点】时处于什么的状态。
说明:本属性是只读属性,有三个可能的值
1:事件处于捕获状态
2:事件处于真正的触发者
3:事件处于冒泡状态
例子:
//冒泡状态
div.onclick=function(eve){
console.log('div:'+eve.eventPhase);
}
document.body.onclick=function(eve){
console.log('body:'+eve.eventPhase);
}
document.onclick=function(eve){
console.log('document:'+eve.eventPhase);
}
//捕获状态
div.addEventListener('click',function(eve){
console.log('div:'+eve.eventPhase);
},true)
document.body.addEventListener('click',function(eve){
console.log('body:'+eve.eventPhase);
},true)
document.addEventListener('click',function(eve){
console.log('document:'+eve.eventPhase);
},true)
(4)target属性
描述:获取事件的真正触发者
语法:eve.target
注意:事件内部可以认为eve.target等同于this作用
例子:
var lis=document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
lis[i].onmousedown=function(eve){
// this.className='orange';
eve.target.className='orange';
};
lis[i].onmouseup=function(eve){
// this.className='';
eve.target.className='';
}
}
(5)currentTarget 属性
描述:返回事件的监听者(当前触发者)
语法:eve.currentTarget
注意:事件在哪个节点触发,currentTarget属性就是谁
1.2.2 非IE下event对象方法
[1] stopPropagation()方法
描述:用来阻止事件从当前节点传播到下一个节点。
语法:eve.stopPropagation()
注意:ps:stopPropagation方法虽然能够阻断事件的传播,但是并不会影响同一节点上的其他事件句柄
例子:
div1.onclick=function(eve){
console.log('div1被点击了');
}
div2.onclick=function(eve){
console.log('div2被点击了');
eve.stopPropagation();
}
div2.ondblclick=function(eve){
console.log('div2被双击了');
}
[2] preventDefault()方法
描述:用来取消当前节点的默认行为(譬如超级链接的点击跳转行为)。该方法没有返回值。
语法:eve.preventDefault()
例子:
var anchor= document.querySelector('a');
anchor.onclick=function(eve){
eve.preventDefault();
}
[3] cancelable属性
描述:用来判断当前节点能否使用preventDefault方法来取消默认行为。
语法:eve.cancelable
例子:
var anchor= document.querySelector('a');
anchor.onclick=function(eve){
if(eve.cancelable){
eve.preventDefault();
}else{
console.log('当前节点没有默认行为可以取消');
}
}