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

» JWorld@TW » Web Design 版  

按列印兼容模式列印這個話題 列印話題    把這個話題寄給朋友 寄給朋友    訂閱主題
reply to postflat modego to previous topicgo to next topic
本主題所含的標籤
無標籤
作者 請問有關javascript的註冊事件處理常式
Ponylin





發文: 38
積分: 0
於 2011-02-14 13:43 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
這裡有一些簡單的javascript事件處理常式的問題,想請教大家

當我使用document物件的getElementById()方法取得html中的元件,假設我沒有在某一個函式中使用這個方法的話,getElementById()好像會回傳null? 為什麼會這樣呢? 一定要在某的函式(function)中才能正確的使用document.getElementById()嗎?
而且我好像也發現,我在 event1.htm中的第29行 btnObj1.onclick = doSome;
我知道在javascript中,函式是一種first class function,可以視為一種物件指派給一個變數,我以為我在第29行的指派會成功的註冊事件處理常式,但是當我用google的瀏覽器debug時,卻發現29行有錯誤訊息,
好像是說Uncaught TypeError: Cannot set property 'onclick' of null

但是,當我使用event2.htm的方式來撰寫javascript指令稿時,就可以順利的執行!
我不太能明白為什麼會這樣? 這個問題困擾我蠻久了...
我之前一直都是使用html行內事件處理常式的方式來註冊事件,雖然那樣很直觀,但我知道這不是很好的方法,但每次在<script>中想註冊事件,一直出錯,每次getElementById()就一直回傳null... 然後設定某html的onclcik也變成null...

謝謝大家的幫忙!!!

event1.htm
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
<html>
  <head>
    <title>事件處理常式註冊</title>
    <script type="text/javascript">
      /*
      var  bodyObj = document.getElementById('body');
      bodyObj.onload = function () {
        alert('welcome home');
      };
      
      var btn1Obj = document.getElementById('btn1');
      
      
      
      btn1Obj.onclick = doSomething;
      
      */
      
      var doSome = function doSomething() {
        alert('wow... you click me now...');
      }
      
      function getHtmlObj (htmlObjId) {
        var htmlObj = document.getElementById(htmlObjId);
        return htmlObj;
      }
      
      var btnObj1 = getHtmlObj('btn1');    
      btnObj1.onclick = doSome;
    </script> 
  </head>
  <body id="body">
    <form>
      <input type="button" id="btn1" value="按鈕一">
    </form>
  </body>
 
</html>


event2.htm
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
47
48
<html>
  <head>
    <title>事件處理常式2</title>
  </head>
  
  <script type="text/javascript">
      window.onload = function() {
               alert('welcome to my place!');
        
        function getHtmlObj(id) {
          return document.getElementById(id);
        }
        
        function doSomething(htmlObj) {
          alert('you click ' + htmlObj.value + ' ...');
        }
        
        function writeSomething() {
          document.write('you must click the 按鈕三');
        }
        
        var  btnObj1 = getHtmlObj('btn1');
        btnObj1.onclick = function() {
          alert('you click 按鈕一');
        };
        
        var btnObj2 = getHtmlObj('btn2');
        btnObj2.onclick = doSomething;
        
        var btnObj3 = getHtmlObj('btn3');
        btnObj3.onclick = function() {  // 當btn3被觸發onclick事件時,會執行該匿名函式中的兩個函式
          doSomething(this);
          writeSomething();  // 當該函式被啟動時,寫入的文字會覆蓋掉原本的html元件
        };
        
            };
  
      
  </script>
  
  <body>
    <form>
      <input type="button" id="btn1" value="按鈕一">
      <input type="button" id="btn2" value="按鈕二">
      <input type="button" id="btn3" value="按鈕三">
    </form>
  </body>
</html>


reply to postreply to post
喜歡自由/前衛爵士樂的Java新手
話題樹型展開
人氣 標題 作者 字數 發文時間
979 請問有關javascript的註冊事件處理常式 Ponylin 2575 2011-02-14 13:43
894 Re:請問有關javascript的註冊事件處理常式 caterpillar 52 2011-02-14 14:20
1027 Re:請問有關javascript的註冊事件處理常式 Ponylin 53 2011-02-14 15:39
917 Re:請問有關javascript的註冊事件處理常式 kenshin520 219 2011-02-14 14:24
887 Re:請問有關javascript的註冊事件處理常式 Ponylin 57 2011-02-14 15:32
» JWorld@TW »  Web Design 版

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

JWorld@TW 本站商標資訊

Powered by Powerful JuteForum® Version Jute 1.5.8