Javascript基础知识(二)事件


Posted in Javascript onSeptember 29, 2014

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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
angularjs学习笔记之简单介绍
Sep 26 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
老生常谈ES6中的类
Jul 31 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
JS删除数组指定值常用方法详解
Jun 04 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 #Javascript
Javascript表单验证要注意的事项
Sep 29 #Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 #Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 #Javascript
js获取元素相对窗口位置的实现代码
Sep 28 #Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 #Javascript
浏览器缩放检测的js代码
Sep 28 #Javascript
You might like
php xml常用函数的集合(比较详细)
2013/06/06 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
Array对象方法参考
2006/10/03 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
浅析JS中什么是自定义react数据验证组件
2018/10/19 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python把1变成01的步骤总结
2019/02/27 Python
python快速排序的实现及运行时间比较
2019/11/22 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
兰芝美国网上商城:购买LANEIGE睡眠面膜等
2017/06/30 全球购物
施工人员岗位职责
2013/12/12 职场文书
学校元旦晚会方案
2014/02/19 职场文书
晚会主持词开场白
2014/03/17 职场文书
读书演讲主持词
2014/03/18 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
党员身份证明材料
2015/06/19 职场文书
会议主持词结束语
2015/07/03 职场文书