JavaScript 学习笔记(十六) js事件
回顾
事件对象里包含三个方面的信息····回看上一篇内容!
事件对象里的属性和方法,主要是鼠标和键盘的信息。
1. 获取事件类型
事件对象属性type
2. 获取按键代码
事件对象属性keyCode:回车为13,空格为32,后退键为8
3. 检测Shift、Alt、Ctrl键
事件对象属性是否被按下:shiftKey、altKey、ctrlKey
4. 获取客户端坐标
事件对象属性clientX和clientY
5. 获取屏幕坐标
事件对象属性screenX和screenY
事件的类型
根据触发事件的事物和事件发生的对象,可将浏览器中发生的事件分为几个类型:
一、 鼠标事件
每个鼠标事件都会给以下event对象的属性填入值:
1.坐标属性(如clientX 和 client 等)
2.Type属性
3.Targer(DOM)或serElement(IE)属性(目标对象属性)
4.shiftKey、ctrlKey、altKey和metaKey(DOM)属性
5.button属性(只在mouse事件中)
(oEvent.target || oEvent.srcElement).id逻辑符或操作符作用于两个对象时,第一个对象非空,返回第一个对象,否则返回第二个对象,这里表示的是引起事件的元素的ID。
二、 键盘事件
Keydown --- 在键盘上按下某按键时发生。一直按着某键,它则会不断触发。
Keypress --- 按下一个按键,并产生一个字符时产生(也就是不管类似Shit ctrl alt之类的键。)一直按键时,它会持续发生。
Keyup --- 释放按着的按键时发生
1. 事件的属性
对每个键盘事件,会填入以下的事件属性:
keyCode属性(键位的ASC码值)
charCode属性(仅DOM)
target(DOM)与srcElement(IE)属性
shiftKey、ctrlKey、altKey和metaKey(DOM)属性
2.顺序
当用户按一次某字符按键时,会按以下顺序发生事件:
(1)、keydown;
(2)、keypress;
(3)、keyup;
如果用户按一次某非字符按键(例如shift),会按以下顺序发生事件:
(1)、keydown;
(2)、keyup;
三、 HTML事件
onload、unload、resize、scroll等事件。
四、 突变事件
文档或元素元素的子树的添加删除节点,目前还没有任何主流浏览器实现了它。
相关推荐
-
js事件(Event)知识整理
鼠标事件 鼠标移动到目标元素上的那一刻,首先触发mouseover 之后如果光标继续在元素上移动,则不断触发mousemove 如果按下鼠标上的设备(左键,右键,滚轮--),则触发mousedown 当设备弹起的时候触发mouseup 目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条..)触发scroll 滚动滚轮触发mousewheel,这个要区别于scroll 鼠标移出元素的那一刻,触发mouseout 事件注册 平常我们绑定事件的时候用dom.onxxxx=function(){}的形式
-
asp.net(C#)中给控件添加客户端js事件的方法
放在服务器端,也可以用ajax来实现,不刷页面.但我觉得有更直接更简单方法,用一个js事件是可以实现的. 但,DropDownList不偈Button等控件提供了一些像"OnClientClick"前台事件,只有服务端事件. 想到,所有C#页面代码,最终都是生成HTML,js事件也是最终运在浏览器中,以Html为基础的.服务端控件最终生成的HTML控件有什么js事件,我们应该就能在aspx中给它添加相应的事件. DropDownList 生成的Htm是元素<Select>是
-
ExtJs事件机制基本代码模型和流程解析
代码实现的目的:为一个自定义的类的某个属性在使用它时候,触发某个事件. 该程序的效果:点击输入按钮,弹出一个脚本提示输入框让用户输入他的姓名,确定后,用户录入的姓名会显示在页面的姓名文本框中,并且页面标题变成和姓名一致,接着再弹出脚本提示输入框让用户输入性别,录入完毕并点击确定后,用户录入的性别将会显示在页面的性别文本框里. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo
-
通用JS事件写法实现代码
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>test</title> <script language="javascript" type="text/javascript"> window.onload = function() { var oImg = document.getElementById("
-
动态添加js事件实现代码
//表单对象 function GetObject(Name) { var inputlist=document.all.tags('input'); var i=0; for(i=0;i<inputlist.length;i++) { var input=inputlist[i]; if(input.id.indexOf(Name) !=-1) { return input; } } return null; } //设置对象事件 function setEvent(Object,EventN
-
JavaScript高级程序设计 阅读笔记(十七) js事件
一.事件流 IE中是冒泡型事件,即从最特定的事件目标到最不特定的事件目标. Netscape Navigator使用的是捕获型事件,这个跟IE中采用的冒泡型事件相反. DOM事件流同时支持两种事件模型,但捕获型事件先发生. 二.事件处理函数/监听函数 事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click.load.mouseover等. 事件处理函数有两种分配方式:在JavaScript中或者在HTML中. 如果在JavaScript中分配事件处理函数,则首先要获得要处理的
-
JavaScript入门教程(11) js事件处理
事件处理概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性.事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应.其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去.事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情.指定事件处理程序有三种方法:方法一 直接在 HTML 标记中指定.这种方法是用得最
-
window.addeventjs事件驱动函数集合addEvent等
// written by Dean Edwards, 2005 // with input from Tino Zijdel, Matthias Miller, Diego Perini // http://dean.edwards.name/weblog/2005/10/add-event/ function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventLis
-
javascript学习笔记(十五) js间歇调用和超时调用
1.超时调用setTimeout() setTimeout() 方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID 复制代码 代码如下: setTimeout( function () { alert("你好!"); },1000); 调用前取消clearTimeout(),接受一个参数超时调用ID 复制代码 代码如下: var timeOutId = setTimeout( function () { alert("你好!"); },1
-
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
1.警告框alert() 复制代码 代码如下: alert("欢迎光临!"); 2.信息框confirm(),有取消,确定按钮 复制代码 代码如下: if (confirm("你同意吗?")) { alert("同意"); } else { alert("不同意"); } 3.提示框prompt(),用于提示用户输入一些文本 复制代码 代码如下: var result = prompt("您尊姓大名?",&
-
javascript学习笔记(十) js对象 继承
1.原型链 //很少单独使用 复制代码 代码如下: View Code //定义 SuperClass类,有一个属性property和一个方法getSuperValue function SuperClass() { this.property = true; } SuperClass.prototype.getSuperValue = function() { return this.property; } //定义SubClass类,有一个属性subproperty和后来添加的一个方法get
-
JavaScript 学习笔记(六)
一. 工厂方式 自己的理解:要创建很多个对象的实例,这些实例有相同的属性,但是有不同的属性值.这个时候就需要创个工厂函数(factory function). 工厂函数(factory function):创建并返回特定类型的对象. 工厂函数中如果一个属性是方法的话,可以在工厂函数的外面定义对象的方法,然后通过属性指向该方法,从而可以避开每次都调用自己的属性方法,这样做使得每个对象都共享了同一个函数. 示例: 复制代码 代码如下: <script type="text/javascript
-
javascript学习笔记(六)数据类型和JSON格式
什么是JSON JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的形式是用大括号"{}"包围起来的项目列表,每一个项目间用逗号(,)分隔,而项目就是用冒号(:)分隔的属性名和属性值.这是典型的字典表示形式,也再次表明javascript里的对象就是字典结构.不管多么复杂的对象,都可以用一句JSON代码来创建并赋值. JSON 结构 JSON有两种结构 json简单说就是javascript中的对象和数组,所以这两种结构就是对
-
javascript学习笔记(十九) 节点的操作实现代码
本节要用到的html例子 复制代码 代码如下: <ul id="myList"> <li>项目一</li> <li>项目二</li> <li>项目三</li> </ul> 1.创建元素节点 document.createElement() 方法 用于创建元素,接受一个参数,即要创建元素的标签名,返回创建的元素节点 复制代码 代码如下: var div = document.createEle
-
javascript学习笔记(十四) window对象使用介绍
1.窗口位置 以下取得浏览器窗口距屏幕左边和上边的位置 复制代码 代码如下: var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; //左边位置 var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; //上边位置 2.浏
-
javascript 学习笔记(六)浏览器类型及版本信息检测代码
下面的checkBrowser()函数主要检测了三种浏览器(IE, firefox, chrome),其它的浏览器的检测有兴趣的朋友可以自行添加检测代码! HTML部分代码: (页面加载时执行检测函数) 复制代码 代码如下: <body onload="checkBrowser()"> <p id="userAgent"></p> <p id="browser"></p> </bo
-
javascript学习笔记(十八) 获得页面中的元素代码
1.获取元素 getElementById()方法,通过元素的id获取元素,接受一个参数即要获取元素的id,如果不存在这个id返回 null 注意不要让表单元素的name和别的元素的id相同,IE8以下的IE浏览器用这个方法通过元素的name属性可以获得该元素 以下面元素为例 <div id ="myDiv">这里是id为"myDiv"的div内容</div>var document.getElementById("myDiv&qu
-
javascript学习笔记(十二) RegExp类型介绍
1.匹配模式标记: g ------ 表示全局模式,而不是发现第一个匹配成功就立刻结束 i ------- 表示不区分大小写模式 m ----- 表示多行匹配,一行结束时向下一行继续匹配 复制代码 代码如下: //匹配第一个bat 或cat,不区分大小写 var pattern1 = /[bc]at/i var pattern2 = new RegExp("[bc]at","i"); //同上 使用RegEXp是字面量模式要转换成字符串 /\[bc\]at/ ===
随机推荐
- SQL SERVER 2008数据库日志文件收缩的方法
- angular学习之从零搭建一个angular4.0项目
- jquery不常用方法汇总
- 详解vue-cli中的ESlint配置文件eslintrc.js
- 谈谈JavaScript的New关键字
- 用InstallShield9 进行ASP软件的打包和数据库自动安装
- CentOS7配置httpd虚拟主机教程
- oracle11g 通过修改配置文件方式连接远程数据库的方法
- react开发教程之React 组件之间的通信方式
- CI框架中类的自动加载问题分析
- PHP获取路径和目录的方法总结【必看篇】
- 深入理解PHP中的static和yield关键字
- 在Linux与Windows上获取当前堆栈信息的方法
- mysql查询结果输出到文件的方法
- PHP IDE PHPStorm配置支持友好Laravel代码提示方法
- DHTML Slide Show script图片轮换
- 深入理解java中this关键字的使用
- Android自定义控件ViewGroup实现标签云(四)
- SpringMVC文件上传及查看的示例代码
- php 删除一维数组中某一个值元素的操作方法