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"键并用鼠标点击上面的色块，可改变色块颜色
