雪道屋 | Snow on rails blog » javascript http://blog.snowonrails.com life.each{|day| day.live_well!} Thu, 11 Feb 2010 07:03:12 +0000 http://wordpress.org/?v=2.9-rare en hourly 1 Let Javascript and ActionScript talk to each other http://blog.snowonrails.com/2007/05/08/let-javascript-and-actionscript-talk-to-each-other/ http://blog.snowonrails.com/2007/05/08/let-javascript-and-actionscript-talk-to-each-other/#comments Tue, 08 May 2007 14:29:00 +0000 snow urn:uuid:c5a91810-06e6-4ecb-b689-9685cb07a4e1 flash.external.ExternalInterface is the External API that enables the communication between actionscript and flash player container. It enables the communication between javascript and actionscript.

From ActionScript, you can do the following on the HTML page:
* Call any JavaScript function.
* Pass any number of arguments, with any names.
* Pass various data types (Boolean, Number, String, and so on).
* Receive a return value from the JavaScript function.

From JavaScript on the HTML page, you can:

  • Call an ActionScript function.
  • Pass arguments using standard function call notation.
  • Return a value to the JavaScript function.

Here is how to access javascript functions from flash or flex file:


flash.external.ExternalInterface.call(function_name:
    String[, arg1, ...]):Object;

The function_name is the name of the function in the HTML page’s JavaScript. The arguments are the arguments that you pass to the JavaScript function. You can pass one or more arguments in the traditional way of separating them with commas, or you can pass an object that is deserialized by the browser. The arguments are optional.

Here is how to access flash or flex functions from javascript:

In your Flex application, you add a local Flex function to the list by using the addCallback() method of the ExternalInterface API. This method registers an ActionScript method as callable from the JavaScript or VBScript in the wrapper.

Javascript code likes this:


$('flash_object_id').as_method();  // this will invoke the method called "as_method" in flash or flex file

But, in order to make the above code to work correctly, you have to add following as code in flash or flex:

flash.external.ExternalInterface.addCallback('as_method', instance, method_define_in_as):Boolean (ActionScript 2.0)
flash.external.ExternalInterface.addCallback('as_method', method_define_in_as):Void(ActionScript 3.0)

Here are some examples for as 2.0 and as 3.0

]]> http://blog.snowonrails.com/2007/05/08/let-javascript-and-actionscript-talk-to-each-other/feed/ 0 Event Delegation(bubbling) http://blog.snowonrails.com/2007/01/24/event-delegationbubbling/ http://blog.snowonrails.com/2007/01/24/event-delegationbubbling/#comments Wed, 24 Jan 2007 15:40:00 +0000 snow urn:uuid:8aa808a4-c16f-4b33-b4b3-07d02eb36239 昨天在yahoo user interface blog 看到了一片文章 : Event Driven Web Application Design

在读到关于event delegation的时候,我被这个概念吸引注了,于是通过这个地址看到了一篇关于
event delegation vs event handling 的文章, 这篇文章将event delegation的概念讲的比较详细了,
不过还是在自己动手写的代码之后才真正明白了是怎么一回事,看看我写的这个非常简单的例子吧 

<html>
<head>

<script src="prototype.js"></script>
<script>
function containerHandler(e){
alert("target:"+e.target.id+"---currentTarget:"+e.currentTarget.id+"---bubbles:"+e.bubbles) ;
}

</script>
</head>

<body>
<div id="container">
<ul id="list">
<li id="li-1">List Item 1</li>
<li id="li-2">List Item 2</li>

<li id="li-3">List Item 3</li>
<li id="li-4">List Item 4</li>
<li id="li-5">List Item 5</li>

<li id="li-6">List Item 6</li>
</ul>
</div>
</body>
<script>
Event.observe($('container'),'click',containerHandler,false);
</script>
</html>


Event对象有几个比较重要的属性,也就是我们alert出来的那几个,其中target表示触发事件的元素,currentTarget表示监听事件的元素,bubbles表示时间是否向外层传播. 乍看上去target和currentTarget非常容易混淆,不过让我们看看event bubble的概念可能就会更清楚一些.

…In essence this means that whenever you do something to an element in the page (like clicking it), this element gets very excited and talkative about it – especially to its parent elements. The link clicked in the example will tell the LI it resides in, the UL it resides in and so on and so forth up until the BODY of the document. And this is what you can use to your advantage; all you need to do is to set one event handler on a main element, and use the getTarget() method of the library of your choice.

那么我们为什么要使用这种方式呢, 他和event handling的方式到底有什么不同呢?我能想到如下几点:

  • event delegation的效率会更高些, 对比以往循环添加listener 的情况, 只添加一个listener肯定会有更高的效率和简洁性.
  • 试想这样的一个场景,我希望ul当中所有的li在被点击的时候都会触发一个事件,同时用户可以随时向ul当中添加新的li,新添加的li也具有如此的特性, 在这个时候传统的循环添加listener的办法可能就不太奏效了,而这时正好时event delegation 排上用场的时候

单单就是第二点我们已经有足够的理由使用event delegation了,因为在一个RIA应用当中,这样的需求时非常的常见的.

]]> http://blog.snowonrails.com/2007/01/24/event-delegationbubbling/feed/ 0