Javascript自定义事件

最新推荐文章于 2023-06-21 11:55:11 发布

wowo1109

最新推荐文章于 2023-06-21 11:55:11 发布

阅读量2.1k

点赞数

分类专栏： Webkit 文章标签： javascript function stylesheet timer button null

本文链接：https://blog.csdn.net/wowo1109/article/details/6705803

版权

Webkit 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在开发一个应用程序的时候，不可避免要处理很多事件。对于如何处理标准的事件如鼠标，键盘事件是比较清楚的，但对于一个嵌入式项目而言，其实有很多自定义的事件，比如多媒体应用的usb insert/remove 事件，TV应用不可回避的搜索频道的事件，这些事件类型各不同，参数也各不同。那如何在javascript中自定这些事件和处理事件呢？这是本文要解决的问题。DOM level2定义了如何创建，初始化和发送这些事件，这里是基于jQuery-1.6.2库来实现。

本文的例子是关于频道搜索的，有一个开始搜索的按钮和一个停止搜索的按钮，当点击开始按钮将触发一个定时器模拟搜索进度，它将每秒发送一个事件，事件包含当前搜索到的电视频道数，广播频道数和搜索进度。下面是一个截图。

这里先定义一个html文件channelscan.html，在文件中定义上面图示中的文档结构

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html, charset=utf-8">
  <title>Channel Scan</title>
  <link rel="stylesheet"  href="./css/channelscan.css" type="text/css" />
 </head>
 <body>
  <div id = "channelScan">
    <p id = "scanStatusNumber">搜索到    <span id="scanTvNum">0</span>    个电视和    <span id="scanBroadcastNum">0</span>    个广播 </p><br/>
    <div id = "scanStatusProgressbarGroove"></div>
    <div id="scanStatusProgressbarIndicator">0%</div>
    <input type="button" id="buttonStartScan" value="Start Scan"></input>
    <input type="button" id="buttonStopScan" value="Stop Scan"></input>
  </div>
  <script type="text/javascript" src="./js/jquery-1.6.2.js"></script>
  <script type="text/javascript" src="./js/channelscan.js"></script>
 </body>
</html>

再定义一个scanchannel.css的CSS文件定义文档的外观，关于css不多说

#channelScan
{
	position:absolute;
	top:200px;
	left:30%;
}


#scanStatusProgressbarGroove
{
	position:relative;
	background-color:gray;
	color:white;
	width:200px;
	height:30px;
}
#scanStatusProgressbarIndicator
{
	position:relative;
	background-color:green;
	color:white;
	top:-30px;
	width:0px;
	height:30px;
	text-align:left;
}

下面定义一个channelscan.js的javascript文件，处理事件

var ChannelScan =
{
	progress:0,
	tvChannelNum:0,
	tvBroadcastNum:0,
	counter:0,
	scanTimerId:null,
	
	
	initialize:function()
	{
	 /*bind the click handler for the two buttons*/
	 $("#buttonStartScan").bind("click",ChannelScan.startChannelScan);
	 $("#buttonStopScan").bind("click",ChannelScan.stopChannelScan);
	 
	 /*definded a custom event 'eventScanProgress' and bind a handler to the custom event*/
	 $("#channelScan").bind("eventScanProgress",ChannelScan.handleScanEvent);
	},
    startChannelScan:function()
    {
		/*create and start a timer, bind a handler,trigger the event each 1 second*/
		if(ChannelScan.scanTimerId == null)
		  ChannelScan.scanTimerId = setInterval(ChannelScan.dispathScanProgressEvent,1000);
    },
	stopChannelScan:function()
	{
    	/*stop the timer and clear it.*/
    	if(ChannelScan.scanTimerId != null)
    	{
      	  clearInterval(ChannelScan.scanTimerId);
      	  ChannelScan.scanTimerId = null;
    	}	
	
	},
    handleScanEvent:function(e)
    {
		/*receive the event and handle it*/
		if(e.type == "eventScanProgress")
		{
			/* update the tv channel number*/
			$("#scanTvNum").text(e.tvChannelNum);
			/* update the broadcast channel number*/
			$("#scanBroadcastNum").text(e.tvBroadcastNum);
			/* update the scan progress bar and percent*/
			$("#scanStatusProgressbarIndicator").width(e.progress*2);
			$("div#scanStatusProgressbarIndicator").text(e.progress+"%");
			return true;
		}
		return false;
    },
    dispathScanProgressEvent:function()
    {
    	/* this function is triggered by the timer each 1 sec*/
    	ChannelScan.counter++;
    	if(ChannelScan.counter <= 100)
    	{
    	ChannelScan.tvChannelNum = ChannelScan.counter;
    	ChannelScan.tvBroadcastNum = ChannelScan.counter*2;
    	ChannelScan.progress = ChannelScan.counter;
    	/*create a event object named 'eventScanProgress'*/
    	var event = $.Event("eventScanProgress");
    	/*add the data to the event*/
    	event.progress = ChannelScan.progress;
    	event.tvChannelNum = ChannelScan.tvChannelNum;
    	event.tvBroadcastNum = ChannelScan.tvBroadcastNum;
    	/*trigger the event*/
    	$("#channelScan").trigger(event);
    	
    	}
    	else
    	{
    	 ChannelScan.stopChannelScan();	
    	}
    }
};
/*bind the intialize function*/
$(document).bind("ready",ChannelScan.initialize);

上面是基于jQuery库提供的接口实现自定义事件，DOM LEVEL2规范也定义了如何自定义事件。可以调用document的createEvent方法创建一个事件。

var evt = document.createEvent("Event");
var mevt = document.createEvent("MouseEvent");

....

createEvent的参数指定了事件的类型，DOM LEVEL2有如下几种类型：

UIEvent : DOMFocusIn, DOMFocusOut & DOMActivate事件
MouseEvent: click, mousedown/up/over/move/out
MutationEvent: 所有的 DOMXX修改事件
HTMLEvent: load, unload, abort, error, select, change, submit, reset, focus, blur, resize, scroll事件
Event: 其它类型的事件

一旦定义了事件，就可以用initEvent方法定义它的属性

var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);
...
var mevt = document.createEvent("MouseEvent");
mevt.initMouseEvent("click",true,true,...);

initEvent和initMouseEvent的第一个参数是事件的一个type属性，也可以认为是事件的名字，第二个参数表示是不是可以冒泡，第三个参数表示是不是可以阻止事件默认的行为。事件初始化后，也可以给事件添加任意的属性，这一点对自定义事件很有用，因为自定义事件可能有好几个属性，事件携带好几种信息。用dispatchEvent可以把事件发送出去。

var evt = document.createEvent("Event");
evt.initEvent("myEvent",true,true);
evt.progress = 10;
evt.tvNum = 2;
evt.broadcastNum = 1;
document.dispatchEvent(evt);
...
or
...
var target = document.getElementById("myTarget");
target.dispatchEvent(evt);

当然通常一个事件必定有一个对应的处理函数，addEventListener实现了一个函数与一个事件的捆绑

document.addEventListener("myEvent",myEventHandler,false);
...
or
...
var target = document.getElementById("myTarget");
target.addEventListener("myEvent",myEventHandler,false);

myEventHandler:function(e)
{
  if(e.type == "myEvent")
 {
    alert("progress:"+ e.progress);
    alert("tvNum:" + e.tvNum);
    alert("broadcastNum:"+e.broadcastNum);

 }
 return true;
}

wowo1109

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript自定义事件

在开发一个应用程序的时候，不可避免要处理很多事件。对于如何处理标准的事件如鼠标，键盘事件是比较清楚的，但对于一个嵌入式项目而言，其实有很多自定义的事件，比如多媒体应用的usb insert/remove 事件，TV应用不可回避的搜索频道的事件，这些事件类型各不同，参数也各不同。那
复制链接

扫一扫