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

  • Post author:
  • Post category:其他



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当对象的初始化属性值发生变化时触发此事件

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

οncοntextmenu=’return false’

οndragstart=’return false’

onselectstart =’return false’

οnselect=’document.selection.empty()’

οncοpy=’document.selection.empty()’

onbeforecopy=’return false’

οnmοuseup=’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返回事件对象的相对于本体的坐标。

转载于:https://www.cnblogs.com/Alone-Learner/p/4533137.html