-->
./
<!-- フラ&#65533;ュが見れな&#65533;のためにここに何か書&#65533; --> フラ&#65533;ュがインス&#65533;&#65533;ルされて&#65533;&#65533;たいで&#65533;&#65533;&#65533;

2010年03月12日

Event.observe - イベントを監視

Event.observe - イベントを監視 - prototype.jsリファレンス
14 // click 以外に次のイベントがハンドリング可能
15 // blur(フォーカスを失った)
16 // change(変更があった)
17 // click(クリックされた)
18 // dblclick(ダブルクリックされた)
19 // error(エラーがあった)
20 // focus(フォーカスされた)
21 // keydown(キーがダウンされた)
22 // keypress(キーが押された)
23 // keyup(キーがアップされた)
24 // load(読み込まれた)
25 // mousedown(マウスダウンされた)
26 // mousemove(マウスが動いた)
27 // mouseout(マウスが外れた)
28 // mouseover(マウスオーバーした)
29 // mouseup(マウスがアップされた)
30 // reset(リセットされた)
31 // submit(サブミットされた)
32 // unload(アンロードされた)


 次のように使ってみました。情報がまとまっていて助かります。
<div id='div1' class='cls1'>----DIV_1----</div>
<div id='div2' style="display: inline-block">----DIV2----</div>
<div id='div3' class='cls_2'>----DIV_3----</div>
<div id='div4' class='cls_css'>----DIV_4----</div>
<div id='div5'>----DIV_5----</div><span>----span----</span>
<div id='div6'>----DIV_6----</div>

<script type='text/javascript'>

function insertText(){
  new Insertion.Before("div5", "サンプル");
}

function timesTest(){
  var n = 3;
  n.times(function(val){
      new Insertion.Before("div5",val +  "サンプル" + "<br />");
      });}

function gsubTest(){
  var str = "日本語の文章、日本国憲法。日本の四季 日本ンのサンプル";
  str = str.gsub(/日本(の|ン)(\W{2})/,'#{2}(Japan)#{1}');
  new Insertion.Before("div6", str);}
  //----span---- 日本語の文章、日本国憲法。四季(Japan)の のサ(Japan)ンンプル

function stripTagsTest() {
  var html="<div style='display: block'>日本語の文章</div>".escapeHTML();
  var escape = html.unescapeHTML();
  var text = escape.stripTags();
  new Insertion.Before("div5", "HTML---> " + html);
  new Insertion.Before("div5", "<br/>ESCAPE---> " + escape);
  new Insertion.Before("div5", "<br />TEXT--->" +  text + "<br />");
}

Event.observe('div1', 'click', gsubTest);
Event.observe('div2', 'mouseover', function(){Element.setStyle('div2',{"backgroundColor" : "pink"});});
Event.observe('div2', 'mouseout', function(){Element.setStyle('div2',{"backgroundColor" : "white"});});
</script>
    <a href="javascript:timesTest()">timesTest</a>
    <a href="javascript:insertText()">insertText</a>
    <a href="javascript:gsubTest()">gsubTest</a>
    <a href="javascript:stripTagsTest()">stripTagsTest</a>
    <a href="javascript:testStyle()">Style</a>


Powered by ScribeFire.

posted by hirono at 21:01| Comment(0) | TrackBack(0) | JavaScript
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/36274116

この記事へのトラックバック