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实现的Select三级下拉菜单代码
Aug 20 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
node.js操作mysql简单实例
May 25 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
node使用promise替代回调函数
May 07 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
JQuery省市联动效果实现过程详解
May 08 jQuery
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
JavaScript实现外溢动态爱心的效果的示例代码
Mar 21 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防注
2007/01/15 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
Yii框架安装简明教程
2020/05/15 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
python实现备份目录的方法
2015/08/03 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
django中间键重定向实例方法
2019/11/10 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python 利用zmail库发送邮件
2020/09/11 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
百度软件工程师职位
2013/02/14 面试题
文秘专业应届生求职信范文
2013/11/14 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
工作违纪检讨书
2014/02/17 职场文书
甜品店创业计划书
2014/09/21 职场文书
科技活动总结范文
2015/05/11 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
三下乡活动心得体会
2016/01/23 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python
如何Tomcat中使用ipv6地址
2022/05/06 Servers
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript