首页 > web前端 > js教程 > Javascript基础知识(二)事件_基础知识

Javascript基础知识(二)事件_基础知识

WBOY
发布: 2016-05-16 16:34:56
原创
1125 人浏览过

Event对象:(event对象是window对象的属性,当事件发生时,同时产生event对象,事件结束,event对象消失)

IE中:window.event;//获取对象

DOM中:argument[0];//获取对象

IE中Event对象常用的属性方法:

1.clientX:事件发生时,鼠标指针在客户区(不包括工具栏,滚动条等)的X坐标;

2.clientY:事件发生时,鼠标指针在客户区(不包括工具栏,滚动条等)的Y坐标;

3.keyCode:对于keyCode事件,指示按下的键的Unicode字符,对于keydown/keyup事件,指示按下的键盘是数字表示器(获得按键的数值);

4.offsetX:鼠标指针相对于引发事件的对象的X坐标;

5.offsetY:鼠标指针相对于引发事件的对象的Y坐标;

6.srcElement:导致事件发生的元素;

DOM中event对象常用的属性方法:

1.clientX;

2.clientY;

3.pageX;鼠标指针相对于页面的X坐标;

4.pageY;鼠标指针相对于页面的Y坐标;

5.StopPropagation:调用该方法可以阻止事件的进一步传播(冒泡);

6.target:触发的事件元素/对象;

7.type:事件的名称;

两种event对象的相同点和不同点

相同点:

1.获取事件类型;

2.获取键盘代码(keydown/keyup事件);

3.检测Shift,Alt,Ctrl;

4.获取客户区坐标;

5.获取屏幕坐标;

不同点:

1.获取目标;

//IE:var oTarget=oEvent.srcElement;

//DOM: var oTarget=oEvent.target;

2.获取字符码;

//IE: var iCharCode=oEvent.keyCode;

//DOM: var iCharCode=oEvent.charCode;

3.阻止事件的默认行为;

//IE: oEvent.returnValue=false;

//DOM: oEvent.preventDefault;

4.终止冒泡:

//IE:oEvent.cancelBubble=true;

//DOM:oEvent.stopPropagation

事件类型:

一.鼠标事件:

onmouseover:当鼠标移入时;

onmouseout:当鼠标移出时;

onmousedown:当按下鼠标时;

onmouseup:当抬起鼠标时;

onclick:点击鼠标左键时;

ondblclick:双击鼠标左键时;

二.键盘事件:

onkeydown:当用户在键盘上按下一个键时发生;

onkeyup:当用户释放一个按下的键时发生;

keypress:当用户一直按着键不放时;

三.HTML事件:

onload:加载页面时;

onunload:卸载页面时;

abort:当用户终止装载进程之前,如果他还没有被完全转载,发生abort事件

error:javascript发生错误时,产生的事件;

select:在一个input或者textarea中,用户选择字符时,触发的select事件

change:在一个input或者textarea中,当它失去焦点,在select中触发change事件

submit:当表单被提交时,触发submit事件;

reset:重置

resize:当窗口或框架尺寸调整时触发的事件;

scroll:当用户滚动或有滚动条时触发的事件;

focus:失去焦点时;

blur:获得焦点时;

Javascript的事件模型

1.Javascript事件模型:1.冒泡类型: 当用户点击按钮时:input-body-html-document-window(从下往上冒泡)IE浏览器只是用冒泡

    2.捕获类型: 当用户点击按钮时:window-document-html-body-input (从上往下)

经过ECMA标准化后,其他浏览器都支持两种类型,捕获先发生。

2.传统事件书写的三种方式:

1.

2.======<script>function name1(){alert('helloword!');}</script> //有名函数

3.  //匿名函数

复制代码 代码如下:

<script><br /> Var button1=document.getElementById("input1");<br /> button1.onclick=funtion(){<br /> alert('helloword!')<br /> }<br /> </script>

3.现代事件书写方式:

复制代码 代码如下:

  //IE中添加事件

<script><br /> var fnclick(){<br /> alert("我被点击了")<br /> }<br /> var Oinput=document.getElementById("input1");<br /> Oinput.attachEvent("onclick",fnclick);<br /> --------------------------------------<br /> Oinput.detachEvent("onclick",fnclick);//IE中删除事件<br /> </script>

复制代码 代码如下:

  //DOM中添加事件

<script><br /> var fnclick(){<br /> alert("我被点击了")<br /> }<br /> var Oinput=document.getElementById("input1");<br /> Oinput.addEventListener("onclick",fnclick,true);<br /> --------------------------------------<br /> Oinput.removeEventListener("onclick",fnclick);//DOM中删除事件<br /> </script>

复制代码 代码如下:

//兼容IE和DOM添加事件

<script><br /> var fnclick1=function(){alert("我被点击了")}<br /> var fnclick2=function(){alert("我被点击了")}<br /> var Oinput=document.getElementById("input1");<br /> if(document.attachEvent){<br /> Oinput.attachEvent("onclick",fnclick1)<br /> Oinput.attachEvent("onclick",fnclick2)<br /> }<br /> else(document.addEventListener){<br /> Oinput.addEventListener("click",fnclick1,true)<br /> Oinput.addEventListener("click",fnclick2,true)<br /> }<br /> </script>

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板