zoukankan      html  css  js  c++  java
  • javascript事件流

    事件流:描述页面接收事件的顺序。
    事件冒泡;事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。
    事件捕获:事件从不太具体的节点开始触发,然后逐级向下传播到到最具体的元素。
    DOM0事件流:在冒泡阶段被处理。
    DOM2事件流:包括三个阶段,按照发生顺序的角度来说分别是事件捕获阶段、处于目标阶段和事件冒泡阶段。添加事件的方法是addEventListener(event,fn,useCapture);userCapture是布尔值,true为在捕获阶段执行事件,false为在冒泡阶段执行事件。
    例一:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM2</title>
    <style type="text/css">
    #father{100px;height:100px;padding:50px;background:#000;}
    #child{100px;height:100px;background:#fff;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    	var oFather=document.getElementById('father');
    	var oChild=document.getElementById('child');
            //捕获阶段执行事件
    	oFather.addEventListener('click',function(){
    		this.style.backgroundColor="red";
    		alert('父元素被点击')
    	},true);
    	oChild.addEventListener('click',function(ev){
    		alert('子元素被点击');
    	},true);
    	oChild.addEventListener('click',function(ev){
    		alert('我是子元素被点击');
    	},true);	
            //冒泡阶段执行事件
            oFather.addEventListener('click',function(){
    		this.style.backgroundColor="red";
    		alert('父元素被点击')
    	},false);
    	oChild.addEventListener('click',function(ev){
    		alert('子元素被点击');
    	},false);
    	oChild.addEventListener('click',function(ev){
    		alert('我是子元素被点击');
    	},false);
    }
    </script>
    </head>
    
    <body>
    <div id="father">
    	<div id="child"></div>
    </div>
    </body>
    </html>

    IE事件处理程序:IE不支持DOM2事件流,以自己独特的方法:attachEvent()来实现事件处理。并且只在冒泡阶段被执行。
    例二:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM2</title>
    <style type="text/css">
    #father{100px;height:100px;padding:50px;background:#000;}
    #child{100px;height:100px;background:#fff;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    	var oFather=document.getElementById('father');
    	var oChild=document.getElementById('child');
    	oChild.attachEvent('onclick',function(){
    		alert('子元素被点击')
    	});
    	oChild.attachEvent('onclick',function(){
    		alert('我是子元素被点击')
    	});
    	oFather.attachEvent('onclick',function(){
    		alert('父元素被点击')
    	});	
    }
    </script>
    </head>
    
    <body>
    <div id="father">
    	<div id="child"></div>
    </div>
    </body>
    </html>

    注意:为同一个元素添加两个不同的时间处理程序,IE和DOM的方法不同,IE以添加顺序的相反顺序来执行,而DOM是按照添加顺序来执行的。
    声明:IE9开始已经逐步支持DOM2事件流,所以,上述IE全部是指IE9之前的浏览器。

  • 相关阅读:
    eclipse中svn的各种状态图标详解
    Invalid configuation file. File "**********" was created by a VMware product with more feature than this version of VMware Workstation and cannot be
    linux下tomcat无法访问问题(换一种说法:无法访问8080端口)
    安装MySQL start Service(无法启动服务)
    eclipse下SVN subclipse插件
    tomcat启动窗口中的时间与系统时间不一致
    关于如果从SQLSERVER中获取 数据库信息 或者 表信息
    有关google的appengine部署服务器的简单教程
    部署到Google App Engine时中途退出后引起的问题
    重温WCF之数据契约中使用枚举(转载)(十一)
  • 原文地址:https://www.cnblogs.com/invincible-hehe/p/3710805.html
Copyright © 2011-2022 走看看