您当前的位置: 站长圈 > 网页前端

什么是js事件

来源:站长圈|0 作者:adminzzq 点击: 0
什么是js事件:js和html之间的交互就是通过用户和浏览器操作页面时发生的事件来处理。

对用户的操作作出反应。

一, 事件的类型:
1,鼠标事件:
(1)click:用户发生鼠标左键点击的时候触发。

点击按钮事件发生以后响应的是弹出这个按钮的标签名。
(2)dblclick:鼠标双击。
(3)mouseover:鼠标移上去
(4)mouseout: 鼠标离开
(5)mousedown:用户点击任意鼠标任意一个键。
(6)mouseup:用户松开鼠标。

一个事件触发,就会生成一个event对象。
event对象只是在事件触发的时候产生,然后绑定事件处理函数可以使用这个对象。函数结束,对象也就消失了。其他任何也不能使用。
通过event对象,我们可以知道发生事件的元素以及鼠标,键盘,屏幕的一些参数。
ie9里触发onclick事件时遍历event对象属性和方法的方法(后面会介绍更为标准的监听器来绑定函数):

<script type="text/javascript">
function fn(){
for(i in event){
document.write(i+":"+event[i]+"
");

}
}
</script>
recordset:null
火狐里触发onclick事件时遍历event对象属性和方法的方法(后面会介绍更为标准的监听器来绑定函数):

<script type="text/javascript">
document.getElementById('button').onclick=function (e){
for(i in e){
document.write(i+":"+ e[i]+"
");

}
}
</script>

clientX:鼠标点击时候鼠标所在的位置的X坐标
clientY:鼠标点击时候鼠标所在的位置的Y坐标。

ctrlKey:ctrl键有没有被按下。
keyCode:键盘按下的键的键码。

offsetX:鼠标相对于发生事件的元素的X偏移量。
offsetY:鼠标相对于发生事件的元素的Y偏移量。

screenX:鼠标离屏幕左边的距离。
screenY:

srcElement:引发事件的元素。(ie)其他浏览器都是叫target
type:事件类型。

给元素绑定事情函数。给元素添加一个监听器。
标准的浏览器添加监听器的方法:obj.addEventListener(事件'mouseover',函数fn,事件流false);
ie里添加事件监听的方法:obj.attachEvent(事件'onmouseover',函数fn);
以上两种监听器的不同:
1)监听器名称不同
2)事件的写法不同,如鼠标单击在火狐里是click,在ie里是onclick
3)事件流,因为ie不支持捕获,它没有第3个参数,为了兼容更多浏览器,一般其他浏览器的事件流都用false(冒泡)
现在用添加监听器的方法来修改之前我们写的代码:
火狐浏览器:

<script type="text/javascript">
var obj=document.getElementById('button');
obj.addEventListener('click',fn,false);
function fn(e){
for(i in e){
document.write(i+":"+ e[i]+"
");

}
}
</script>
ie浏览器:

<script type="text/javascript">
var obj=document.getElementById('button');
obj.attachEvent('onclick',fn);
function fn(){
for(i in event){
document.write(i+":"+ event[i]+"
");

}
}
</script>

事件流:
事件冒泡:由最里层的元素向上层元素传递的事件方式
捕获:由外里层的元素向里层元素传递的事件方式
下面的例子将告诉你什么是冒泡。




我们在body、div和button上都绑定了一个事件,当你点击body时会弹出“body”,点击div时会弹出“div”,点击button时会弹出“button”。现在我们去浏览器里点击一下按钮试试,发现3个事件都触发了,也就是说你虽然看上去只点击了button而没有点击div和body,但是因为button是div的子元素,而div又是body的子元素,所以就产生了这种事件的冒泡,一层层向外咕噜噜地响应每个节点上绑定的事件了。


2,键盘事件:
(1)keydown:用户按键盘。
(2)keypress:按下一个键,并产生一个字符的时候发生。
(3)keyup:释放按键的时候发生的事件。

event.keyCode属性。
e.keyCode

3,HTML事件:浏览器的窗口或者是浏览器和服务器之间交互的时候所发生的事件。
load:页面载入完成发生。window对象上触发。
unload:页面退出的时候
error:脚本出现错误的时候发生的事件。
select:input框,选中的时候触发的事情。
change:下拉框的value值发生改变的时候触发。
submit:点击提交按钮
reset:点重置按钮的时候。
focus:得到焦点。
blur:失去焦点。
scroll:用户在带滚动条的元素上滚动的时候触发。