JWorld@TW the best professional Java site in Taiwan
      註冊 | 登入 | 全文檢索 | 排行榜  

» JWorld@TW » EJB / 其它Java EE 討論區  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友   
reply to topicthreaded modego to previous topicgo to next topic
本主題所含的標籤
作者 html網頁元件事件的聆聽
lonely741215

數學才是王道



發文: 196
積分: 0
於 2013-09-12 21:29 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
   <head>
      <title>Patterns</title>
      <meta charset="utf-8"/>
      <style type="text/css">
         #canvas {background:#eeeeee;
                  border:thin solid cornflowerblue;}
         #radios {padding:10px;}
      </style>
   </head>
   <body>
      <div id="radios">
         <input type="radio" name="patternRadio" id="repeatRadio" checked="checked"/>repeat
         <input type="radio" name="patternRadio" id="repeatXRadio"/>repeat-x
         <input type="radio" name="patternRadio" id="repeatYRadio"/>repeat-y
         <input type="radio" name="patternRadio" id="noRepeatRadio"/>no repeat
      </div>
      <canvas id="canvas" width="450" height="275">
         Canvas not supported
      </canvas>
      <script src="source.js"></script>
   </body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var repeatRadio = document.getElementById("repeatRadio");
var noRepeatRadio = document.getElementById("noRepeatRadio");
var repeatXRadio = document.getElementById("repeatXRadio");
var repeatYRadio = document.getElementById("repeatYRadio");
var image = new Image();
 
function fillCanvasWithPattern(repeatString)
{
  var pattern = context.createPattern(image,repeatString);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = pattern;
  context.fillRect(0, 0, canvas.width, canvas.height);
}
 
var radios = document.getElementById("radios");
var child = radios.getElementsByTagName("input");
var childName = new Array(child.length);
childName[0] = "repeat";
childName[1] = "repeat-x";
childName[2] = "repeat-y";
childName[3] = "no-repeat";
for(var i = 0 ; i < child.length ; i++)
{
  child[i].onclick = function(e)
  {
    fillCanvasWithPattern(childName[i]);  //這個for迴圈希望可以簡單去讓每個child都加上事件,不過不知道為什麼
  };                                        //只要使用for,就讀不到事件,如果我把for移除,然後把child逐一.onclick
}                                             //那麼事件的聆聽就很正常
image.src = "anim02.gif";
image.onload = function(e)
{
  fillCanvasWithPattern(childName[3]);
};


各位好,以上code源自書上的例子,小弟試圖用for迴圈來完成事件的聆聽,以免元件太多,逐一去加入會很麻煩,不過也不知道為什麼,如果逐一加入事件聆聽就沒問題,可是如以上的寫法就讀不到,想請教各位大大指點,先謝謝了Shy


reply to postreply to post
數學啊數學~總有一天我要狂嗑你!!
作者 Re:html網頁元件事件的聆聽 [Re:lonely741215]
Duncan

還隱隱作痛

版主

發文: 7816
積分: 39
於 2013-09-13 00:22 user profilesend a private message to usersend email to Duncanreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
lonely741215 wrote:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
   <head>
      <title>Patterns</title>
      <meta charset="utf-8"/>
      <style type="text/css">
         #canvas {background:#eeeeee;
                  border:thin solid cornflowerblue;}
         #radios {padding:10px;}
      </style>
   </head>
   <body>
      <div id="radios">
         <input type="radio" name="patternRadio" id="repeatRadio" checked="checked"/>repeat
         <input type="radio" name="patternRadio" id="repeatXRadio"/>repeat-x
         <input type="radio" name="patternRadio" id="repeatYRadio"/>repeat-y
         <input type="radio" name="patternRadio" id="noRepeatRadio"/>no repeat
      </div>
      <canvas id="canvas" width="450" height="275">
         Canvas not supported
      </canvas>
      <script src="source.js"></script>
   </body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var repeatRadio = document.getElementById("repeatRadio");
var noRepeatRadio = document.getElementById("noRepeatRadio");
var repeatXRadio = document.getElementById("repeatXRadio");
var repeatYRadio = document.getElementById("repeatYRadio");
var image = new Image();
 
function fillCanvasWithPattern(repeatString)
{
  var pattern = context.createPattern(image,repeatString);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = pattern;
  context.fillRect(0, 0, canvas.width, canvas.height);
}
 
var radios = document.getElementById("radios");
var child = radios.getElementsByTagName("input");
var childName = new Array(child.length);
childName[0] = "repeat";
childName[1] = "repeat-x";
childName[2] = "repeat-y";
childName[3] = "no-repeat";
for(var i = 0 ; i < child.length ; i++)
{
  child[i].onclick = function(e)
  {
    fillCanvasWithPattern(childName[i]);  //這個for迴圈希望可以簡單去讓每個child都加上事件,不過不知道為什麼
  };                                        //只要使用for,就讀不到事件,如果我把for移除,然後把child逐一.onclick
}                                             //那麼事件的聆聽就很正常
image.src = "anim02.gif";
image.onload = function(e)
{
  fillCanvasWithPattern(childName[3]);
};


各位好,以上code源自書上的例子,小弟試圖用for迴圈來完成事件的聆聽,以免元件太多,逐一去加入會很麻煩,不過也不知道為什麼,如果逐一加入事件聆聽就沒問題,可是如以上的寫法就讀不到,想請教各位大大指點,先謝謝了Shy


(你覺得)沒有作用是由於觸發的 callback function 傳遞了無效的值給 fillCanvasWithPattern function,不是事件沒有觸發。
這個錯誤是由於 Javascript function 在 capture 外部 scope 的變數時,不是抓 function creation 時變數當時的值。

改正這個錯誤一個簡單的方法是透過 factory function 來產生 callback function。
在你的 source.js 裡加上一個函式:
1
2
3
4
5
function createFillWithCallback(s) {
    return function(e) {
        fillCanvasWithPattern(s);
    }
}


原本的 line 24 ~ line 30 改成:
1
2
3
4
for(var i = 0 ; i < child.length ; i++)
{
    child[i].onclick = createFillWithCallback(childName[i]);
}


reply to postreply to post

給我
辣味豆腐 其餘免談
作者 Re:html網頁元件事件的聆聽 [Re:lonely741215]
simpleisgood





發文: 41
積分: 0
於 2013-09-13 01:20 user profilesend a private message to usersend email to simpleisgoodreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
你以上寫的JS程式碼呢與下面的意義相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var repeatRadio = document.getElementById("repeatRadio");
var noRepeatRadio = document.getElementById("noRepeatRadio");
var repeatXRadio = document.getElementById("repeatXRadio");
var repeatYRadio = document.getElementById("repeatYRadio");
var image = new Image();
 
function fillCanvasWithPattern(repeatString)
{
  var pattern = context.createPattern(image,repeatString);
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillStyle = pattern;
  context.fillRect(0, 0, canvas.width, canvas.height);
}
 
var radios = document.getElementById("radios");
var child = radios.getElementsByTagName("input");
var childName = new Array(child.length);
childName[0] = "repeat";
childName[1] = "repeat-x";
childName[2] = "repeat-y";
childName[3] = "no-repeat";
// i 宣告於for迴圈內的意義與java不同哦,不是以{}作為scope介定的
var i;
// 同理, 
var click_func;
for(i = 0 ; i < child.length ; i++)
{
  click_func = function(e)
  {
    fillCanvasWithPattern(childName[i]);  
  };                                       
  child[i].onclick = click_func;
}                                        
// 加上這行,你會發現i還有效,就算i宣告於for迴圈內
alert(i);
// 同理,事實上最後你全部的child.onclick都指向了同一個click_func
// 而且這個click_func的動作是fillCanvasWithPattern(childName[4]);
// 也就是fillCanvasWithPattern(undefined);
 
image.src = "anim02.gif";
image.onload = function(e)
{
  fillCanvasWithPattern(childName[3]);
};


這完全是JS變數scope造成的誤解Smile


reply to postreply to post
Simple is good
作者 Re:html網頁元件事件的聆聽 [Re:lonely741215]
lonely741215

數學才是王道



發文: 196
積分: 0
於 2013-09-13 17:25 user profilesend a private message to userreply to postreply to postsearch all posts byselect and copy to clipboard. 
ie only, sorry for netscape users:-)add this post to my favorite list
原來是如此,非常感謝兩位如此詳細的解說以及給予例子說明,謝謝~!!Blush

reply to postreply to post
數學啊數學~總有一天我要狂嗑你!!
» JWorld@TW »  EJB / 其它Java EE 討論區

reply to topicthreaded modego to previous topicgo to next topic
  已讀文章
  新的文章
  被刪除的文章
Jump to the top of page

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8