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兼容练习.
js-事件
原文地址：https://www.cnblogs.com/chenyingjie1207/p/10029016.html