zoukankan      html  css  js  c++  java
  • js 自定義event

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>Event對象敘述  自定義事件CustomEvent</title>
    	</head>
    	<body>
    		<!--
            	
            	描述:事件发生以后,会产生一个事件对象,作为参数传给监听函数。浏览器原生提供一个Event对象,
            	所有的事件都是这个对象的实例,或者说继承了Event.prototype对象。
            	  點擊->var clickEvent = new Event('click') ->存在addEventListener監聽函數->執行監聽函數
            	   將clickEvent對象作爲參數傳遞過去
            -->
            <!--
            	var eve = new Event('look',{
    			"bubbles":false,
    			"cancelable":false
    		});
    		document.dispatchEvent(eve); //document調用 Event是dom下的一部分
            -->
            <div>父div
            <h1>1111111111111</h1>
            </div>
    	</body>
    	<script>
    		var eve = new CustomEvent('look',{
    			"bubbles":false,
    			"cancelable":false 
    		});
    		
    		var h1=document.querySelector("h1");
    		var div1 =document.querySelector("div");
    		h1.addEventListener('look',function(ev){
    			console.info('user defined event happen');
    			var bubble=ev.bubbles;
    			console.error(bubble)//false 非冒泡類型
    		},false) 
    //		div1.addEventListener('look',function(){
    //			console.error("parent element div attach")
    //		},true)//useCapture 情況下執行 且先于h1執行
    
    		div1.addEventListener('look',function(){
    			console.error("parent element div attach")
       		},false)//useCapture 為false 冒泡情況下才執行   --->結果:由於h1的bubbles=false 不冒泡  因此div1的事件不觸發
    		h1.dispatchEvent(eve);//user defined event happen 
    		//手動觸發事件執行
    		
    	</script>
    </html>
     
    

     自定義事件傳參數

    var myEvent = new CustomEvent('myevent', {
      detail: {
        foo: 'bar'
      },
      bubbles: true,
      cancelable: false
    });
    
    el.addEventListener('myevent', function (event) {
      console.log('Hello ' + event.detail.foo);
    });
    
    el.dispatchEvent(myEvent);
    
  • 相关阅读:
    ObjectArx的一次常用方法
    GDI+ 简介(1)
    VC++获取可执行文件当前目录
    SQL Server 常用的时间处理函数
    利于Wininet创建一个FTP客户端的步骤
    Win32 文件操作的几个API
    ObjectARX中三维多段线转二维多段线的方法
    fas文件格式解析
    [转载]swf文件格式解析(一)
    [转载]swf文件格式解析(二)
  • 原文地址:https://www.cnblogs.com/bawang/p/9104796.html
Copyright © 2011-2022 走看看