javascript事件篇

来源:互联网 发布:移动3g网络的上传速度 编辑:程序博客网 时间:2024/05/29 04:14

事件:

js使我们有能力创建动态页面,网页中的每个元素都可以产生某些可以触发js函数的事件。我们可以认为事件是可以被js侦测到的一种行为。

事件流:

事件流主要分为冒泡型事件和捕获型事件,IE浏览器目前只支持冒泡型事件,而支持标准DOM的浏览器比如火狐chrome等两者都支持。
冒泡型事件:从内而外
捕获型事件:从外而内

使用返回值改变html元素的默认行为:
html元素大都包含了自己的默认行为,例如:超链接、提交按钮等,我们可以通过在绑定事件中加上return false;来阻止它的默认行为。

通用性的事件监听方法:

(1)绑定html元素属性<input type="button" value="clickMe" onclick="checkAction()" />(2)绑定DOM对象属性//test为函数名,不能加(),加()是调用的意思document.getElementById('btn1').onclick = test;或者:document.getElementById('btn1').onclick = function(){    //表达式}

非通用性的事件监听方法:

IE浏览器的事件监听方法[object].attackEvent('事件类型', '处理函数');  //添加监听[object].detachEvent('事件类型', '处理函数');  //取消监听
标准DOM中的事件监听方法[object].addEventListener('事件类型', '处理函数', '冒泡型事件或捕获型事件');[object].removeEventListener('事件类型', '处理函数', '冒泡型事件或捕获型事件');
提示:IE监听方法中的事件类型和标准DOM监听方法中的事件类型写法有点不同,前者事件类型'on'开头,比如:'onclick', 'onmousemove'等,而后者不需要'on',就是'click', 'mousermove'等注意:在js中window.onload=function(){}中表示整个html文档加载完成后调用。

访问事件对象

事件对象封装了事件发生的详细信息,尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。

标准DOM中的事件对象:在标准DOM浏览器检测到了发生了某个事件时,将自动创建一个Event对象,并隐式地将该对象作为事件处理函数的第一个参数传入。//在IE中得到事件对象op.onclick = function(){    //event本身存在,作为window的一个对象    var event = window.event;}//在标准DOM中得到事件对象op.onclick = function(event){    //event做为参数传进来}经验之谈:为了兼容不同的浏览器,通常采用下面的方法得到事件对象。op.onclick = function(event){    if(window.event){        event = window.event;    }]

Event事件对象常用属性

常用的鼠标事件:onclick:单击鼠标左键触发ondbclick:双击鼠标左键触发onmousedown:单击任意一个鼠标按键时触发onmouseout:鼠标指针移出一个元素边界时触发onmousemove:鼠标在某个元素上移动时持续触发onmouseup:松开鼠标任意一个按键时触发onmouseover:鼠标指针移动到一个元素上时触发
常用的键盘事件:onkeydown:按下键盘上某个按键时触发,一直按会持续触发onkeyup:释放某个按键时会触发onkeypress:按下某个按键并产生字符时触发,忽略shift等功能键
html事件:onload:页面完全加载后在window对象上触发onunload:页面完全卸载后在window对象上触发onselect:选择了文本框的一个或多个字符时触发onchange:文本框失去焦点时,并且在它获取焦点后内容发生过改变时触发onsubmit:单击‘提交’按钮时在表单form上触发onfocus:任何元素或窗口获得焦点时触发onblur:任何元素或窗口失去焦点时触发

提示:载入事件onload是最常用的事件之一,因为在页面载入完成之前,DOM的框架还没有搭建完成,因此任何相关操作都不能发声。给window对象分配的onloadonunload事件等同与<boby>元素的onload()onunload()方法

原创粉丝点击