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>

(0)

相关推荐

  • javascript学习笔记(一)基础知识

    基本概念 javascript是一门解释型的语言,浏览器充当解释器. js执行引擎并不是一行一行的执行,而是一段一段的分析执行. 延迟脚本 HTML4.0.1中定义了defer属性,它的用途是表明脚本在执行时不会影响页面的构造.也就是说,脚本会延迟到整个页面都解析完毕后再执行.因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行.在XHTML文档中,要把defer属性设置为defer="defer" 异步脚本 html5为<scrip

  • c++运算符重载基础知识详解

    实际上,很多C++运算符已经被重载.eg:将*运算符用于地址,将得到存储在这个地址中的值,将他用于2个数字时,得到的将是他们的乘积.C++根据操作数的数目和类型来决定采用哪种操作. C++允许将运算符重载扩展到用户定义的类型.例如,允许使用+将两个对象相加.编译器将根据操作数的数目和类型决定使用加法定义.运算符重载可以使代码看起来更自然.例如,将2个数组相加是一种常见的运算.通常,需要使用下面这样的for循环来实现: 复制代码 代码如下: for (int i = 0; i < 20; i++)

  • C++函数模板与类模板实例解析

    本文针对C++函数模板与类模板进行了较为详尽的实例解析,有助于帮助读者加深对C++函数模板与类模板的理解.具体内容如下: 泛型编程(Generic Programming)是一种编程范式,通过将类型参数化来实现在同一份代码上操作多种数据类型,泛型是一般化并可重复使用的意思.泛型编程最初诞生于C++中,目的是为了实现C++的STL(标准模板库). 模板(template)是泛型编程的基础,一个模板就是一个创建类或函数的蓝图或公式.例如,当使用一个vector这样的泛型类型或者find这样的泛型函数

  • C++基础知识实例解析(一)

    今天小编和大家一起通过几个实例学习C++基础知识,下面进行实例解析: [1-1]编写一个程序,实现一个整数.长整数.浮点数和双精度数除以2的计算. [分析]这是一个典型的函数重载的程序.声明函数div()为除法函数,每个函数的功能基本都是一致的,不同的只是形式参数的类型不同而已.程序代码如下: #include <iostream> using namespace std; int division(int x){ return x/2; } long division(long x){ re

  • C++基础入门教程(一):基础知识大杂烩

    我很郁闷,这本书果然讲得很详细,我在看第二章,看完要深呼吸,实在太详(lao)细(dao)了. 不过这很好,后面难一些的内容应该会不错~   那么,这章只是作为预览的章节,我抽出一些稍微比较有营养的内容记录一下吧~   注意:本系列教程不适合无任何编程语言基础的朋友,只是作为C++基础的一种补充. 教程内容基于<C++ Primer Plus>一书,适合初学者,熟手请直接忽略. 1. 如果你不注释,那么,我会把你注释掉~! C++的注释有2种, 第一种,单行注释,那就是:// 如下代码: 复制

  • Javascript基础知识(一)核心基础语法与事件模型

    一.Javascript核心基础语法 1.Javascript是一门增加交互效果的编程语言,它最初由网景公司发明,最后提交给ECMA(欧洲计算机制造商协会),ECMA将Javascript标准化,其命名为Javascript. 2.Javascript是一门解释性语言,无需编译就可以直接在浏览器下运行. 3.Javascript的用途? 1.可以控制网页中所有元素,增加.删除.修改元素的属性. 2.可以在html中放入动态文本. 3.响应用户在使用网页时产生的事件. 4.校验用户输入的数据. 5

  • C++命名空间实例解析

    命名空间是C++非常重要的概念,本文就以实例形式对其进行深入分析,具体内容如下: 通常来说,在C++中,命名空间(namespace)的目的是为了防止名字冲突.每个命名空间是一个作用域,在所有命名空间之外,还存在一个全局命名空间(global namespace),全局命名空间以隐式的方式声明,它并没有名字.在命名空间机制中,原来的全局变量,就是位于全局命名空间中(可以用::member的形式表示). 一.定义命名空间 1.每个命名空间都是一个作用域 和其他作用域类似,在命名空间中的每个名字必须

  • JavaScript基础知识学习笔记

    JavaScript简介 一.定义:JavaScript是脚本语言,需要宿主文件,它的宿主文件是html文件. JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编程代码. JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行. 二.用法: 在html中的位置有三块: 1)head里面: 2)body里面: 3)</html>之后,为了保险起见一般写在</html>之后.<script language=&quo

  • C语言基础知识点解析(extern,static,typedef,const)

    一.extern的使用方法 下面是<C语言程序设计>中的关于extern的解释: 在一个源程序的所有源文件中,一个外部变量只能在某个文件中定义一次,而其他文件可以通过extern声明来访问它(定义外部变量的源文件中也可以包含对该外部变量的extern声明).外部变量的定义中必须指定数组的长度,但extern声明不一定指定数组的长度. 外部变量的初始化只能出现在其定义中. 假设函数push与pop定义在一个文件中,而变量val与sp在另一个文件中定义本那个被初始化(通常不太可能这样组织程序),则

  • C++普通函数指针与成员函数指针实例解析

    C++的函数指针(function pointer)是通过指向函数的指针间接调用函数.相信很多人对指向一般函数的函数指针使用的比较多,而对指向类成员函数的函数指针则比较陌生.本文即对C++普通函数指针与成员函数指针进行实例解析. 一.普通函数指针 通常我们所说的函数指针指的是指向一般普通函数的指针.和其他指针一样,函数指针指向某种特定类型,所有被同一指针运用的函数必须具有相同的形参类型和返回类型. int (*pf)(int, int); // 声明函数指针 这里,pf指向的函数类型是int (

  • Javascript基础知识(三)BOM,DOM总结

    window对象: 打开和关闭窗口: window.open() 三个参数:1.载入新窗口的页面的URL 2.新窗口的名字 3.特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值. window.close() 系统对话框: 1.alert("hello world!"); 2.confirm("Are you sure?");---选择 3.prompt("你的名字是说明?",""); 时间间隔 setT

随机推荐