事件!!!

事件
1.移动事件
2.点击事件
3.覆盖时间
4.键盘事件

绑定事件:
on.xx绑定事件—句柄

  1. ele.onxxx = function(event){}
    兼容性好,但是一个元素的同一个事件上只有一个
    基本等同于写在Html行间上`在这里插入代码片
  2. obj.addEnventListener(type,fn,false);【w3c标准的】【能给一个对象绑定一个事件的多个处理函数】
    IE9以下不兼容,可以为一个事件绑定多个处理事件
  3. obj.attachEvent(‘on’+type,fn)【ie9独用,能给一个对象绑定一个事件的多个处理函数,并且一个对象的一个事件绑定同一个函数多次他都能执行】
    就是一个事件同样可以绑定多个处理程序
  4. ele.onxxx = function(event){} [程序this指向dom元素本身]
    . obj.addEventListener(type,fn,false); [程序this指向dom元素本身]
  5. obj.attachEvent(‘on’,+type,fn); [程序this指向window]

封装兼容性addEvent(elem,type,handle);方法:

//Eg-code:
	Function addEvent(elem,type,handle){
		If(elem.adddEventListener){
			Elem. adddEventListener(type,handle,false);
		}else if(elem.attachEvent){
			Elem.attachEvent(‘on’+type,function(){
			Handle.call(elem);
			})
		}else{
			Elem[‘on’+type] =handle
		  }
	   }
    }

解除事件处理程序

  1. ele.onclick = false/’’/null;
  2. ele.removeEventListener(type,fn,false);
  3. ele.detachEvent(‘on’+type,fn);
    注:若绑定匿名函数,则无法解除

事件处理模型-事件冒泡(false)、捕获(true):
事件冒泡

  1. 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素(自底向上)
    事件捕获:
  2. 结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自父元素捕获至子元素(事件源元素)(自顶向上)
    IE,没有捕获事件
    触发顺序,先捕获,后冒泡
    Focus、blur、change、submit、reset、select等事件不冒泡
    取消冒泡
    1. w3c标准event.stopPropagation();但不支持ie9以下版本
    2. ie独有event.cancelBubble = true
    3. 封装取消冒泡的函数stopBubble(event)
	Function stopBubble(event){
			If(event.stopPropagation){
			Event.stopPropagation();
			}
			  else{
				event.cancelBubble =true;
		      }
    }

阻止默认事件

  1. 默认事件-表单提交,a标签跳转,右键菜单等
  2. Return false;以对象属性的方式注册的事件才生效
  3. Event.preventDefault();w3c标注,IE9以下不兼容
  4. Event.returnValue = false;兼容ie
  5. 封装阻止默认事件的函数cancelHandler(event);【void(false):取消默认事件----==return false
	Function  cancelHandler (event){
		If(e.preventDefault){
			e.preventDefault();
		} else{
			e.returnValue = false;
		  }
	} 

事件对象
Envent ||window.event用于IE
事件源对象:
Event.target 火狐只有这个
Event.srcElement ie只有这个
这俩chrome都有
兼容写法
事件委托机智:【简便,效率高

//Eg-code:
	var ul = document.getElementsByTagName('ul')[0];
		ul.onclick = function(e){
  		  var event = e || window.event;
   		  var target = event.target || event.srcElement;
   		  console.log(target.innerText);
	  }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值