本文共 3518 字，大约阅读时间需要 11 分钟。
1.什么是事件
一件事情发生了，对其进行处理或者响应。 2. 事件的三要素 事件源，事件类型，事件处理 比如：点击右上角的X，页面关闭。 事件源：X，事件类型：点击 事件处理：页面关闭。 谁引发的后续事件，谁就是事件源。事件源：DOM节点（一般为元素节点）
事件类型 事件处理 函数（代码块）事件类型：
1.鼠标事件 2.键盘事件 3.浏览器事件 4.表单事件click == 鼠标左键单击 dbclick == 鼠标左键双击 contextmenu == 鼠标右键单击 mousewheel == scroll鼠标滚动 mousedown == 鼠标单击事件 不管是左键还是右键，还是滚动都可以触发 mouseup == 鼠标抬起 mousemove == 鼠标移动 mouseover == 鼠标移入（会进行事件传播） mouseout == 鼠标移出
mouseenter == 鼠标移入（不会进行事件传播）
mouseleave == 鼠标移出鼠标滚动事件
onmousewheel事件
该事件发生在鼠标滚轮滚动时，火狐中，使用DOMMouseScroll跟其细节事件代替。注意：onmousewheel和DOMMouseScroll事件，在没有滚动条或者内容没有被滚动的时候也会发生，意思是只要鼠标动不管页面动不动。如果你是想一个元素内容滚动后接受一个通知的话，使用onscroll事件。
onscroll事件
事件发生在元素内容滚动的时候，也包括键盘上下键，载入也可触发。事件仅仅在有滚动条时发生，使用overflow属性为元素创建一个滚动条。
使用window.scroll必须要有滚动条才能触发，一般配合$(window).scrollTop()使用.
获取滚动值
获取滚动值 原生js的获取页面滚动值的兼容性处理 document.documentElement.scrollTop 标准模式 document.body.scrollTop 没有DOCTYPE 声明的时候处理 window.pageYOffset safari浏览器
用户改变域的内容
onchange//效果当下拉框的内容发生改变使触发该事件 城市:
不是所有的元素都能触发
表单元素(选中效果)，document ,windowkeydown
键盘按下 keyup 键盘抬起keypress
键盘按下 在文本框中输入的内容必须与你按下的键是一致的Document
window事件
load 页面加载完毕
scroll 页面滚动 resize 窗口尺寸改变 offline 网络断开 online 网络恢复表单事件主要是表单元素和form标签的
change 表单内容发生改变时，而且已经失去焦点时触发。
input 表单输入事件
focus 获取焦点
blur 失去焦点
submit 表单提交
reset 表单重置
表单元素的另外三种获取方法(不用记,知道就好,不用)
不用记这三种不用
获取表单内容并提交的三种方式(优先用第一种)
第一种方式/使用的是普通按钮的提交 获取表单.submit();这个方法提交
1.行内式
在标签中直接通过on+事件类型 属性 去绑定事件2.内联式
（1）直接绑定匿名函数 （2）先定义函数，再去绑定var box = document.getElementById("box"); box.onclick = function(){ alert("直接绑定匿名函数"); } addEventListener
语法：事件源.addEventListener(“事件类型”,事件处理函数);/**/
addEventListener 第三个参数为true的话 表示捕获。 false 表示 冒泡。
使用监听，可以给同一个事件类型绑定多个事件处理函数。
多个事件处理函数执行顺序是按照绑定顺序来的 先绑定先执行在IE低版本不支持
attachEvent() IE低版本支持 语法：事件源.attachEvent(“on+事件类型”,事件处理函数); 多个事件处理函数的执行顺序是按照绑定顺序的倒序来的 先绑定后执行对于非监听方式，可以直接将null赋值。(也叫事件解绑)
box.onclick = function(){ alert("您已成功充值1000万！"); box.onclick = null;//弹一次就会停止 } box.onclick = null;//放外面一次都不会弹 对于监听方式绑定解绑方法
标准浏览器 removeEventListener(“事件类型”,事件处理函数)； 【注意】 如果你想要解绑事件，那么你在绑定事件时，一定要将函数单独定义。使用函数名的方式去绑定事件。(匿名函数是没办法解绑的)IE低版本
detachEvent(“on+事件类型”,事件处理函数);window.onload = function(){ /** ele 事件源 type 事件类型 handler 事件处理函数 */ function on(ele,type,handler) { // 标准浏览器 if (ele.addEventListener) { ele.addEventListener(type,handler);//下面调用时加引号了,所以这里没加 }else{ // IE浏览器 ele.attachEvent("on"+type,handler); } } function show(){ alert("您已成功充值1000万！"); } var box = document.getElementById("box"); on(box,"click",show);//调用传参 } 城市:
转载地址：http://jydyf.baihongyu.com/