`

JS_事件

 
阅读更多
  • 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元素 
    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<input type="button" value="点击我" id="my"/>
</body>
</html>
     1）冒泡事件流，即事件由具体的元素接受，然后逐级向上传播到较为不具体的节点；input->body->html->document。2）不具体的节点应该更早接受到事件，而具体的节点应该最后接受到事件;document->html->body->input
  • "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结构发生变化时触发的事件

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到：
| JS_作用域
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics