Javascript基础知识（二）事件

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 type="button">当用户点击按钮时：input-body-html-document-window（从下往上冒泡）IE浏览器只是用冒泡

2.捕获类型: <input type="button">当用户点击按钮时：window-document-html-body-input （从上往下）

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

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

1.<input type="button" onclick="alert('helloworld!')">

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

3.<input type="button" id="input1"> //匿名函数

<script>

 Var button1=document.getElementById("input1");

 button1.onclick=funtion(){

 alert('helloword!')

 }

</script>

3.现代事件书写方式：

<input type="button" id="input1">  //IE中添加事件

<script>

 var fnclick(){

 alert("我被点击了")

 }

 var Oinput=document.getElementById("input1");

 Oinput.attachEvent("onclick",fnclick);

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

 Oinput.detachEvent("onclick",fnclick);//IE中删除事件

</script>

<input type="button" id="input1">  //DOM中添加事件

<script>

 var fnclick(){

 alert("我被点击了")

 }

 var Oinput=document.getElementById("input1");

 Oinput.addEventListener("onclick",fnclick,true);

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

 Oinput.removeEventListener("onclick",fnclick);//DOM中删除事件

</script>

<input type="button" id="input1"> //兼容IE和DOM添加事件

<script>

 var fnclick1=function(){alert("我被点击了")}

 var fnclick2=function(){alert("我被点击了")}

 var Oinput=document.getElementById("input1");

 if(document.attachEvent){

 Oinput.attachEvent("onclick",fnclick1)

 Oinput.attachEvent("onclick",fnclick2)

 }

 else(document.addEventListener){

 Oinput.addEventListener("click",fnclick1,true)

 Oinput.addEventListener("click",fnclick2,true)

 }

</script>