前端知识-JavaScript事件驱动特性

事件驱动3特征

绑定事件

ele.addEventListener(‘click’,function(){});//IE9级以上
ele.attachEvent(‘on’click’,function(){});//IE9-10；
兼容写法:

function addEventListener(ele,event,fn){
	if(ele.addEventListener){
		ele.addEventListener(event,fn);
	}else if(ele.addEventListener){
		ele.attachEvent('on'+event,fn);
	}else{
		ele['on'+event]=fn;
	}
}

移除事件

ele.onclick = null;
ele.removeEventListener(‘click’,fn);//移除函数不能使用匿名函数
ele.detachEvent(‘onclick’,fn);//IE9-10
兼容性处理

function removeEventListener(ele,event,fn){
	if(ele.removeEventListener){
		ele.removeEventListener(event,fn);
	}else if(ele.detachEvent){
		ele.detachEvent('on'+event,fn);
	}else{
		ele['on'+event] = null;
	}
}

事件阶段

1. 从外到里事件捕获
2. 事件对象执行
3. 从里到外事件捕获
   如果addEventListener(事件,事件函数,true);表示事件捕获 默认false表示事件冒泡
   addEvent 和 onclick都只有事件冒泡

事件委托

子元素触发父元素事件，父元素触发事件根据不同的子元素进行分别处理

father.onclick = function(e){
	e = e || window.event;//老版本IE兼容性
	if(e.target==xxx){
		e.target.style.backgroundColor = "red";
	}
}

事件属性

e.eventPhase

1. e.eventPhase == 1 为捕获阶段 2为目标阶段 3为冒泡阶段

e.currentTarget

2. e.currentTarget 事件处理函数的注册事件相当于this 区别于e.target在老IE是srcElement

e.target

3. var target = e.target || e.srcElement;

e.type

4. e.type 获取事件名称 如果多个事件指向同一个函数 就可以用于区分

获取鼠标

e.clientX/Y

获取当前页面可视区域的位置

e.pageX/Y

获取当前页面位置 e.pageX/Y = e.clientX/Y + document.body…scrollLeft + document.body…scrollTop;
兼容写法:

function getScroll(){
	var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
	var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
	return {
		scrollLeft:scrollLeft;
		scrollTop:scrollTop ;
	}
}

获取键盘

e.keyCode 键码
48-57是数字

阻止默认行为

1. return false;
2. e.preventDefault();
3. e.returnValue = false;//IE

停止冒泡

e.stopPropagation();
e.cancelBubble = true;//IE

书写事件驱动程序

常用事件

a.窗口事件,只在body和frameset元素中才有效
onload 页面或图片加载完成时
onunload 用户离开页面时
b.表单元素事件,在表单元素中才有效

onchange     框内容改变时
onsubmit     点击提交按钮时
onreset     重新点击鼠标按键时
onselect     文本被选择时
onblur      元素失去焦点时
onfocus     当元素获取焦点时

c.键盘事件,在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效
onkeydown 按下键盘按键时
onkeypress 按下或按住键盘按键时
onkeyup 放开键盘按键时
d.在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里都无效

onclick     鼠标点击一个对象时
ondblclick    鼠标双击一个对象时
onmousedown 鼠标被按下时
onmousemove 鼠标被移动时
onmouseout    鼠标离开元素时 触发事件冒泡
onmouseover 鼠标经过元素时 触发事件冒泡
onmouseleave   鼠标离开元素时 触发事件冒泡
onmouseenter 鼠标经过元素时 不触发事件冒泡
onmouseup    释放鼠标按键时
onmousewheel 滚轮事件

e.其他
onresize 当窗口或框架被重新定义尺寸时
onabort 图片下载被打断时
onerror 当加载文档或图片时发生错误时
自定义对象:有初始化对象和定义构造函数的对象两种方法

特殊事件

onload/onunload

• 当页面加载（文本和图片）完毕的时候，触发onload事件。
• img也有onload事件
• onunload会冻结使用window