《学习笔记》JS事件和事件冒泡

js事件详解

●一般事件
onclick 鼠标点击时触发此事件
ondblclick 鼠标双击时触发此事件
onmousedown 按下鼠标时触发此事件
onmouseup 鼠标按下后松开鼠标时触发此事件
onmouseover 当鼠标移动到某对象范围的上方时触发此事件
onmousemove 鼠标移动时触发此事件
onmouseout 当鼠标离开某对象范围时触发此事件
onkeypress 当键盘上的某个键被按下并且释放时触发此事件.
onkeydown 当键盘上某个按键被按下时触发此事件
onkeyup 当键盘上某个按键被按放开时触发此事件

●页面相关事件
onabort 图片在下载时被用户中断
onbeforeunload 当前页面的内容将要被改变时触发此事件
onerror 出现错误时触发此事件
onload 页面内容完成时触发此事件
onmove 浏览器的窗口被移动时触发此事件
onresize 当浏览器的窗口大小被改变时触发此事件
onscroll 浏览器的滚动条位置发生变化时触发此事件
onstop 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload 当前页面将被改变时触发此事件

●表单相关事件
onblur 当前元素失去焦点时触发此事件
onchange 当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus 当某个元素获得焦点时触发此事件
onreset 当表单中RESET的属性被激发时触发此事件
onsubmit 一个表单被递交时触发此事件

●滚动字幕事件
onbounce 在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish 当Marquee元素完成需要显示的内容后触发此事件
onstart 当Marquee元素开始显示内容时触发此事件

●编辑事件
onbeforecopy 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
onbeforeeditfocus 当前元素将要进入编辑状态
onbeforepaste 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate 当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu 浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy 当页面当前的被选择内容被复制后触发此事件
oncut 当页面当前的被选择内容被剪切时触发此事件
ondrag 当某个对象被拖动时触发此事件[活动事件]
ondragdrop 一个外部对象被鼠标拖进当前窗口或者帧
ondragend 当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了
ondragenter 当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave 当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart 当某对象将被拖动时触发此事件
ondrop 在一个拖动过程中,释放鼠标键时触发此事件
onlosecapture 当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste 当内容被粘贴时触发此事件
onselect 当文本内容被选择时的事件
onselectstart 当文本内容选择将开始发生时触发的事件

●数据绑定
onafterupdate 当数据完成由数据源到对象的传送时触发此事件
oncellchange 当数据来源发生变化时
ondataavailable 当数据接收完成时触发事件
ondatasetchanged 数据在数据源发生变化时触发的事件
ondatasetcomplete 当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件
onrowenter 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit 当前数据源的数据将要发生变化时触发的事件
onrowsdelete 当前数据记录将被删除时触发此事件
onrowsinserted 当前数据源将要插入新数据记录时触发此事件

●外部事件
onafterprint 当文档被打印后触发此事件
onbeforeprint 当文档即将打印时触发此事件
onfilterchange 当某个对象的滤镜效果发生变化时触发的事件
onhelp 当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange 当对象的属性之一发生变化时触发此事件
onreadystatechange当对象的初始化属性值发生变化时触发此事件

==================================================
oncontextmenu=‘return false‘
ondragstart=‘return false‘
onselectstart =‘return false‘
onselect=‘document.selection.empty()‘
oncopy=‘document.selection.empty()‘
onbeforecopy=‘return false‘
onmouseup=‘document.selection.empty()‘

===================================================

(1)单击事件onClick
当用户单击按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。在onClick等号后,可以使用自己编写的函数作为事件处理程序,也可以使用JavaScript中内部的函数。还可以直接使用JavaScript的代码等。

(2)onChange改变事件
当利用text或textarea元素输入字符值改变时触发该事件,同时当在select表格项中一个选项状态改变后也会引发该事件。

(3)选中事件onSelect
当Text或textarea对象中的文字被加亮后,引发该事件。

(4)获得焦点事件onFocus
当用户单击Text或textarea以及select对象时,产生该事件。此时该对象成为前台对象。

(5)失去焦点onBlur
当text对象或textarea对象以及select对象不再拥有焦点,引发该事件。

(6)载入文件onLoad
当文档载入时,产生该事件。onLoad一个作用就是在首次载入一个文档时检测cookie的值,并用一个变量为其赋值,使它可以被源代码使用。

(7)卸载文件onUnload
当Web页面退出时引发onUnload事件,并可更新Cookie的状态。

// 什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 比如上面这个页面,
分为三层:divOne是第外层,divTwo中间层,hr_three是最里层;

// 他们都有各自的click事件,最里层a标签还有href属性。

// 运行页面,点击“点击我”,会依次弹出:我是最里层---->我是中间层---->我是最外层---->然后再链接到百度.

// 这就是事件冒泡,本来我只点击ID为hr_three的标签,但是确执行了三个alert操作。

// 事件冒泡过程(以标签ID表示):hr_three---->divTwo---->divOne。从最里层冒泡到最外层。

阻止事件(包括冒泡和默认行为)

var stopEvent = function(e){

e = e || window.event;

if(e.preventDefault) {

e.preventDefault();

e.stopPropagation();

}else{

e.returnValue = false;

e.cancelBubble = true;

}

},

仅阻止事件冒泡

var stopPropagation = function(e) {

e = e || window.event;

if (!+"\v1″) {

e.cancelBubble = true;

} else {

e.stopPropagation();

}

}

仅阻止浏览器默认行为

var  preventDefault  = function(e) {

e = e || window.event;

if(e.preventDefault) {

e.preventDefault();

}else{

e.returnValue = false;

}

}

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标

event.X也一样

但是如果设置事件对象的定位属性值为relative

event.clientX不变

而event.X返回事件对象的相对于本体的坐标

event对象详解 ICOOE 2000.3.31
http://www.hzhuti.com

event代表事件的状态,例如事件发生的的元素、鼠标的位置等等,event对象只在事件过程中才有效。

event属性:

altKey

检索ALT键的当前状态

可能的值 true为关闭

false为不关闭

button

检索按下的鼠标键

可能的值: 0 没按键

1 按左键

2 按右键

3 按左右键

4 按中间键

5 按左键和中间键

6 按右键和中间键

7 按所有的键

cancelBubble

设置或检索当前事件是否将事件句柄起泡

可能的值: false 启用起泡

true 取消该事件起泡

clientX

检索与窗口客户区域有关的鼠标光标的X坐标,属性为只读,没有默认值。

clientY

检索与窗口客户区域有关的鼠标光标的Y坐标,属性为只读,没有默认值。

ctrlKey

ctrlKey 检索CTRL键的当前状态

可能的值 true为关闭

false为不关闭

dataFld

检索被oncellchange事伯影响的列

aTransfer

为拖放操作提供预先定义的剪贴板式。

Element

检索在on mouseover和on
mouseout事件期间退出的对象指针

keyCode

设置或检索与引发事件的关键字相关联的Unicode关键字代码

该属性与onkeydown onkeyup onkeypress一起使用

如果没有引发事件的关键字,则该值为0

offsetX

检索与触发事件的对象相关的鼠标位置的水平坐标

offsetY

检索与触发事件的对象相关的鼠标位置的垂直坐标

propertyName

检索在对象上己更改的特性的名称

reason

检索数据源对象数据传输的结果

可能的值:

0 数据传输成功

1 数据传输失败

2 数据传输错误

recordset

检索数据源对象中默认记录集的引用

该特性为只读

repeat

检索一个事件是否被重复

该属性只有在onkeydown事件重复时才返回true

returnvalues

设置或检索从事件中返回的值

可能的值:

true 事件中的值被返回

false 源对象上事件的默认操作被取消

screenX

检索与用户屏相关的鼠标的水平位置

screenY

检索与用户屏相关的鼠标的垂直位置

shiftKey

检索shiftKey键的当前状态

可能的值 true为关闭

false为不关闭

srcElement

检索触发事件的对象

srcFilter

检索导致onfilterchange事件触发的过滤器对象

srcUm

检索触发事件行为的同一资源名称

除非下面两个条件都为真,否则该特性被设置为null

1.行为被附加到触发事件的要素上

2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件

toElement

检索作为on mouseover或者on mouseout事件结果而移动的对象

type

检索事件对象中的事件名称

x

检索相对于父要素鼠标水平坐标的整数

y

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。

clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。

offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。

offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。

screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。

x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。

y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

event.clientX返回事件发生时,mouse相对于客户窗口的X坐标,event.X也一样。但是如果设置事件对象的定位属性值为relative,event.clientX不变,而event.X返回事件对象的相对于本体的坐标。

时间: 2024-10-04 05:07:59

《学习笔记》JS事件和事件冒泡的相关文章

JavaScript学习笔记——js变量的布尔值

typeof(1): numbertypeof(NaN): numbertypeof(Number.MIN_VALUE): numbertypeof(Infinity): numbertypeof("123"): stringtypeof(true): booleantypeof(window): objecttypeof(Array()): objecttypeof(function(){}): functiontypeof(document): objecttypeof(null)

JS学习笔记9之event事件及其他事件

-->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事件oncontextmenu------鼠标右键点击onmouseover --------鼠标移上onmouseout ---------鼠标移出onmousedown -------鼠标按下onmousemove -------鼠标移动onmouseup ----------鼠标抬起 1 <head

React学习笔记(5)--事件

分类: web前端2015-08-29 08:42 33人阅读 评论(0) 收藏 举报 1.事件处理函数的使用 组件: React 自有方法 用户定义方法 事件处理函数可以接受event参数: 如之前用过的: [html] view plaincopy //监听内容的变化并且记录在状态中 handleChange: function(event){ this.setState({inputText: event.target.value}); }, //添加提交按钮并打印结果 handleSub

【转】Nodejs学习笔记(三)--- 事件模块

目录 简介及资料 事件常用函数及使用 emitter.on(event, listener) emitter.emit(event, [arg1], [arg2], [...]) emitter.once(event, listener) emitter.removeListener(event, listener) emitter.removeAllListeners([event]) emitter.listeners(event) emitter.setMaxListeners(n) 其它

JS学习五(js中的事件)

[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/onfocus 3. 键盘事件 keydown:键盘按下时触发 keypress:键盘按下并松开时的瞬间触发 keyup:键盘抬起时触发 [注意事项] ①执行顺序:keydown-->keypress-->keyup ②当长按时,会循环执行keydown-->keypress ③有keydo

jQuery 学习笔记(三)——事件与应用

页面加载时触发ready()事件 ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行.此外,下列写法是相等的: $(document).ready(function(){})等价于$(function(){}); 例如,当触发页面的ready()事件时,在<div>元素中显示一句话.如下图所示: 在浏览器中显示的效果: 从图中可以看出,当页面的DOM框架完成加载后,便触发ready(

Jqurey学习笔记---4、jQuery 事件

jQuery 事件 jQuery 是为事件处理特别设计的. jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.术语由事件“触发”(或“激发”)经常会被使用. 通常会把 jQuery 代码放到 <head>部分的事件处理方法中: 实例 <html> <head> <script type="text/javascript" src="jque

JAVAscript学习笔记 js句柄监听事件 第四节 (原创) 参考js使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>句柄添加监听事件</title> <script type="text/javascript" src="tzy.js"></script> </head> <body>

JAVAscript学习笔记 js事件 第一节 (原创) 参考js使用表

<!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function demo() { alert("hello"); } function onOver(ooj) { ooj.i

[JS学习笔记]浅谈Javascript事件模型

DOM0级事件模型 element.on[type] = function(){} 兼容性:全部支持 lay1 lay2 lay3 e.target:直接触发事件的元素[IE8及以下不支持taget属性,使用e.srcElement代替] e.srcElement:直接触发事件的元素[FF不支持srcElement属性,使用e.target代替] e.currentTarget:被间接触发的元素[IE8及以下不支持currentTarget属性,使用this代替] this:同e.current