DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> 淺談 javascript 事件處理
淺談 javascript 事件處理
編輯:JavaScript基礎知識     

事件處理

一、事件源:任何一個HTML元素(節點),body、div、button

二、事件:你的操作

                鼠標:
    click    單擊
    dblick  雙擊
    oncontextmenu 文本菜單

復制代碼 代碼如下:              
   <body oncontextmenu="return false">//禁止右鍵的程序

    mouseover 放上
    mouseout 離開
    mousedown 按下
    mouseup  抬起
    mousemove 鼠標移動

   鍵盤:
    keypress 鍵盤事件
    keyup  抬起
    keydown  按下

   文檔:
    load   加載
    onload 是頁面加載完成之後觸發的事件
    unload  關閉
    breforeunload關閉之前

   表單:
    focus  焦點事件
    blur  失去焦點
    submit  提交事件
    change  改變事件

   其它:
    scroll  滾動
    selectstart 選擇事件

三、事件處理程序

    第一種:
     格式:<tag on事件="事件處理程序" />
    實例:

復制代碼 代碼如下:
<script>
  function show(){
   var one=document.getElementById("one");
   alert(one.innerText);
  }
  show();
</script>
<body>
<div id="one">
 wwwwwwwwwwwwwwwww
</div>
<input type="button" onclick="show()" value="show">

第二種:
 直接在javascript裡邊對象.on處理程序

復制代碼 代碼如下:       
 <div id="two">
 你好,http://www.jb51.net
 </div>
 <script>
  var one=document.getElementById("two");
  one.onclick=function(){
   this.style.backgroundColor="red";
  }
 </script>

第三種:
  基本沒什麼人用

復制代碼 代碼如下:
<script for="事件源ID" event="事件">事件處理程序</script>
<div id="th">
 你好,http://www.jb51.net
 </div>
 <script for="th" event="onclick">
  var one=document.getElementById("th");
 one.style.backgroundColor="red";
 </script>

小伙伴們是否了解了javascript的事件處理了呢,有疑問就給我留言吧。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved