- JavaScript与HTML之间的交互是通过事件来实现的
-
JavaScript的Event对象详解
属性 类型
描述 type String 事件的类型,如onlick中的click srcElement/target 事件源,就是发生事件的元素 button 声明被按下的鼠标键,整数,1代表左键,2代表右键,4代表中键,如果按下多个键,酒把这些值加起来,所以3就代表左右键同时按下;(firefox中 0代表左键,1代表中间键,2代表右键) clientX/clientY 事件发生的时候,鼠标相对于浏览器窗口可视文档区域的左上角的位置(在DOM标准中,这两个属性值都不考虑文档的滚动情况,也就是说,无论文档滚动到哪里,只要事件发生在窗口左上角,clientX和clientY都是 0,所以在IE中,要想得到事件发生的坐标相对于文档开头的位置,要加上
document.body.scrollLeft和 document.body.scrollTop)offsetX,offsetY/layerX,layerY 事件发生的时候,鼠标相对于源元素左上角的位置 x,y/pageX,pageY 检索相对于父元素鼠标水平坐标的整数 altKey,ctrlKey,shiftKey等 返回一个布尔值 keyCode 返回keydown何keyup事件发生的时候按键的代码,以及keypress 事件的Unicode字符;(firefox2不支持 event.keycode,可以用 event.which替代 ) fromElement,toElement 前者是指代mouseover事件中鼠标移动过的文档元素,后者指代mouseout事件中鼠标移动到的文档元素; cancelBubble 一个布尔属性,把它设置为true的时候,将停止事件进一步起泡到包容层次的元素;(e.cancelBubble = true; 相当于 e.stopPropagation();) returnValue 一个布尔属性,设置为false的时候可以组织浏览器执行默认的事件动作;(e.returnValue = false; 相当于 e.preventDefault();) screenX、screenY 鼠标指针相对于显示器左上角的位置,如果你想打开新的窗口,这两个属性很重要 bubbles Boolean 表明事件是否冒泡 eventPhase Inetger 调用事件处理程序的阶段:1 捕获 2 目标 3 目标 currentTarget Element 事件处理程序当前正在处理的那个元素 target Element 事件的目标 defaultPrevente Boolean 为true表示已经调用了preventDefault() preventDefault() Function 取消事件的默认行为eg.取消单击<a>元素时导航到href指定的url。如果cancelable是true,可以使用这个方法 stopPropagation() Function 取消事件的进一步捕获或冒泡。如果bubbles为true可以调用这个方法。
-
事件流:从页面接受事件的顺序。动作,点击页面中的input元素
1)冒泡事件流,即事件由具体的元素接受,然后逐级向上传播到较为不具体的节点;input->body->html->document。2)不具体的节点应该更早接受到事件,而具体的节点应该最后接受到事件;document->html->body->input<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <input type="button" value="点击我" id="my"/> </body> </html>
- "DOM2即事件"规定事件包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡。在DOM事件流中,实际的目标(<input>元素)在捕获阶段不会接受到事件。意味着捕获阶段从document->html->body。下一个阶段为处于目标阶段,于是事件在目标上发生,并且事件处理中被看成冒泡阶段的一部分。然后冒泡阶段发生,事件又传回文档。
- 事件就是用户或浏览器自身执行的某种动作,eg.click、load和mouseover。而响应时间的函数就做事件处理程序(或事件侦听器)。
- 通过addEventListener()添加的事件处理程序只能使用 removeEventListener()来移除;移除时传入的参数与添加处理程序是使用的参数相同,即addEventListener()添加的匿名函数将无法移除。eg.
function myClick(event){ alert(event.type); console.warn("event : ",event); this.removeEventListener("click",myClick,false); } var my = document.getElementById("my"); my.addEventListener("click",myClick,false); //在冒泡阶段处理实际 //my.addEventListener("click",myClick,true); //在捕获阶段处理实际
- 事件类型:焦点事件、鼠标事件、滚轮事件、文本事件、键盘事件、合成事件、变动(mutation)事件。.
- 变动(mutation)事件:当底层DOM结构发生变化时触发的事件