javascript的事件

javascript的事件

       事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间。而 javaScript 与 HTML 之间的交互是经过事件实现的,可使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript 代码)与页面的外观(HTML 和 CSS 代码)之间的松散耦合。javascript


一、DOM事件流

        DOM事件流包括了3个阶段:事件捕获阶段、处于目标阶段、时间冒泡阶段。
html

<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html>

        a、事件捕获:事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预约目标以前捕获它。从document元素一直传递到事件发生的元素(从大范围缩小到目标元素)java

        b、事件冒泡:即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,而后逐级向上传播到较为不具体的节点(文档) 。从最具体的元素传播到document元素(从小范围到大范围)浏览器

        c、当点击div元素时,在 DOM 事件流中,实际的目标( <div> 元素)在捕获阶段不会接收到事件。这意味着在捕获阶段,事件从 document 到 <html> 再到 <body> 后就中止了。 而后是 “处于目标” 阶段, 因而事件在 <div>上发生。而后,冒泡阶段发生,事件又传播回文档。dom


二、事件处理

        a、addEventListener();给元素增长事件的函数。
编辑器

格式:addEventListener("event_name",callback,use-capture);
event_name:事件名称。
callback:事件处理方法
use-capture:false--》冒泡阶段/ture-->捕获阶段。
ps:大多数状况下,都是将事件处理程序添加到事件流的冒泡阶段,这样能够最大限度地兼容各类浏览器

    测试函数

<!DOCTYPE html>
<html>
<head>

</head>
<html id="myHtml">
	<body id="myBody">
		<div id="myDiv">Click Me</div>
	</body>
<script>
	
	var bd=document.getElementById("myBody");
	var dv=document.getElementById("myDiv");
	var ht=document.getElementById("myHtml");
	<!--冒泡-->
	bd.addEventListener("click",function(){
		console.log("body冒泡:"+(new Date()).toLocaleString());
	},false);
	dv.addEventListener("click",function(){
		console.log("div冒泡:"+(new Date()).toLocaleString());
	},false);
	ht.addEventListener("click",function(){
		console.log("html冒泡:"+(new Date()).toLocaleString());
	},false);	
	<!--捕获-->
	bd.addEventListener("click",function(){
		console.log("body捕获:"+(new Date()).toLocaleString());
	},true);
	dv.addEventListener("click",function(){
		console.log("div捕获:"+(new Date()).toLocaleString());
	},true);
	ht.addEventListener("click",function(){
		console.log("html捕获:"+(new Date()).toLocaleString());
	},true);	
</script>	
</html>

  

      b、removeEventListener();删除元素的事件。测试

格式:removeEventListener("event_name",callback,use-capture)

    ps:IE的事件处理方式:attachEvent()和detachEvent()。
this

格式:
attachEvent("event_name",callback);
detachEvent("event_name",callback);


三、事件对象

        在触发 DOM 上的某个事件时,会产生一个事件对象 event ,这个对象中包含着全部与事件有关的信息:致使事件的元素、事件的类型以及其余与特定事件相关的信息。spa

<!DOCTYPE html>
<html>
<head>
<script>
	function doThis(){
		//console.log(this);
		console.log(event);
	}
</script>
</head>
<body>
	<div>
		<input type="button" value="Click Me" onclick="doThis()"/>
	</div>
</body>
</html>

        查看下事件的传播途径

        事件的属性

四、事件类型

        主要的事件类型:

UI(User Interface,用户界面)事件,当用户与页面上的元素交互时触发;
焦点事件,当元素得到或失去焦点时触发;
鼠标事件,当用户经过鼠标在页面上执行操做时触发;
滚轮事件,当使用鼠标滚轮(或相似设备)时触发;
文本事件,当在文档中输入文本时触发;
键盘事件,当用户经过键盘在页面上执行操做时触发;
合成事件,当为 IME(Input Method Editor,输入法编辑器)输入字符时触发;
变更(mutation)事件,当底层 DOM 结构发生变化时触发。

        最新的具体的事件类型能够查看W3C的数据:http://www.w3school.com.cn/jsref/dom_obj_event.asp


        a、UI事件:用户与页面上的元素交互时触发

        b、焦点事件:焦点事件会在页面元素得到或失去焦点时触发

        c、鼠标、滚动事件:当用户经过鼠标操做页面时触发。

            鼠标事件的属性

        d、键盘事件:用户在使用键盘时会触发键盘事件

        e、触摸事件:移动端的事件类型。

            touch事件的其它其它属性:

相关文章
相关标签/搜索