js-事件

js-事件

1.什么是事件

HTML页面与JS之间的交互时通过事件来完成的。事件，就是文档与浏览器窗口发生的一些特定的交互瞬间。可以使用侦听器（处理程序）来预订事件，以便事件发生时执行相应的程序代码。

2.如何绑定事件

1. elem.onxxx = function(event){}；

• 兼容性很好，但是一个元素只能绑定一个处理程序。
• 相当于写在HTML行间。
• DOM0级事件

2） 事件侦听器：

• elem.addEventListener(type,func,false);
  • IE9以下不兼容，可以为一个事件绑定多个处理程序。
  • 第一个元素使指事件类型，如'click';
  • 第二个元素使事件处理函数；
  • 第三个元素指定事件触发阶段，false表示在事件冒泡阶段触发（默认），true表示在事件的捕获阶段触发。
• elem.attchEvent('on'+type,func);
  • IE独有的方法，一个事件可以绑定多个处理程序。

3.事件处理程序的运行环境

1）elem.onxxx = function(event){}；

• 程序this指向dom元素本身。

2）elem.addEventListener(type,func,false);

• 程序this指向dom元素本身。

3）elem.attchEvent('on'+type,func);

• 程序this指向window.

• 改变this指向：

  var div = getElementByTagName('div');
  div.attchEvent('onclick',fucntion(){
  	handle.call(div);
  })
  fucntion handle(){
  
  }
  

封装addEvent(elem, type, func)方法：

function addEvent(ele,type,handle){
		if(ele.addEventListener){
			ele.addEventListener(type,handle,false);
		}else if(ele.attachEvent){
			ele.attachEvent('on'+type,function(){
				handle.call(ele);
			})
		}
		else{
			ele['on'+type] = handle;
		}
	}

4.解除事件处理函数

1）ele.onxxx = null/false/'';
2)ele.removeEventListener(type,func,false);
3)ele.detachEvent('on'+type,func);

• PS:若绑定的是匿名函数，则无法解除。

5.事件处理模型--事件捕获、事件冒泡

• 事件捕获：自父元素捕获至子元素（事件源元素），自顶向下；
• 事件冒泡：自子元素冒泡至父元素，自底向上。
• 一般事件的触发顺序：先捕获，后冒泡。
• focus,blur,change,sbmit,reset,select等事件不冒泡。

6.取消冒泡和阻止默认事件

1）取消冒泡

• W3C标准：event.stopPropagation();DNA不支持IE9以下版本。
• IE的方法：event.cancelBubble = true;
• 封装取消冒泡的函数stopBubble：

function stopBubble(e){
	if(e.stopPropagation){
		event.stopPropagation();
	}else{
		event.cancelBubble = true;
	}
}

2)阻止默认事件

• 默认事件：表单提交，a标签跳转，右键菜单等。

• 1.return false;以对象属性方式注册的事件才生效。

  //取消右键菜单事件
  document.oncontextmenu = function(){
  		console.log('aa');
  		return false;
  	}
  	
  //取消a标签跳转事件
  a.onclick = function(){
  	return false;
  }
  <a href="javascript:void(0)">www.baidu.com</a>
  
  

• 2.event.preventDefault();//IE9以下不兼容

  document.oncontextmenu = function(e){
  		console.log('aa');
  		e.preventDefault();
  	}
  
  

• 3.event.returnValue = false;//兼容IE

  document.oncontextmenu = function(e){
  		console.log('aa');
  		e.returnValue = false;
  	}
  

• 封装取消默认事件函数cancelDefault:

  document.oncontextmenu = function(e){
  	console.log('aa');
  	cancelDefault(e);
  }
  
  function cancelDefault(e){
  	if(e.preventDefault){
  		e.preventDefault();
  	}else{
  		e.returnValue = false;
  	}
  }
  

7.事件对象

• event || window.event;//后者用于IE;
• 事件源对象
  • event.target;//火狐
  • event.srcElement;//IE
  • 这两chrome都用
• 兼容性写法：

var e = event || window.event;
var target = e.target || e.srcElement;

8.事件委托

//事件委托
	var li = document.getElementsByTagName('li');
	var ul = document.getElementsByTagName('ul')[0];
	ul.onclick = function(event){
		var e = event || window.event;
		var t = e.target || e.srcElement;
		console.log(t.innerText);
	}

9.事件分类

鼠标事件：

• click,mousedown,mouseup,mousemove,contextmenu,mouseover,mouseout，mouseenter,mouseleave
• 用button来区分鼠标的按键 0/1/2 ,mousedown/mouseup，button == 0 --> left;button == 2 --> right
• DOM3规定：click只能监听左键，只能通过mousedown和mouseup来判断。
• 如何解决mousedown和click的冲突。

	var first = 0;
	var last = 0;
	var key  = false;
	document.onmousedown = function(e){
		first = new Date().getTime();
	}
	document.onmouseup = function(e){
		last = new Date ().getTime();
		if(last - first < 300) {
			key =true;
		}
	}
	document.onclick = function(){
		if(key){
			console.log("click");
			key = false;
		}
	}

键盘事件

• keydown, keyup,keypress
• keydown > keypress > keyup
• keydown和keypress的区别：
  • keydown可以响应任何键盘按键，keypress只能响应字符类按键。
  • keypress返回ASCII码，可以转换成相应字符。

文本操作事件

• input,focus,blur,change

  var input1 = document.getElementsByTagName('input')[0];
  input1.oninput = function(){
  	console.log(input1.value);
  }
  

窗体操作事件(window上的事件)

• scroll

document.onscroll = function (){
		console.log(window.pageXOffset + " " +window.pageYOffset);
	}

• load: window.onload();//load事件会在页面的dom树都加载完之后才触发，效率极低，主体程序不能写在load事件的事件处理函数里面。

• IE6没有fixed，fixed兼容练习.