51CTO旗下网站
Html DIV事件属性大全
本文向大家介绍一下Html Div事件属性的用法，了解了这里写属性的用法，在以后使用的过程中可以给我们带来很大的方便，欢迎大家一起来学习。
作者：admin来源：fengyekun.com| 09:03
你对Html DIV事件属性的用法是否了解，每种属性都有各自的特点和用法，这里和大家分享一下，比如说onactivate，它是当对象设置为活动元素时触发。
Html DIV事件属性
onactivate
当对象设置为活动元素时触发。
onafterupdate
当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforeactivate
对象要被设置为当前元素前立即触发。
onbeforecopy
当选中区复制到系统剪贴板之前在源对象触发。
onbeforecut
此Html DIV事件属性当选中区从文档中删除之前在源对象触发。
onbeforedeactivate
在activeElement从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus
在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste
在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onbeforeupdate
当成功更新数据源对象中的关联对象前在数据绑定对象上触发。
此Html DIV事件属性在对象失去输入焦点时触发。
在用户用鼠标左键单击对象时触发。
oncontextmenu
在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect
当用户将要对该对象制作一个控件选中区时触发。
当用户复制对象或选中区，将其添加到系统剪贴板上时在源元素上触发。
当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick
当用户双击对象时触发。
ondeactivate
此Html Div事件属性当activeElement从当前对象变为父文档其它对象时触发。
当进行拖曳操作时在源对象上持续触发。
当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter
当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave
当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover
当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart
Html DIV事件属性当用户开始拖曳文本选中区或选中对象时在源对象上触发。
当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onerrorupdate
更新数据源对象中的关联数据出错时在数据绑定对象上触发。
onfilterchange
当可视滤镜更改状态或完成转换时触发。
当对象获得焦点时触发。
当元素将要被设置为焦点之前触发。
onfocusout
在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
当用户在浏览器为当前窗口时按F1键时触发。
当用户按下键盘按键时触发。
onkeypress
当用户按下字面键时触发。
当用户释放键盘按键时触发。
onlayoutcomplete
当打印或打印预览版面处理完成用来自于源文档的内容填充当前LayoutRect对象时触发。
onlosecapture
当对象失去鼠标捕捉时触发。
onmousedown
当用户用任何鼠标按钮单击对象时触发。
onmouseenter
当用户将鼠标指针移动到对象内时触发。
onmouseleave
此Html DIV事件属性当用户将鼠标指针移出对象边界时触发。
onmousemove
当用户将鼠标划过对象时触发。
onmouseout
当用户将鼠标指针移出对象边界时触发。
onmouseover
当用户将鼠标指针移动到对象内时触发。
　当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel
当鼠标滚轮按钮旋转时触发。
当对象移动时触发。
当对象停止移动时触发。
onmovestart
当对象开始移动时触发。
此Html DIV事件属性当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange
当在对象上发生对象上发生属性更改时触发。
onreadystatechange
当对象状态变更时触发。
当对象的大小将要改变时触发。
onresizeend
当用户更改完控件选中区中对象的尺寸时触发。
onresizestart
当用户开始更改控件选中区中对象的尺寸时触发。
此Html DIV事件属性当用户滚动对象的滚动条时触发。
onselectstart
对象将要被选中时触发。
ontimeerror
当特定时间错误发生时无条件触发，通常由将属性设置为无效值导致
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
头条头条头条头条头条
24H热文一周话题本月最赞
讲师：161166人学习过
讲师：83409人学习过
讲师：83060人学习过
精选博文论坛热帖下载排行
本书从一个网站制作过程入手，详细介绍基于ASP技术建设网站的全过程。全书共10章。第1章，网站制作规划与流程；第2章，IIS安装与调试；第3...
订阅51CTO邮刊Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy.
log in / join
You are here:
& ondragleave
event | dragleave event
Browser support:
Occurs on an element when the user moves the mouse pointer out of it during a drag operation.
Note: The ondragleave event is supported in Firefox from version 3.5. In the earlier versions, use the
event instead.
If some content is selected in a HTML document, the user has the ability to start dragging it.
To drag the selected content, press and hold down a mouse button (browsers support dragging with the left button by default) on the selection and start to move the mouse.
To drop the dragged data, release the mouse button over the target.
By default, the target of a drag operation can be an editable element (, , , ), an element in , a document in
or another application.
If you want to allow for other elements to be a drop target during a drag operation, cancel both the
The following events are fired on the source element:
event is fired when the user starts to drag the selection.
event is fired periodically during the drag operation.
event is fired when the user has finished the drag operation (released the mouse button or pressed ESC).
Note: If the source of a drag operation is an editable element (see above), the
event is fired after the drag operation has been finished. It seems to be a bug in Firefox.
The following events are fired on an arbitrary element during dragging:
event is fired when the user moves the mouse pointer into the element.
event is fired periodically while the mouse pointer is over the element.
The ondragleave event is fired when the user moves the mouse pointer out of the element.
The following events are fired on a possible target element:
event is fired when the dragged data is dropped on the element.
event needs to be canceled in Google Chrome and Safari to allow firing the
If you want to customize the drag-and-drop operation or you need access to the dragged data, use the
How to register:
In HTML: &ELEMENT ondragleave="handler"&3.5In JavaScript: object.ondragleave =3.5object. ("dragleave", handler, useCapture);93.5object. ("ondragleave", handler);You can find the related objects in the
section below.
object is accessible to all event handlers in all browsers.
The properties of the
object contain additional information about the current event.
To get further details about these properties and the possible event handler registration methods, please see the page for the
For a complete list of events, see the page for .
Basic information:
Actions that invoke the ondragleave event:
Moving the mouse pointer out of an element during a drag operation.
Pressing ESC while the mouse cursor is over the element during a drag operation
The order of events related to the ondragleave event:
Any action that invokes the ondragleave event.
ondragleave
event is fired exactly once, at the end of a drag-and-drop operation, after any other drag and drop related events (except the
event in some cases).
Example HTML code 1:
This example illustrates the use of the ondragleave event:
type"text/javascript"
function Init () {
var target = document.getElementById ("target");
if (target.addEventListener) {
// all browsers except IE before version 9
// Firefox, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("dragenter", OnDragEnter, false);
// Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("dragleave", OnDragLeave, false);
// Firefox
target.addEventListener ("dragexit", OnDragLeave, false);
if (target.attachEvent) {
// IE before version 9
target.attachEvent ("ondragenter", OnDragEnter);
target.attachEvent ("ondragleave", OnDragLeave);
function OnDragEnter () {
var target = document.getElementById ("target");
target.style.border = "2px solid blue";
function OnDragLeave () {
var target = document.getElementById ("target");
target.style.border = "";
onload"Init ();"
id"source" style"background-color:#d0f0a0; width:200px"
Select and drag some text from this field and drop it into the target.
id"target" rows"5" cols"40"
This is the target element.
When the mouse is over this element during a drag operation, a blue border appears.
Did you find this example helpful?
Example HTML code 2:
This example dumps the order of events in case of dragging:
type"text/javascript"
function Init () {
var source = document.getElementById ("source");
var target = document.getElementById ("target");
if (source.addEventListener) {
// all browsers except IE before version 9
// Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
source.addEventListener ("dragstart", DumpInfo, false);
// Firefox before version 3.5
source.addEventListener ("draggesture", DumpInfo, false);
// Firefox, Google Chrome, Safari, Internet Exlorer
source.addEventListener ("drag", DumpInfo, false);
// Firefox, Google Chrome, Safari, Internet Exlorer
source.addEventListener ("dragend", DumpInfo, false);
// Firefox, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("dragenter", DumpInfo, false);
// Firefox, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("dragover", DumpInfo, false);
// Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("dragleave", DumpInfo, false);
// Firefox
target.addEventListener ("dragexit", DumpInfo, false);
// Firefox from version 3.5, Google Chrome, Safari, Internet Exlorer
target.addEventListener ("drop", DumpInfo, false);
// Firefox before version 3.5
target.addEventListener ("dragdrop", DumpInfo, false);
if (source.attachEvent) {
// IE before version 9
source.attachEvent ("ondragstart", DumpInfo);
source.attachEvent ("ondrag", DumpInfo);
source.attachEvent ("ondragend", DumpInfo);
target.attachEvent ("ondragenter", DumpInfo);
target.attachEvent ("ondragover", DumpInfo);
target.attachEvent ("ondragleave", DumpInfo);
target.attachEvent ("ondrop", DumpInfo);
function DumpInfo (event) {
var firedOn = event.target ? event.target : event.srcElement;
if (firedOn.tagName === undefined) {
firedOn = firedOn.parentNode;
var info = document.getElementById ("info");
if (firedOn.id == "source") {
info.innerHTML += "&span style='color:#008000'&" + event.type + "&/span&, ";
info.innerHTML += "&span style='color:#800000'&" + event.type + "&/span&, ";
if (event.type == "dragover") {
// the dragover event needs to be canceled to allow firing the drop event
if (event.preventDefault) {
event.preventDefault ();
onload"Init ();"
id"source" style"background-color:#d0f0a0; width:200px"
Select and drag some text from this field and drop it into the target.
id"target" rows"5"
This is the target element.
id"info" style"background-color:#f0f0 font-weight:"
Did you find this example helpful?
HTML elements:, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
Related pages:
External links:
Del.icio.us
User Contributed Comments
Link To Us |
& 2018 Dottoro.com. All rights reserved.ondragleave 事件_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
ondragleave 事件
W3Cschool（www.w3cschool.cn）最大的技术知...|
总评分0.0|
阅读已结束，下载本文需要
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，同时保存到云知识，更方便管理
还剩1页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢