Javascript事件: 1事件源 2事件 3事件程序

Javascript事件:   1事件源  2事件 3事件程序

Javascript是基于事件驱动的一种程序,所有的特效都是基于事件来进行触发的.  行为=事件+动作

一 事件源[任何一个html元素(节点),如body,div,button,p,a,h1……]

二 事件[用户操作]      on  + 事件

鼠标:

click           是在鼠标点击弹起之后触发的事件

dbclick

mouseover

mouseout

mousedown     onmousedown事件则是在鼠标按键按下去的瞬间触发的

mouseup       鼠标抬起     

mousemove     鼠标移动

         drag           按住鼠标拖动

      键盘:

  Keypress 键盘事件

Keyup   抬起

Keydown 按下

文档:

load  加载 onload

unload 关闭

beforeunload 关闭之前

     表单:  

         focus  获取焦点事件

         blur   失去焦点事件

         例如: οnfοcus="this.value=''" οnblur="this.value='please input username'"

submit  提交事件  <input type=”submit”   value=”” />

         change  改变事件  当控件内容改变时用到,例如  <select></select>

     其它:

        Scroll   滚动事件

        Selected  选择事件

        Selectstart  

        Contextmenu 禁止右键

 …….

有三种方法加事件:

      第一种:

           <tag  on事件=”事件处理程序” >……..</tag>  

// 事件处理程序可以是一个函数

<div οnclick=”pra()”></div>

  第二种:

<script>

        事件源.on事件=事件处理程序

        div.οnclick=function() {//程序源码 }

</script>

        

第三种:  (了解即可)

   <script for=”事件源ID”  event=”事件”>事件处理程序</script>

          注：一个事件源上可以加多个事件

三 事件处理程序(事件发生后的处理程序)(略)

event.altKey、event.ctrlKey、event.shiftKey 属性

HTML DOM

event.altKey

语法：event.altKey

取值：true | false / 1|0

说明：

altKey属性为true表示事件发生时Alt键被按下并保持，为false则Alt键没有按下。 
altKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。 
 
event.ctrlKey 
功能：检测事件发生时Ctrl键是否被按住了。

语法：event.ctrlKey

取值：true | false  1|0

说明：

ctrlKey属性为true表示事件发生时Ctrl键被按下并保持，为false则Ctrl键没有按下。 
ctrlKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。 
 
event.shiftKey 
功能：检测事件发生时Shift键是否被按住了。

语法：event.shiftKey

取值：true | false  1|0

说明：

shiftKey属性为true表示事件发生时Shift键被按下并保持，为false则Shift键没有按下。 
shiftKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。 
 
 实例1 ：组合操作示例

<input id="txt1" type="text" value="Hello World!" οnclick="checkAlt(event)" />

<script type="text/javascript">

function checkAlt(oEvent)

{

  if( oEvent.altKey )

    document.getElementById("txt1").select();

}

</script>

 

这段代码的效果为： 如果按住Alt键再单击上面的文本框，可以选中文本框中的文本。

 
 实例2 ：组合操作示例

<input id="txt2" type="text" value="Hello World!" οnclick="clearText(event)" />

<script type="text/javascript">

function clearText(oEvent)

{

  if( oEvent.ctrlKey && oEvent.keyCode==46 )

    document.getElementById("txt2").value = "";

}

</script>

这段代码的效果为： 使用"Ctrl+Del"组合键可清除上面的文本框的内容。（必须先使文本框获得焦点。本例只适用于IE浏览器。）

 
 实例3 ：组合操作示例

<div id="box" style="width:50px; height:25px;border:1px solid black; background-color:red" οnclick="setColor(event)"></div>

<script type="text/javascript">

var b = true;

function setColor(oEvent)

{

  if( oEvent.shiftKey && b )

    document.getElementById("box").style.backgroundColor = "blue";

  if( oEvent.shiftKey && !b )

    document.getElementById("box").style.backgroundColor = "red";

  b = !b;

}

</script>

这段代码的效果为：按住"Shift"键并用鼠标点击上面的色块，可改变色块颜色