Javascript事件: 1事件源 2事件 3事件程序

Javascript事件: 1事件源 2事件 3事件程序

Javascript是基于事件驱动的一种程序,所有的特效都是基于事件来进行触发的. 行为=事件+动作

一事件源[任何一个html元素(节点),如body,div,button,p,a,h1……]

二事件[用户操作] on + 事件

鼠标:

click 是在鼠标点击弹起之后触发的事件

dbclick

mouseover

mouseout

mousedown onmousedown事件则是在鼠标按键按下去的瞬间触发的

mouseup 鼠标抬起

mousemove 鼠标移动

drag 按住鼠标拖动

键盘:

Keypress 键盘事件

Keyup 抬起

Keydown 按下

文档:

load 加载 onload

unload 关闭

beforeunload 关闭之前

表单:

focus 获取焦点事件

blur 失去焦点事件

例如: οnfοcus="this.value=''" οnblur="this.value='please input username'"

submit 提交事件 <input type=”submit” value=”” />

change 改变事件当控件内容改变时用到,例如 <select></select>

其它:

Scroll 滚动事件

Selected 选择事件

Selectstart

Contextmenu 禁止右键

…….

有三种方法加事件:

第一种:

// 事件处理程序可以是一个函数

第二种:

事件源.on事件=事件处理程序

div.οnclick=function() {//程序源码 }

</script>

第三种: (了解即可)

注：一个事件源上可以加多个事件

三事件处理程序(事件发生后的处理程序)(略)

event.altKey、event.ctrlKey、event.shiftKey 属性

HTML DOM

event.altKey

语法：event.altKey

取值：true | false / 1|0

说明：

altKey属性为true表示事件发生时Alt键被按下并保持，为false则Alt键没有按下。
altKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。

event.ctrlKey
功能：检测事件发生时Ctrl键是否被按住了。

语法：event.ctrlKey

取值：true | false 1|0

说明：

ctrlKey属性为true表示事件发生时Ctrl键被按下并保持，为false则Ctrl键没有按下。
ctrlKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。

event.shiftKey
功能：检测事件发生时Shift键是否被按住了。

语法：event.shiftKey

取值：true | false 1|0

说明：

shiftKey属性为true表示事件发生时Shift键被按下并保持，为false则Shift键没有按下。
shiftKey属性可结合鼠标或键盘使用，多用于制作一些快捷操作方式。

实例1 ：组合操作示例

<input id="txt1" type="text" value="Hello World!" οnclick="checkAlt(event)" />

<script type="text/javascript">

function checkAlt(oEvent)

{

if( oEvent.altKey )

document.getElementById("txt1").select();

}

</script>

这段代码的效果为：如果按住Alt键再单击上面的文本框，可以选中文本框中的文本。

实例2 ：组合操作示例

<input id="txt2" type="text" value="Hello World!" οnclick="clearText(event)" />

<script type="text/javascript">

function clearText(oEvent)

{

if( oEvent.ctrlKey && oEvent.keyCode==46 )

document.getElementById("txt2").value = "";

}

</script>

这段代码的效果为：使用"Ctrl+Del"组合键可清除上面的文本框的内容。（必须先使文本框获得焦点。本例只适用于IE浏览器。）

实例3 ：组合操作示例

<div id="box" style="width:50px; height:25px;border:1px solid black; background-color:red" οnclick="setColor(event)"></div>

<script type="text/javascript">

var b = true;

function setColor(oEvent)

{

if( oEvent.shiftKey && b )

document.getElementById("box").style.backgroundColor = "blue";

if( oEvent.shiftKey && !b )

document.getElementById("box").style.backgroundColor = "red";

b = !b;

}

</script>

这段代码的效果为：按住"Shift"键并用鼠标点击上面的色块，可改变色块颜色

Javascript事件: 1事件源 2事件 3事件程序相关推荐

knockout click点击事件及事件源解释
绑定click点击事件示例 <body>you've clicked<span data-bind="text:number"></span>& ...
【JavaScript】鼠标、键盘的基础事件
鼠标键盘的基础事件: 鼠标事件事件类型点击左键 click 鼠标经过 mouseover 鼠标离开 mouseout 获得鼠标焦点 focus 失去鼠标焦点 blur 鼠标移动 mousemove ...
javaScript的使用（5）DOM事件
dom事件浏览器监听特定的条件或用户行为,并且触发相应的操作(函数) 常见的dom事件如下: onclick:单击事件 onfocus:焦点事件 onblur:失去焦点事件 onkeydown:键盘 ...
DOM-8 【兼容】冒泡捕获流、事件与事件源对象、事件委托
事件流 1. 含义描述从页面中接收事件的顺序 2. 分类 IE提出的事件冒泡流 Event Bubbling Netscape提出的事件捕获流 Event Capturing 3. 阶段事件捕 ...
JavaScript学习（三十四）—事件委托
JavaScript学习(三十四)-事件委托 (一).什么是事件委托? 所谓的事件委托就是指将事件添加到祖先元素身上,依据事件冒泡的原理(就是指事件的执行顺序是从当前元素逐步扩展到祖先元素,直到扩展到 ...
JavaScript学习（二十八）—事件冒泡和事件捕获
JavaScript学习(二十八)-事件冒泡和事件捕获一.什么是事件流? 简单说,事件流就是指事件的执行顺序,他包含两种模式:事件冒泡.事件捕获. (一).事件冒泡最常用的一种模式,就是指事件的执 ...
JavaScript学习（二十六）—事件处理程序的添加与删除
JavaScript学习(二十六)-事件处理程序的添加与删除一.什么是事件? 所谓事件就是指用户或页面自身的某些行为,如点击鼠标,敲击键盘都是属于事件. 二.事件处理程序当事件被触发时会引起某些程 ...
Javascript事件模型系列（一）事件及事件的三种模型
一.开篇在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
[转]《精通Javascript》笔记：第六章(事件)
<精通Javascript>笔记:第六章(事件) Published by sansan at 11:41 am under 前端|Front-End 事件模型:捕获和冒泡通过oneve ...

Javascript事件: 1事件源 2事件 3事件程序

Javascript事件: 1事件源 2事件 3事件程序相关推荐

最新文章

热门文章