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

==================================================
ο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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值