Javascript基础知识（二）事件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Javascript基础知识（二）事件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3913字，纯文字阅读大概需要6分钟。
内容图文
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>
内容总结
以上是互联网集市为您收集整理的Javascript基础知识（二）事件全部内容，希望文章能够帮你解决Javascript基础知识（二）事件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。