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>

时间: 2024-08-31 18:37:04

Javascript基础知识(二)事件_基础知识的相关文章

浅谈javascript中onbeforeunload与onunload事件_基础知识

在最近的项目中,需要做到一个时间,就是用户离开页面的时候,我需要缓存页面其中一部分的内容,但是我不需要用户刷新的时候也缓存,我只希望在我用户离开的时候 执行这个函数.百度之,有onbeforeunload与onunload这两个事件,但是onbeforeunload在用户刷新的时候也会执行.搞得我弄的挺久的,所以想在这里做一个小小的总结 onbeforeunload与onunload事件 onbeforeunload定义和用法 onbeforeunload 事件在即将离开当前页面(刷新或关闭)时

关于JavaScript与HTML的交互事件_基础知识

JavaScript和HTML的交互是通过事件实现的.JavaScript采用异步事件驱动编程模型,当文档.浏览器.元素或与之相关对象发生特定事情时,浏览器会产生事件.如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生时要调用的句柄. 事件流 事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候是内层的div先出发click事件还是外层先触发?目前主要有三种模型 IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元

JavaScript基础知识点归纳(推荐)_基础知识

定义在函数外的变量一定是全局变量:定义在函数内的变量,如果声明了var,那该变量就是局部变量,如果不声明var,那么该变量就是全局变量. 1.全局变量与局部变量 JavaScript var global = "Global"; test(); function test(){ var local = "Local"; document.writeln(global); document.writeln(local); } document.writeln(glob

大型JavaScript应用程序架构设计模式_基础知识

PDF版的PPT下载地址:http://www.slideshare.net/jibyjohnc/jqquerysummit-largescale-javascript-application-architecture 注:在整理的过程中,发现作者有些思想是返来复去地说,所以删减了一部分,如果你的英文良好,请直接阅读英文的PPT. 以下是本文的主要章节: 1. 什么叫"JavaScript大型程序"? 2. 顾当前的程序架构 3. 长远考虑 4. 头脑风暴 5. 建议的架构    5.

JavaScript中的this机制_基础知识

JavaScript有自己的一套this机制,在不同情况下,this的指向也不尽相同. 全局范围 console.log(this); //全局变量 全局范围使用this指向的是全局变量,浏览器环境下就是window. 注:ECMAScript5的strict模式不存在全局变量,这里的this是undefined. 函数调用中 function foo() { console.log(this); } foo(); //全局变量 函数调用中的this也指向全局变量. 注:ECMAScript5的

JavaScript方法和技巧大全_基础知识

这篇介绍JavaScript方面的日志,我在是Clang上看到的.作者介绍挺全面的,所以转载过来让感兴趣的朋友看一下.呵呵--- 有些时候你精通一门语言,但是会发现你其实整天在和其它语言打交道,也许你以为这些微不足道,不至于影响你的开发进度,但恰恰是这些你不重视的东西会浪费你很多时间,我一直以为我早在几年前就已经精通JavaScript了,直到目前,我才越来越觉得JavaScript远比我想象的复杂和强大,我开始崇拜它,就像崇拜所有OOP语言一样- 趁着节日的空隙,把有关JavaScript的方

JavaScript的字符串方法汇总_基础知识

1. stringObject.charAt() 作用:返回字符串的下标 var str="这是一串字符串"; console.log(str.charAt(0))//这 2. stringObject.charCodeAt() 作用: 方法可返回指定位置的字符的 Unicode 编码 var str="这是一串字符串"; console.log(str.charCodeAt(0)) //这=>36825 3.String.fromCharCode() 作用:

JavaScript 基础篇之运算符、语句(二)_基础知识

javascript:运算符 其实运算符大家要是有计算机语言基础应该都知道,可能甚至比我还精通,这样我就不多解释了,就来说说其它几个生疏的吧! 1.in 运算符:in运算符要求其左边的运算数是一个字符串,或可以被转换为字符串,右边的运算数是一个数组或者对象,如果左边的值是右边的对象的一个属性,它返回true. 复制代码 代码如下: var objvalue = {x:1,y:7}; document.write("x is in objvalue:" + ("x"

JavaScript 学习笔记(十六) js事件_基础知识

回顾 事件对象里包含三个方面的信息····回看上一篇内容! 事件对象里的属性和方法,主要是鼠标和键盘的信息. 1. 获取事件类型 事件对象属性type 2. 获取按键代码 事件对象属性keyCode:回车为13,空格为32,后退键为8 3. 检测Shift.Alt.Ctrl键 事件对象属性是否被按下:shiftKey.altKey.ctrlKey 4. 获取客户端坐标 事件对象属性clientX和clientY 5. 获取屏幕坐标 事件对象属性screenX和screenY 事件的类型 根据触发