欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

事件!!!

程序员文章站 2022-06-22 19:44:42
事件 :1.移动事件2.点击事件3.覆盖时间4.键盘事件绑定事件:on.xx绑定事件—句柄ele.onxxx = function(event){}兼容性好,但是一个元素的同一个事件上只有一个基本等同于写在Html行间上`在这里插入代码片obj.addEnventListener(type,fn,false);【w3c标准的】【能给一个对象绑定一个事件的多个处理函数】IE9以下不兼容,可以为一个事件绑定多个处理事件obj.attachEv......
事件
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);
	  }

本文地址:https://blog.csdn.net/qq_48846376/article/details/107376444