JS事件基础

事件

一 事件基础

1.定义

事件 ：是通知和侦听组合合成的，先侦听后通知，执行对应的函数。

• （1）侦听 document.addElementListener("事件名称",事件函数名)； function 事件函数(e){ 执行函数； }
• （2）创建一个事件对象 var evt=new Event("事件名称")； document.dispatchEvent(evt); //通知，抛发 。
• （3） ①事件的类型必须相同。 ②事件侦听的对象和抛发的对象必须相同。 ③将事件抛向倾听对象。 ④先侦听，后抛发。 ⑤部分事件时系统默认抛发的，有的事件需要手动抛发。

二 事件原理

• （1）捕获阶段 由外向内执行
• （2）目标阶段 到达目标
• （3）冒泡阶段 由内向外

1.

①对象.addEventListener(事件类型，事件回调函数，是否是捕获阶段)；
	默认为false。
②事件对象 必须是EvenTarget或者继承他所有的子类。
③e.stopPropagation();  停止冒泡。

2.

①e.currentTarget ---> 事件侦听的对象--->this
②e.target ---> e.srcElement ---> e.toElement 事件点击的目标对象(实际触发事件的对象)。

3.事件委托

将子元素事件委托给父元素，这样就可以减少侦听的数量。

三 事件的兼容

• （1）非IE8及以下 document.addElementListener("事件名称",事件回调函数名);
• （2）IE8及以下 创建：div.attachEvent("事件名称",事件回调函数名); 删除：div.detachEvent("事件名称",事件回调函数名);
• （3）
• （4） ①addEventListener 缺点：不支持IE8及以下 优点：支持捕获和冒泡阶段分开侦听 支持事件抛发机制。 支持同一个事件做多个事件回调函数。 事件使用时，可以将函数与内容完全分离。 ②attachEvent 缺点：IE8以上不支持，没有捕获，不支持一次点击 优点：支持IE8及以下， 支持同一个事件做多个事件回调函数。 事件使用时，可以将函数与内容完全分离。 ③onclick=fn 优点：全浏览器支持，不考虑兼容问题。 代码便捷。 缺点：不支持事件抛发机制，只能使用系统默认事件。 同一个元素同一个事件不支持多个回调函数。 因为代码大量使用匿名函数，容易造成回调地狱。

四 事件对象

1. e 事件对象

• （1）e.type: 事件类型 如：click
• （2）e.target e.ssrcElement 事件目标对象
• （3）e.currentTarget 事件侦听对象 （this）
• （4）e.currentBubble

2.Event事件

• （1）事件类型 change 只能用于表单 ①如果input.value值发生改变，并且失去焦距 就能触发。 ②可用于 input checkbox select ③如果为select，且增加多选时multiple select.selectedOptions 被选择的多个元素 select.selectedIndex 选择下标
• （2）事件类型 load 和error ①load和error用于图片的加载，Ajax通信以及JSON或者其他文件的加载。 ②load为加载成功事件，error为加载错误事件 ③load还可以用于window加载创建成功。 使用 window侦听load事件 1°所有DOM加载完成 2°所有的图片已经加载完成
• （3）事件类型 submit 和 reset ①submit和reset只能针对form表单侦听，不能针对input ②提交和重置事件
• （4）事件类型 resize ①针对window和textArea事件 ②窗口改变时 触发resize事件 ③拓展 1° em 当前元素相对父容器font-size的大小 2°相对根元素font-size的大小
• （5）事件类型 select ①只能针对input使用。 ②input内文本被选择时触发 ③1°input.selectionStart 被选中所有文本第一个文本的下标 2°input.selectionEnd 被选中所有文本最后一个文本的下标
• （6）事件类型 scroll 拉动滚动条触发事件。
• （7）事件类型 popstate 历史记录回退和前进时触发。

3.鼠标事件 MouseEvent

• （1）clientX clientY ：距离可视区域左上角位置
• （2）offsetX offsetY：鼠标事件目标对象（e.target）的左上角位置
• （3）layerX layerY： 如果目标对象时定位方式，值与offset相似，如果目标对象是非定位方式，取父容器左上角位置，如果父容器未定位，继续向上取。
• （4）movementX movementY：仅用于mousemove事件，这个值时鼠标移动时相对于上次获取坐标的距离。
• （5）pageX pageY：相对于页面顶端左上角位置
• （6）screeX screeY：相对于屏幕左上角位置
• （7）X Y：与clientX clientY 相同。
• （8）按下键点击鼠标时变为true ①altKey：false ②ctrlKey：false ③metaKey：false ④shiftKey：false
• （9）针对mousedown事件 ①点击左键 ②点击中键 ③点击右键 button : 0 1 2 buttons: 0 4 2 which: 1 2 3
• （10）click ：点击左键 ①dbclick：双击左键 ②mousedown：按下键 ③mouseup：释放键
• （11）mouseover：鼠标滑入 mouseout ：鼠标滑出 （具有冒泡功能，可以收到鼠标滑入、滑出子元素的冒泡事件）
• （12）mouseenter：鼠标滑入 mouseleave：鼠标滑出 （仅对侦听的对象起到事件接收效果）
• （13）mousemove：鼠标移动
• （14）contextmenu：右键菜单

阻止默认事件：

• （1）表单事件中的submit reset使用阻止默认事件可以取消提交和重置 e.preventDefault();
• （2）当使用contexmenu事件，取消鼠标右键菜单。 documen。addElementListener("contextmenu",mouseHandler); function mouseHandler(e){ e.preventDefault;}
• （3）当针对元素拖拽时，元素内有文本，文本无法选中。 documen。addElementListener("mousedown",mouseHandler); function mouseHandler(e){ e.preventDefault;}
• （4）图片拖拽时，产生图片禁止拖拽图标 documen。addElementListener("mousedown",mouseHandler); function mouseHandler(e){ e.preventDefault;}

this

• （1）在函数中 this指代 window。
• （2）在对象函数中，this指代该对象本身。
• （3）在事件函数中，this指代事件侦听的对象。
• （4）①事件函数中的this会覆盖普通对象中函数this的指向。 ②事件函数中，针对e.type事件类型所有对应的事件侦听对象才是this。

4.FocusEvent

	作用于所有表单元素，及超链接

• （1）focus 汇聚焦距 汇集焦距方式：①点击。②tab切换。
• （2）blur 失去焦距

5.inputEvent input事件

• （1）input事件中，e的属性 ①e.data:"o"; 输入内容； ②e。inpuType:"insertText"; 输入的类型 ③e.isComposing:true 是否是输入文本

☆☆☆节流

function inputHandler(e){ if(ids!==undefined) return; ids=setTimeout(function(){ clearTimeout(ids); ids=undefined; console.log(input0.value); },500); }

6.按键事件

• （1）keydow 按下键事件 document.addEventListener("keydown",keyHandler); e属性： ①e.code:"KeyA" ②e.key:"a" ③e.keyCode:65 ④e.which:65
• （2）wheelEvent 滚轮事件 google和IE window.addEventListener("mousewheel",wheelHandler); ①deltaX:0; ②deltaY:100; ③deltaZ:0; ④detail:0; ⑤wheelDelta:120; ⑥wheelDeltaX:0; ⑦wheelDeltaY:120; 火狐浏览器 windo.addEventListener("DOMMouseScroll",wheelHandler); ①向上 detail: -3 ②向下 detail: 3