DW前端代码汇总

DW前端代码汇总==============================前端代码============================------------------------------------*标签*---------------------------------<button></button>--按钮标签<ul></ul>-

HCTLTCT

9637人浏览 · 2021-04-29 10:49:33

HCTLTCT · 2021-04-29 10:49:33 发布

DW前端代码汇总

==============================前端代码============================
------------------------------------*标签*---------------------------------
<button></button>--按钮标签
<ul></ul>---段落标签
<u></u>--下划线
<link rel="icon" type="image/x-icom" href="../images/icon2.ico">---引入网页图标
<a href="#"></a>-------里面加跳转网页，锚标签
<link rel="stylesheet" href="css">------css引入
<s></s>----删除线
--js引入;
<span></span>------------（行内）
<input type="text">-------文本框
<b></b>-------------------粗体
<input type="password">---密码框
<i></i> ------------------斜体
<input type="submit">-----提交按扭
<hr></hr>-----------------水平线
<input type="checkbox">---复选框
<p></p>-------------------段落
<input type="radio">------单选框
<br></br>-----------------换行
<input type="reset">------重置按扭
<img>---------------------插入图片（自闭和标签）
<input type="image">------图片按扭
autocomplete="off"--------删除历史记录
<h1></h1>-----------------标题标签1>2>3>4>5>6
<input type="button" value="按钮">--按钮
<hr>----线条 <input,type="file">----浏览文件
<select name="" id=""></select>----下拉框
<option value=""></option>---------选项标签
<input type="checkbox">-----------复选框
<input type="date">---------------日历
<label for="Name">姓名</label>-----for="Name"：光标聚集效果
<input type="text" placeholder="提示">--//placeholder="提示">文本框里提示
<select>---下选框
   <input,type="hidden">----隐藏域
   disabled 这个加在input标签后面；禁用input
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
           alert('提示框');
           <big> -----定义大号字
           <em> ------定义着重文字
           <i> -------定义斜体字
           <small> ---定义小号字
           <strong> --定义加重语气
           <sub> -----定义下标字
           <sup> -----定义上标字
           <ins> -----定义插入字
           <del> -----定义删除字

===============================CSS * 基础样式：=================================
transform: translateY(-110px);--y轴运动
   overflow:hidden;-----隐藏 display:none;
style------放在div里面可以写css样式（行内样式）
   border-color:transparent transparent transparent #65aac3; - 制作三角形
width:300px;----------------宽度;
   display: inline-block;------块级元素横排显示
height: 300px;--------------高度;
   text-decoration: underline;-添加文字下划线
background：#fff;-----------背景颜色；
   outline: none;--------------取消文本框选择效果
opacity:0~1之间;-------------透明度
line-height: 20px;----------行高
   background-size: cover------图片大小自适应
font-size: 12px;------------字体大小
   contenteditable="true"------div编辑文本
font-style: italic;---------文字斜体
   font-style: oblique;--------文字倾体
color: #fff;----------------字体颜色
   font-weight: normal;--------字体正常
font-weight: bold;----------字体加粗
   font-style:--设置字体的风格-属性值有：normal(正常),italic(斜体),oblique(倾斜)
text-decoration:line-through;-----中划线
   text-decoration: overline;--------上划线
text-decoration: line-through;----中划线
   text-decoration:none; ------------取消<a>下划线
overflow: hidden;-----------------超出部分隐藏
   text-shadow: #f00 2px 5px 5px;----该属性用于设置的文字是否有阴影效果
   color:指定该阴影的颜色
   xoffset:指定阴影在横向上的偏移。
radius：A指定阴影的模糊半径。
   模糊半径越大，阴影看上去越模糊。
   多重阴影：多加几组数据即可。
   sytle="text-shadow:5px 5px 2px #cf0"
   Font-------------字体
   style="display: none;"----行内样式。隐藏（display: none）
:last-child--------选择到最后一个元素
   :hover-------------伪类
:first-child-------选择到第一个元素
   :nth-child(2)------选择到第2（几个）元素
border-radius: 5px;--------圆角样式
   border-radius:0px 0px 100% ;--扇形圆角
   border-radius:0px 100% 0px 0px ;
   border-radius:100% 0px 0px ;
    border-radius:0px 0px 0px 100%;
   border-radius: 0px 0px 100%;
   display: block;（display:inline-block;）-----行内元素转换为块级元素
   overflow-x: hidden;------------去掉下拉条；
display: inline-block;---------行内块级元素
background: url();-------------背景图片
list-style: none;--------------取消无序列表中的默认样式
text-decoration: none;---------取消下划线
list-style: none;--------------取消 li 标点的点；
box-shadow：5px 5px 5px #111;--盒子阴影；
   设置四边阴影多加一个数值，如=0px 1px 2px 3px #111;
h-shadow：------------水平方向阴影
v-shadow：------------垂直方向的阴影
blur：----------------模糊距离
color：---------------字体颜色
   font-family: 'Lobster',cursive;--------字体楷体
transparent-----------透明色
no-repeat-------------不重复出现
cursor: pointer;------鼠标移入变成手的形状
z-index: -------------层次（和定位一起使用）
even-----------------—选择序列位偶数的元素、odd选择序列为奇数的元素
overflow: scroll;-----超出部分鼠标滚轮
------------------------------------------------------------------
=========================特殊符号代码=============================
|| ∴ &there4; ∞ ∞ ⊕ &oplus; Δ ΔΘ Θ ||
|| © ® ™  ----空格 ||
---------------------------------------------------------------------
定位与浮动：

清除浮动封装：
.clearfix : after{
content: "";
display: block;
clear: both;
}
. clearfix{
zoom:1;/*浏览器兼容性*/
}

position: absolute;--------/*绝对定位*/
overflow: hidden;----------/*超出浮动隐藏，清除浮动*/
position: relative;--------/*相对定位*/
position: fixed;-----------/*固定定位*/
padding: 10px 0 0 16px;----/*内边距*/
margin: 5px 5px 0 0;-------/*外边距*/
padding-left: 10px;--------/*左内边距*/
margin: 5px 5px 0 0;-------/*外边距*/
margin-top: 30px;----------/*顶部外边距*/
float: left;---------------/*左浮动*/
float:right;---------------/*右浮动*/
text-align: center;--------/*文本居中*/
margin: 0 auto;------------/*居中显示*/
top: px;-------------------/*上*/
left: px;------------------/*左*/
right;---------------------/*右*/
bottom ;-------------------/*下*/
background-position: 30px 0;-----/*背景图片的背景位置*/
background: url("../images/wujilu.png")no-repeat 430px center;
                   no-repeat:只出现一个；430px：距离 center居中
-----------------------------------边框：-----------------------------
outline: 1px solid #1709BF;--------内边框
border-top-width: 2px;---------------顶部边框的宽度
border-top-style: solid;-------------顶部边框的边框样式
border-top-color: #f67c2b;-----------顶部边框的边框颜色
border-top: 1px solid #e4e7ed;-------1个像素的上边框
border: 1px solid #e4e7ed;-----------边框
border:none ----------------------去掉边框
------------------------------ JS常用------------------------------
onmouseover-------鼠标移入事件
onmouseout-------鼠标移出
erwm.onmouseover = function(){
   ewm.style.display = "block";

   };
   erwm.onmouseout = function(){
       ewm.style.display = "none";
   };

$("body").keyup(function (e) {--------------键盘敲击事件；
console.log(e.keyCode);-----------输出需要点击的案件编号
});
---------------------------------------------------------
gb.onclick = function(){
       zzcc.style.display = "none"; ----------------鼠标点击事件
   };
-------------------------------------------------------------------

mainCell:".contentbox ul",------------------切换元素的包裹层对象
autoPage:true,------------------------------程序自动分页
effect:"leftLoop",--------------------------向左循环播放
autoPlay:true,------------------------------自动播放
vis:5,--------------------------------------可视区个数
interTime:500,------------------------------速度
console.log(list.style.left);---------------js通过 style 获取css的样式
console.log(prev);--------------------------控制台输出
alert(55);----------------------------------弹出窗口
var timer=null;-----------------------------定时器
var blswitch=false;-------------------------动画是否在运动

------------------------------表单-----------------------------------
表格   描述
cellspacing="0" ----------------------表格间距为0
<table></table>----------------------定义表格
<caption></caption>------------------定义表格标题
<th></th>----------------------------定义表格的表头
<tr></tr>----------------------------定义表格的行
<td></td>----------------------------定义表格单元
<thead></thead>----------------------定义表格的页眉
<tbody></tbody>----------------------定义表格的主体
<tfoot></tfoot>----------------------定义表格的页脚
<col></col>--------------------------定义用于表格列的属性
<colgroup></colgroup>----------------定义表格列的组
<thead></thead>----------------------表格的头部
<tfoot></tfoot>----------------------表格尾部
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
checked-----默认选中
<textarea name="" id="" cols="50" rows="5"></textarea>----文本域
rows="5"控制文本域高度
<input type="file">--------文件表单
z-index:100 ;----------层级关系，和定位一起使用
position: absolute;
<select name="" id="">
   <option value="">请选择</option>
   <option value="">项目延迟</option>------------下拉框案例
</select>
=============================媒体查询=======================================
@media screen and (max-width:576px){--最大-宽度是：576px的时候，执行以下代码↓（0-576）
.box div{
       width:100%;
           }
}
@media screen and (min-width:576px){--最小-宽度是576px的时候，执行以下代码↓（576以上↑）
.box div{
           width:50%;
       }
}
==========================css3动画效果==================================
linear;匀速
ease；加速移动
ease-in；先慢后快
ease-out；先快后慢
ease-in-out；先慢再快如何再慢
transition: all 2s linear 1s------执行2秒完成，匀速延迟1秒
旋转：== transform: skew( 360deg );-----旋转角度
原点：== transform-origin: 50% 0;
关键字：百分比：
top = top center 50% 0
left = left center 0 50%
bottom = bottom center 50% 100%
right = right center 100% 0
center = center center 50% 50%
top left = left top 0 0
top right = right top 0 100%
bottom left = left bottom 100% 100%
bottom right = right bottom 100% 0

矩阵==transform: matrix(1,0,0,1,20,40);-------最后两个参数表示X/Y轴的一个坐标；
缩放==transform: scale(2,3);-括号里是缩放倍数，分别代表X/Y轴，只写一个的时候xy轴默认一样；
扭曲==transform: skew(45deg,50deg);--括号里代表扭曲角度，分别为X/Y轴的一个度数,deg是单位度
div：hever{
animation-name: changecolor;---------------调用下面的动画名称；
animation-duration: 5s;--------------------执行时间；
animation-iteration-count: infinite;-------动画播放次数，通常为整数，也可以是小数，取值为infinite，动画将无限次播放；
animation-direction: normal;--------------设置动画播放方向，主要取值有两个：normal ，alternate；//normal动画的每次循环都是向前播放，/alternate动画播放在第偶数次向前播放；
animation-play-state：running；------------设置播放状态，//主要取值running和paused，其中running是默认值，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放；
}

@keyframes changecolor{------changecolor动画名称（定义一个动画名称）
       0%{
           background:#f00;
       }
       50%{
           background:#f55;
       }
       100%{
           background:#fff;
       }
}

CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：

图片收放案例：class="cont"→img中的图片
.cont img{
   transition: all 1s;
}
.cont img:hover{
   transform: scale(0.8);
}
图片旋转扭曲案例：transform: rotate(30deg);
transform:skew(10deg,20deg); 前缀浏览器
浏览器兼容+前缀：-webkit-transform: rotate(30deg);***-webkit
   chrome和safari-moz-transform: rotate(30deg);******-moz
   firefox-o-transform: rotate(30deg);**********-o
   opera-mz-transform: rotate(30deg);********-mz

IE

transition-property:指定过度或动态模拟的css属性
transition-duration：指定完成过度所需时间
transition-timing-function：指定过渡函数
transition-delay：指定开始出现的延迟时间

=============================js事件对象=====================================
   鼠标 / 键盘属性
       属性描述
       altKey            返回当事件被触发时,"ALT" 是否被按下
       button            返回当事件被触发时,哪个鼠标按钮被点击
       clientX        返回当事件被触发时,鼠标指针的水平坐标
       clientY        返回当事件被触发时,鼠标指针的垂直坐标
       ctrlKey        返回当事件被触发时,"CTRL" 键是否被按下
       metaKey        返回当事件被触发时,"meta" 键是否被按下
       relatedTarget    返回与事件的目标节点相关的节点
       screenX        返回当某个事件被触发时,鼠标指针的水平坐标
       screenY        返回当某个事件被触发时,鼠标指针的垂直坐标
       shiftKey        返回当事件被触发时,"SHIFT" 键是否被按下

   键盘事件：
       onkeydown: 键盘被按下事件
           - 如果一直按着某个键不松开，则会一直触发该事件
           - 当onkeydown事件连续触发时，第一次和第二次之间的间隔时间稍微长一点，其他则会非常快。这是为了防止误操作的发生
       onkeyup: 键盘被松开的事件

   键盘事件一般都会绑定给一些可以获取焦点的对象或则是document

   可以通过keyCode来获取按键的编码，
           通过它可以判断哪个键被按下

           除了keyCode，事件对象中还提供了几个属性
               altKey
               ctrlKey
               shiftKey
                   - 这三个属性分别是用来判断alt cltrl shift是否被按下的
                   如果被按下了则返回true，否则返回false
=============================js事件对象=====================================

=============================js正则表达式====================================
       量词：
           - 通过量词可以设置一个内容出现的次数
           - 量词只对它前面一个内容起作用
           - {n} 出现n次
           - {m,n} 出现m次到n次
           - {n,} 出现n次以上
           - + 至少出现一次
           - * 出现零次或则零次以上
           - ? 出现一次或则零次

       手机号的规则：
       1 3 893443823（11位）
           1.以1开头
           2.第二位（3-9）
           3.第三位以后任意9个数字

           reg=/^1[3-9][0-9]{9}$/;
           console.log(reg.test("1380922568512"));


       元字符:
           . 表示匹配任意字符
           \w 匹配任意字母、数字、"_" 下划线==》[A-z0-9_]
           \W 匹配除了字母、数字、"_" 下划线==》[^A-z0-9_]
           \d 匹配数字[0-9]
           \D 除了数字[^0-9]的任意字符
           \s 匹配空格
           \S 匹配除了空格的任意字符
           \b 匹配单词边界
           \B 匹配非单词边界。
=============================js正则表达式====================================

=============================js包装类=======================================
       数据类型：
       基本数据类型：String Number Boolean Null Undefined
       引用数据类型：Object

       在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型转换为对象
           String()
               - 可以将基本数据类型字符串转换为String对象
           Number()
               - 可以将基本数据类型的数字转换为Number对象
           Boolean()
               - 可以将基本数据类型的布尔值转换为Boolean对象
           但是请注意！！！
               我们在实际应用中不会使用基本数据类型的对象，
               如果我们使用基本数据类型的对象，在做一些比较的时候可能会带来一些不可预期的结果。（看bool的例子）

           包装类浏览器底层自己使用的
=============================js包装类=======================================

=============================js事件的传播与委派==================================

   事件的传播
    - 关于事件的传播网景公司和微软公司有不同的理解
    - 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发   当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
   - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素

- W3C综合了两个公司的方案，将事件传播分成了三个阶段
    1.捕获阶段
        - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
   2.目标阶段
       - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
   3.冒泡阶段
       - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

   - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
            一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
    - IE8及以下的浏览器中没有捕获阶段

   事件的委派
   - 指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
   - 事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
   //事件对象的属性target：返回触发此事件的元素(事件的目标节点)
       参数：
           obj 要绑定事件的对象
           eventStr 事件的字符串(不要on)
           callback 回调函数
=============================js事件的传播与委派==================================

=============================jsBOM浏览器对象模型==================================
   JS对象：
   自定义对象、
   内建对象（String/Math/Array数组/Regex正则/Date日期对象）、
   宿主对象（DOM BOM）

   什么是BOM?
       DOM 文档对象模型
       - BOM:浏览器对象模型 //宿主对象
       - BOM 提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关
       - BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而控制浏览器的各种行为

   简单来说：BOM可以使我们通过JS来操作浏览器，在BOM中提供了一组对象，用来完成对浏览器的操作
       BOM对象
       1.Window对象
           - 代表的是整个浏览器窗口，同时window也是网页中的全局对象
       2.Navigator对象（网景公司）
           - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
       3.Location
       - 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或则操作浏览器页面跳转
       4.History
       - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私问题，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
       5.Screen
           - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

这些BOM对象在浏览器中都是作为window对象的属性保存
可以通过window对象来使用，也可以直接使用
=============================jsBOM浏览器对象模型==================================

=======================Flex布局----弹性布局=======================================
Flex是Flexible Box的缩写
display属性+position属性+float属性
display:flex;------------在父元素设置，里面的子元素自动的并排显示；
display:inline-flex;-----行内元素使用Flex
注意！！！！-----设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效===
flex-direction: row ;----主轴为水平方向,起点在左端 →
row-reverse:-------------主轴为水平方向,起点在右端 ←
column:------------------主轴为垂直方向,起点在上沿 ↑
column-reverse;----------主轴为垂直方向,起点在下沿 ↓
align-items:flex-start;------------交叉轴的起点对齐;--上对齐
align-items:flex-end;--------------交叉轴的终点对齐;--下对齐
align-items:center;----------------交叉轴的中点对齐;--居中对齐
align-items:baseline; -------------项目的第一行文字的基线对齐;--文字对齐;
align-items:stretch;---------如果项目未设置高度或设为auto,将占满整个容器的高度
-+-+-+-+-+--+-++-+-+-===================+-+-+-+-+--+-+-+-+-+-+---++--+-

================================音频文件======================================
进度条:
<meter value="0.8"></meter>
<progress value="22" max="100"></progress>
音频文件:
<audio src="file:///E:/98.mp3" autoplay></audio>
autoplay---------------------------音频在就绪后马上播放
controls---------------------------向用户显示音频控件（比如播放/暂停按钮）
loop-------------------------------每当音频结束时重新开始播放
muted------------------------------音频输出为静音
URL--------------------------------规定音频文件的 URL
<embed height="50" width="100" src="horse.mp3">
<object height="50" width="100" data="horse.mp3"></object>
视频文件 MP4、WebM、Ogg
<video src="星辰变.mp4"></video>
属性与音频相似
poster 视频加载封面
onblur = "()"-------焦点事件
   onclick = "()"---------点击事件
οnkeydοwn="onreturn()"------键盘敲击事件

==============================HTML DOM 事件 ======================================
       鼠标事件:
           onclick        当用户点击某个对象时调用的事件句柄
           oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
           ondblclick        当用户双击某个对象时调用的事件句柄
           onmousedown    鼠标按钮被按下
           onmouseenter    当鼠标指针移动到元素上时触发
           onmouseleave    当鼠标指针移出元素时触发
           onmousemove    鼠标被移动
           onmouseover    鼠标移到某元素之上
           onmouseout        鼠标从某元素移开
           onmouseup        鼠标按键被松开

       键盘事件:
           onkeydown        某个键盘按键被按下
           onkeypress        某个键盘按键被按下并松开
           onkeyup        某个键盘按键被松开

框架/对象Frame/Object事件:
   onabort            图像的加载被中断(<object>)
   onbeforeunload        该事件在即将离开页面（刷新或关闭）时触发
   onerror        在加载文档或图像时发生错误(<object>,<body>和<frameset>)
   onhashchange        该事件在当前 URL 的锚部分发生修改时触发
   onload                一张页面或一幅图像完成加载
   onpageshow            该事件在用户访问页面时触发
   onpagehide            该事件在用户离开当前网页跳转到另外一个页面时触发
   onresize            窗口或框架被重新调整大小
   onscroll            当文档被滚动时发生的事件
   onunload            用户退出页面(<body>和<frameset>)
   onunload            用户退出页面(<body>和<frameset>)

       表单事件:
           onblur            元素失去焦点时触发
           onchange        该事件在表单元素的内容改变时触发
                           (<input>,<keygen>,<select>,和<textarea>)
           onfocus        元素获取焦点时触发
           onfocusin        元素即将获取焦点时触发
           onfocusout        元素即将失去焦点时触发
           oninput        元素获取用户输入时触发
           onreset        表单重置时触发
           onsearch        用户向搜索域输入文本时触发(<input="search">)
           onselect        用户选取文本时触发(<input>和<textarea>)
           onsubmit        表单提交时触发

       剪贴板事件:
           oncopy            该事件在用户拷贝元素内容时触发
           oncut            该事件在用户剪切元素内容时触发
           onpaste        该事件在用户粘贴元素内容时触发

       打印事件:
           onafterprint    该事件在页面已经开始打印，或者打印窗口已经关闭时触发
           onbeforeprint    该事件在页面即将开始打印时触发

       拖动事件:
           ondrag            该事件在元素正在拖动时触发
           ondragend        该事件在用户完成元素的拖动时触发
           ondragenter    该事件在拖动的元素进入放置目标时触发
           ondragleave    该事件在拖动元素离开放置目标时触发
           ondragover        该事件在拖动元素在放置目标上时触发
           ondragstart    该事件在用户开始拖动元素时触发
           ondragstart    该事件在用户开始拖动元素时触发
           ondrop            该事件在拖动元素放置在目标区域时触发

多媒体事件:
   onabort                事件在视频/音频（audio/video）终止加载时触发
   oncanplay                事件在用户可以开始播放视频/音频（audio/video）时触发
oncanplaythrough        事件在视频/音频（audio/video）可以正常播放且无需停顿和缓冲时触发
   ondurationchange        事件在视频/音频（audio/video）的时长发生变化时触发
   onemptied                当期播放列表为空时触发
   onended                事件在视频/音频（audio/video）播放结束时触发
   onerror                事件在视频/音频（audio/video）数据加载期间发生错误时触发
   onloadeddata            事件在浏览器加载视频/音频（audio/video）当前帧时触发触发
   onloadedmetadata        事件在指定视频/音频（audio/video）的元数据加载后触发
   onloadstart            事件在浏览器开始寻找指定视频/音频（audio/video）触发
   onpause                事件在视频/音频（audio/video）暂停时触发
   onplay                    事件在视频/音频（audio/video）开始播放时触发
onplaying            事件在视频/音频（audio/video）暂停或者在缓冲后准备重新开始播放时触发
   onprogress                事件在浏览器下载指定的视频/音频（audio/video）时触发
   onratechange            事件在视频/音频（audio/video）的播放速度发送改变时触发
   onseeked                事件在用户重新定位视频/音频（audio/video）的播放位置后触发
   onseeking                事件在用户开始重新定位视频/音频（audio/video）时触发
   onstalled                事件在浏览器获取媒体数据，但媒体数据不可用时触发
   onsuspend                事件在浏览器读取媒体数据中止时触发
   ontimeupdate            事件在当前的播放位置发送改变时触发
   onvolumechange            事件在音量发生改变时触发
   onwaiting                事件在视频由于要播放下一帧而需要缓冲时触发


       动画事件:
           animationend            该事件在 CSS 动画结束播放时触发
           animationiteration        该事件在 CSS 动画重复播放时触发
           animationstart            该事件在 CSS 动画开始播放时触发

       过渡事件:
           transitionend            该事件在 CSS 完成过渡后触发

       其他事件:
       onmessage
该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)
接收到消息时触发
       onmousewheel            已废弃使用 onwheel 事件替代
       ononline                该事件在浏览器开始在线工作时触发
       onoffline                该事件在浏览器开始离线工作时触发
       onpopstate                该事件在窗口的浏览历史（history 对象）发生改变时触发
       onshow                    该事件当 <menu> 元素在上下文菜单显示时触发
       onstorage                该事件在 Web Storage(HTML 5 Web 存储)更新时触发
       ontoggle                该事件在用户打开或关闭 <details> 元素时触发
       onwheel                该事件在鼠标滚轮在元素上下滚动时触发

==============================HTML DOM 事件=======================================

这是我所学到的DW，所以我要分享给各位亲，希望可以帮助到你们。