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之前的浏览器。

  • 相关阅读:
    [Javascript] Avoid Creating floats if they are not needed
    App_Offline.htm and working around the "IE Friendly Errors" feature
    uninstall vs extension
    Sample page with dom-if and dom-bind in polymer
    4 classes in Bootstrap Grid system
    Suppress user properties/ custom fields when print in Outlook
    Remove Event Handler via Reflection
    Get the type name of a com object
    Row_Number 生成样本数据
    java运行命令行或脚本
  • 原文地址:https://www.cnblogs.com/invincible-hehe/p/3710805.html
Copyright © 2011-2022 走看看