javascript的常用事件

本文详细介绍了网页中的各种事件,包括鼠标键盘事件、表单相关事件及页面相关事件,并讲解了如何在JavaScript中绑定这些事件处理程序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

事件

说明

 

 




鼠标键盘事件

 

onclick

鼠标单击时触发此事件

ondblclick

鼠标双击时触发此事件

onmousedown

按下鼠标时触发此事件

onmouseup

鼠标按下后松开鼠标时触发事件

onmouseover

当鼠标移动到某对象范围的上方时触发此事件

onmousemove

鼠标移动时触发此事件

onmouseout

当鼠标离开某对象范围的上方时触发此事件

onkeypress

当键盘上的某个键被按下并且释放时触发此事件

onkeydown

当键盘上某个按键被按下时触发此事件

onkeyup

当键盘上某个按键被按下后松开时触发此事件

 

 

表单相关事件

onfocus

当某个元素获得焦点时触发此事件

onblur

当前元素失去焦点时触发此事件

onchange

当前元素失去焦点并且元素的内容发生改变时触发此事件

onsubmit

一个表单被提交时触发此事件

onreset

当前表中的RESET的属性被激活时触发此事件

 

页面相关事件

onload

页面内容完成时触发此事件(也就是页面加载事件)

onunload

当前页面被改变时触发此事件

onresize

当浏览器的窗口大小被改变时触发此事件

事件处理器的命名原则是:在事件名称前加上on。

<form id="form1"  name="form1" method="post" action="">

<input id="save" name="save" type="button" value="保存">

</form>

<script>

form1.save.onclick=function(){//绑定单击事件

alert("单击了保存按钮");

}

</script>

javascript中指定事件处理程序时,事件名称必须小写,才能正确相应事件。

事件对象

在IE浏览器中事件对象是Window对象的一个属性event,并且event对象只能在事件发生时被访问,

当所有的事件处理完后,该对象就消失了。而标准的DOM中规定event必须作为唯一的参数传给事件处理函数。

因此为了实现兼容性,通常采用下面的方法:

function someHandle(event)

{//处理兼容性,获取事件对象

if(window.event)

event=window.event;

}

在IE浏览器中,发生事件的元素通过event对象的srcElement属性获取,而在标准的DOM浏览器中,发生事件的元素通过event对象的target属性获取。为了处理两种浏览器兼容性,举例代码如下:

<form name="form1" id="form1" action="" method="post">

<input type="button" value="保存" name="save" id="save"/>

</form>

<script>

function handle(oEvent)

{

if(window.event)oEvent=window.event;//处理兼容性,获取事件对象

var oTarget;

if(oEvent.srcElement)//处理兼容性,获取发生事件的元素

oTarget=oEvent.srcElement;

else

oTarget=oEvent.target;

alert(oTarget.tagName);//弹出发生事件的元素标记名称

}

form1.save.onclick=handle;//为按钮绑定单击事件

</script>

上面示例中使用了event对象的srcElement属性或target属性,在事件发生时获取鼠标单击对象的名称,便于对该对象进行操作

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

常用javaScript事件归纳。 常用事件: 1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit buttons(提交按钮) 例如可通过下列按钮激活change()文件: 2.onLoad页面加载事件:当页面加载时,自动调用函数(方法)。注意:此方法只能写在标签之中! 3.onScroll窗口滚动事件:当页面滚动时调用函数。注意:此事件写在方法的外面,且函数名(方法名)后不加括号!例:window.onscroll=move; 4.onBlur失去焦点事件:当光标离开文本框是触发调用函数。 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时,引发该文件,他与onFocas事件是一个对应的关系。 5.onFocus事件:光标进入文本框时触发调用函数。 当用户单击Text或textarea以及select对象时,产生该事件。 6.onChange事件:文本框的value值发生改变时调用函数。当利用text或textarea元素输入字符值改变时发该事件,同时当在select表格项中一个选项状态改变后也会引发该事件。例: 7.onSubmit事件:属于表单元素,写在表单标签内。语法:onSubmit=”return 函数名()” 8.onKeyDown事件:在输入框中按下键盘上的任何一个键时,都会触发事件,调用函数。注意:此事件写在方法的外面,且函数名(方法名)后不加括号!例:document.onkeydown=函数名()。 9.setTimeout(“函数名()”,间隔时间(以毫秒为单位)); 10.clearTimeout(对象) 清除已设置的setTimeout对象 鼠标相关事件: 1.onMouseOver:鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域之内,无论怎样移动斗志触发一次函数。 2.onMouseOut:鼠标离开某对象范围时,触发事件调用函数。 3.onMouseMove: 鼠标移动到某对象范围的上方时,触发事件调用函数。注意:在同一个区域之内,只要一动一次就出发一次事件调用一次函数。 4.onmouseup 当鼠标松开 5.onmousedown 当鼠标按下键 document对象常用的方法: 1.document.getElementById():通过id获得唯一的一个HTML元素,没有id时,通过name查找 2.document.getElementByName():获取相同名称的一组元素。主要用于表单中的复选框 Date对象常用方法: Var a=new Date(); //创建a为一个新的时期对象 y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份 y1=a.getFullYear(); //获取全年份数 四位数年份 m=a.getMonth(); //获取月份值(0-11) d=a.getDate(); //获取日期值 d1=a.getDay(); //获取当星期值 h=a.getHours(); //获取当小时数 m1=a.getMinutes(); //获取当分钟数 s=a.getSeconds(); //获取当秒钟数
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值