Javascript基础知识（二）事件_基础知识
- WBOY原创
- 2016-05-16 16:34:561114浏览
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>