Dom 事件处理函数

别人整理的,我顺手就给捏来了哈哈。很详细的一些事件,浏览器支持情况,以及详细的说明。在这里向整理者致敬。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Dom Event Handlers/Dom 事件处理函数</title>

<style type="text/css">

<!--

table { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; border: 2px solid #000; }

td { padding: 5px; }

-->

</style>

<script type="text/javascript">

window.onload=function(){

zebraTable();

}

function zebraTable(){

var tbody=document.getElementsByTagName('tbody');

for(var i=0;i<tbody.length;i++){

var tr=tbody[i].getElementsByTagName('tr');

var spanTd=tbody[i].getElementsByTagName('td');

for(var j=1;j<tr.length;j+=2){

tr[j].style.background='#f2f2f2';

}

for(var k=0;k<spanTd.length;k++){

if(spanTd[k].getAttribute('colspan')==3){

spanTd[k].style.background='black';

spanTd[k].style.color='white';

}

}

for(var x=0;x<tr.length;x++){

tr[x].onmouseover=In;

tr[x].onmouseout=Out;

}

}

}

function In(){

this.bgColor=this.style.backgroundColor;

this.style.background='red';

this.style.color='white';

}

function Out(){

this.style.background=this.bgColor;

this.style.color='black';

}

</script>

</head>

<body>

<table width="100%" border="0" cellpadding="0" cellspacing="0">

<caption>Dom Event Handlers/Dom 事件处理函数</caption>

<thead>

<tr>

<th>事件</th>

<th>浏览器支持</th>

<th>解说</th>

</tr>

</thead>

<tbody>

<tr>

<td colspan="3">一般事件</td>

</tr>

<tr>

<td>onclick</td>

<td>IE3、N2</td>

<td>鼠标点击时触发此事件</td>

</tr>

<tr>

<td>ondblclick</td>

<td>IE4、N4</td>

<td>鼠标双击时触发此事件</td>

</tr>

<tr>

<td>onmousedown</td>

<td>IE4、N4</td>

<td>按下鼠标时触发此事件</td>

</tr>

<tr>

<td>onmouseup</td>

<td>IE4、N4</td>

<td>鼠标按下后松开鼠标时触发此事件</td>

</tr>

<tr>

<td>onmouseover</td>

<td>IE3、N2</td>

<td>当鼠标移动到某对象范围的上方时触发此事件</td>

</tr>

<tr>

<td>onmousemove</td>

<td>IE4、N4</td>

<td>鼠标移动时触发此事件</td>

</tr>

<tr>

<td>onmouseout</td>

<td>IE4、N3</td>

<td>当鼠标离开某对象范围时触发此事件</td>

</tr>

<tr>

<td>onkeypress</td>

<td>IE4、N4</td>

<td>当键盘上的某个键被按下并且释放时触发此事件.</td>

</tr>

<tr>

<td>onkeydown</td>

<td>IE4、N4</td>

<td>当键盘上某个按键被按下时触发此事件</td>

</tr>

<tr>

<td>onkeyup</td>

<td>IE4、N4</td>

<td>当键盘上某个按键被按放开时触发此事件</td>

</tr>

</tbody>

<tbody>

<tr>

<td colspan="3">页面相关事件</td>

</tr>

<tr>

<td>onabort</td>

<td>IE4、N3</td>

<td>图片在下载时被用户中断</td>

</tr>

<tr>

<td>onbeforeunload</td>

<td>IE4、N</td>

<td>当前页面的内容将要被改变时触发此事件</td>

</tr>

<tr>

<td>onerror</td>

<td>IE4、N3</td>

<td>出现错误时触发此事件</td>

</tr>

<tr>

<td>onload</td>

<td>IE3、N2</td>

<td>页面内容完成时触发此事件</td>

</tr>

<tr>

<td>onmove</td>

<td>IE、N4</td>

<td>浏览器的窗口被移动时触发此事件</td>

</tr>

<tr>

<td>onresize</td>

<td>IE4、N4</td>

<td>当浏览器的窗口大小被改变时触发此事件</td>

</tr>

<tr>

<td>onscroll</td>

<td>IE4、N</td>

<td>浏览器的滚动条位置发生变化时触发此事件</td>

</tr>

<tr>

<td>onstop</td>

<td>IE5、N</td>

<td>浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断</td>

</tr>

<tr>

<td>onunload</td>

<td>IE3、N2</td>

<td>当前页面将被改变时触发此事件</td>

</tr>

</tbody>

<tbody>

<tr>

<td colspan="3">表单相关事件</td>

</tr>

<tr>

<td>onblur</td>

<td>IE3、N2</td>

<td>当前元素失去焦点时触发此事件</td>

</tr>

<tr>

<td>onchange</td>

<td>IE3、N2</td>

<td>当前元素失去焦点并且元素的内容发生改变而触发此事件</td>

</tr>

<tr>

<td>onfocus</td>

<td>IE3 、N2</td>

<td>当某个元素获得焦点时触发此事件</td>

</tr>

<tr>

<td>onreset</td>

<td>IE4 、N3</td>

<td>当表单中RESET的属性被激发时触发此事件</td>

</tr>

<tr>

<td>onsubmit</td>

<td>IE3 、N2</td>

<td>一个表单被递交时触发此事件</td>

</tr>

</tbody>

<tbody>

<tr>

<td colspan="3">滚动字幕事件</td>

</tr>

<tr>

<td>onbounce</td>

<td>IE4、N</td>

<td>在Marquee内的内容移动至Marquee显示范围之外时触发此事件</td>

</tr>

<tr>

<td>onfinish</td>

<td>IE4、N</td>

<td>当Marquee元素完成需要显示的内容后触发此事件</td>

</tr>

<tr>

<td>onstart</td>

<td>IE4、 N</td>

<td>当Marquee元素开始显示内容时触发此事件</td>

</tr>

</tbody>

<tbody>

<tr>

<td colspan="3">编辑事件</td>

</tr>

<tr>

<td>onbeforecopy</td>

<td>IE5、N</td>

<td>当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件</td>

</tr>

<tr>

<td>onbeforecut</td>

<td>IE5、 N</td>

<td>当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件</td>

</tr>

<tr>

<td>onbeforeeditfocus</td>

<td>IE5、N</td>

<td>当前元素将要进入编辑状态</td>

</tr>

<tr>

<td>onbeforepaste</td>

<td>IE5、 N</td>

<td>内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件</td>

</tr>

<tr>

<td>onbeforeupdate</td>

<td>IE5、 N</td>

<td>当浏览者粘贴系统剪贴板中的内容时通知目标对象</td>

</tr>

<tr>

<td>oncontextmenu</td>

<td>IE5、N</td>

<td>当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件</td>

</tr>

<tr>

<td>oncopy</td>

<td>IE5、N</td>

<td>当页面当前的被选择内容被复制后触发此事件</td>

</tr>

<tr>

<td>oncut</td>

<td>IE5、N</td>

<td>当页面当前的被选择内容被剪切时触发此事件</td>

</tr>

<tr>

<td>ondrag</td>

<td>IE5、N</td>

<td>当某个对象被拖动时触发此事件 [活动事件]</td>

</tr>

<tr>

<td>ondragdrop</td>

<td>IE、N4</td>

<td>一个外部对象被鼠标拖进当前窗口或者帧</td>

</tr>

<tr>

<td>ondragend</td>

<td>IE5、N</td>

<td>当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了</td>

</tr>

<tr>

<td>ondragenter</td>

<td>IE5、N</td>

<td>当对象被鼠标拖动的对象进入其容器范围内时触发此事件</td>

</tr>

<tr>

<td>ondragleave</td>

<td>IE5、N</td>

<td>当对象被鼠标拖动的对象离开其容器范围内时触发此事件</td>

</tr>

<tr>

<td>ondragover</td>

<td>IE5、N</td>

<td>当某被拖动的对象在另一对象容器范围内拖动时触发此事件</td>

</tr>

<tr>

<td>ondragstart</td>

<td>IE4、N</td>

<td>当某对象将被拖动时触发此事件</td>

</tr>

<tr>

<td>ondrop</td>

<td>IE5、N</td>

<td>在一个拖动过程中,释放鼠标键时触发此事件</td>

</tr>

<tr>

<td>onlosecapture</td>

<td>IE5、N</td>

<td>当元素失去鼠标移动所形成的选择焦点时触发此事件</td>

</tr>

<tr>

<td>onpaste</td>

<td>IE5、N</td>

<td>当内容被粘贴时触发此事件</td>

</tr>

<tr>

<td>onselect</td>

<td>IE4、N</td>

<td>当文本内容被选择时的事件</td>

</tr>

<tr>

<td>onselectstart</td>

<td>IE4、N</td>

<td>当文本内容选择将开始发生时触发的事件</td>

</tr>

</tbody>

<tbody>

<tr>

<td colspan="3">数据绑定</td>

</tr>

<tr>

<td>onafterupdate</td>

<td>IE4、N</td>

<td>当数据完成由数据源到对象的传送时触发此事件</td>

</tr>

<tr>

<td>oncellchange</td>

<td>IE5、N</td>

<td>当数据来源发生变化时</td>

</tr>

<tr>

<td>ondataavailable</td>

<td>IE4、N</td>

<td>当数据接收完成时触发事件</td>

</tr>

<tr>

<td>ondatasetchanged</td>

<td>IE4、N</td>

<td>数据在数据源发生变化时触发的事件</td>

</tr>

<tr>

<td>ondatasetcomplete</td>

<td>IE4、N</td>

<td>当来子数据源的全部有效数据读取完毕时触发此事件</td>

</tr>

<tr>

<td>onerrorupdate</td>

<td>IE4、N</td>

<td>当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件</td>

</tr>

<tr>

<td>onrowenter</td>

<td>IE5、N</td>

<td>当前数据源的数据发生变化并且有新的有效数据时触发的事件</td>

</tr>

<tr>

<td>onrowexit</td>

<td>IE5、N</td>

<td>当前数据源的数据将要发生变化时触发的事件</td>

</tr>

<tr>

<td>onrowsdelete</td>

<td>IE5、N</td>

<td>当前数据记录将被删除时触发此事件</td>

</tr>

<tr>

<td>onrowsinserted</td>

<td>IE5、N</td>

<td>当前数据源将要插入新数据记录时触发此事件</td>

</tr>

</tbody>

<tbody>

<tr>

<td colspan="3">外部事件</td>

</tr>

<tr>

<td>onafterprint</td>

<td>IE5、N</td>

<td>当文档被打印后触发此事件</td>

</tr>

<tr>

<td>onbeforeprint</td>

<td>IE5、N</td>

<td>当文档即将打印时触发此事件</td>

</tr>

<tr>

<td>onfilterchange</td>

<td>IE4、N</td>

<td>当某个对象的滤镜效果发生变化时触发的事件</td>

</tr>

<tr>

<td>onhelp</td>

<td>IE4、N</td>

<td>当浏览者按下F1或者浏览器的帮助选择时触发此事件</td>

</tr>

<tr>

<td>onpropertychange</td>

<td>IE5、N</td>

<td>当对象的属性之一发生变化时触发此事件</td>

</tr>

<tr>

<td>onreadystatechange</td>

<td>IE4、N</td>

<td>当对象的初始化属性值发生变化时触发此事件</td>

</tr>

</tbody>

</table>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

JavaScript面试系列:JavaScript设计模式之桥接模式和懒加载

Java程序员面试系列-什么是Java Marker Interface(标记接口)

642
来自专栏Python自动化测试

Jmeter接口测试实战之HTTP Cookie管理器(十二 )

在使用测试工具Jmeter做接口测试中,怎么记录下它登录成功后的信息,在接口测试的应用场景中,一般对业务的操作都是基于用户登录情况下的操作。它的测...

682
来自专栏java架构师

资源文件的动态加载

页面加载 首先,浏览器发起直接对目标html的请求,然后分析其中用到的资源并下载,浏览器有自己的规则来判断什么样的资源可以被并行下载,什么样的不可以,浏览器对加...

3069
来自专栏娱乐心理测试

微信小程序自定义组件(Toast)

微信官方的wx.showToast这个API用起来限制性太强,在正式项目上根本用不上,但是又没有其他组件或API可以替代,所以就自己通过网上大神的方法自己写了一...

753
来自专栏青枫的专栏

c语言基础学习11_项目实战:IDE(集成开发环境)

============================================================================= ==...

902
来自专栏King_3的技术专栏

leetcode-31-下一个排列

实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列。

622
来自专栏精讲JAVA

OutOfMemoryError异常系列之方法区溢出

继续上一篇文章讲解,在上一篇中给大家留下了一个小问题,就是在jdk1.6中返回的是两个false,在jdk1.7中返回的是true false,,上一次代码没有...

1798
来自专栏更流畅、简洁的软件开发方式

【分享】 纯 js 表单控件 —— 让 “增改查” 更轻松!

  我们在做增删改查的时候,必可避免的要做表单,那么表单是怎么弄出来的呢?拖拽控件、手写、js创建还是第三方控件(包括js版)? 以前用服务器控件写了一套表单控...

2288
来自专栏技术墨客

React JSX语法与组件

上面这段有趣的例子既不是标准的JavaScript也不是HTML,它就是我们接下来要介绍的JSX的语法,是一种JavaScript的扩展。在React中使用JS...

1305
来自专栏HaHack

学习 React Native for Android:React 基础

1122

扫码关注云+社区