事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。
?
事件是一瞬间触发。
DOM节点绑定（格式）：节点.on+事件名 = 事件处理函数;
（1）同名事件会被覆盖
（2）事件处理函数只能冒泡阶段执行
div.onclick = function(){}
<div onclick="sum()"></div> 不常用，不实用。
（1）同名事件不会被覆盖
（2）事件处理函数默认冒泡阶段执行
当用户点击某个对象时调用的事件
* ondblclick = onclick*2
当用户双击某个对象时调用的事件
(兼容ie浏览器 e = e||window.event)
兼容写法，一般直接给e赋值再用：e = e || window.event;
（1.1）、鼠标按键
*button 返回当事件被触发时，哪个鼠标按键被点击。
* 标准浏览器：0，1，2（左，滚，右）
* IE8-（IE8以下的浏览器）
1鼠标左键， 2鼠标右键， 3左右同时按， 4滚轮， 5左键加滚轮， 6右键加滚轮， 7三个同时
?
1 例：<div id="output"></div> 2 var output = document.getElementById("output"); 3 output.onmousedown = function(e){ 4 if(e.button == 0){ 5 output.innerHTML = "开火"; 6 }else if(e.button == 1){ 7 output.innerHTML = "切枪"; 8 }else if(e.button == 2){ 9 output.innerHTML = "开镜"; 10 } 11 }
1 光标相对于浏览器可视区域的位置，也就是浏览器坐标。 2 document.onmousemove = function(e){ output.children[0].innerHTML = "client:"+e.clientX+‘,‘+e.clientY; 3 }
1 光标指针相对于电脑屏幕的水平/垂直坐标 2 document.onmousemove = function(e){ output.children[1].innerHTML = "screen:"+e.screenX+‘,‘+e.screenY; 3 }
* 鼠标相对于文档的位置
* 包括滚动条滚动的距离，即：e.clientX+window.scrollX
* IE8-不支持
1 document.onmousemove = function(e){ output.children[2].innerHTML = "page:"+e.pageX+‘,‘+e.pageY; 2 }
* 光标相对于事件源对象左上角相对偏移量。
* 事件源对象：触发事件的对象
keyCode ==> (IE8)
兼容写法 var e.which = e.which || e.keyCode
* 对于keypress事件，该属性声明了被敲击的键生成的 Unicode 字符码(ASCII码)
* 对于keydown和keyup事件，它**指定了被敲击的键的虚拟键盘码**。虚拟键盘码可能和使用的键盘的布局相关。
* 当事件被触发时，CTRL 键是否被按下。返回值为布尔值
* 当事件被触发时，Alt键是否被按下。返回值为布尔值
* 当事件被触发时，Shift键是否被按下。返回值为布尔值
1 //键盘按下，根据上下左右移动小鸟 2 document.onkeydown = function(e){ 3 // 1.获取小鸟当前位置 4 var top = bird.offsetTop; 5 var left = bird.offsetLeft; 6 //2.初始化速度及类名变量 7 var speed = 10; 8 var className = ‘‘; 9 // 3.判断按下上下左右方向键,设置left值及类名变量值 10 switch(e.keyCode){ case 37:left -= speed; className = ‘‘; break; //同理其他方向 } 11 // 4.通过变量值，设置bird的位置，及类名 12 bird.style.left = left + ‘px‘; 13 bird.style.top = top + ‘px‘; 14 bird.className = className;}
1 document.onkeydown = function(e){ 2 if(e.ctrlKey && e.which == 66){ 3 alert("打开背包，拿出意大利炮"); 4 } 5 } 6 ?
在一个对象上触发某类事件（如onclick事件），那么事件就会沿着DOM树向这个对象的父级传播，从里到外，直至事件到达了最顶层（document/window）
1 例： erzi.onclick = function(e){ 2 console.log("erzi"); 3 e.stopPropagation(); 4 }
* 利用事件冒泡原理，把本来绑定给某个元素的事件委托给它的父级(已经存在页面元素)处理。
(1) 频繁操作dom节点
(2) 过多的事件绑定
(3) 页面请求过多
备注：兼容写法 var target = e.target || e.srcElement
链接跳转
表单提交
右键菜单
文本的选择
标准：event.preventDefault();
兼容：e.preventDefault ? e.preventDefault(): e.returnValue = true;
IE8-：event.returnValue = false;
1 案例：自定义右键菜单 2 window.onload = function(){ 3 // 1.获取菜单,鼠标右键展开时，触发函数：出现菜单，跟随光标位置 4 // 2.取消默认行为 5 // 3.点击空白区域，隐藏菜单 6 // 4.点击菜单里面的li，将文字呈现在txt里面.点击菜单里面的span，将li的文本呈现在txt里面 7 var contextMenu = document.getElementsByClassName("contextMenu")[0]; 8 var txt = document.getElementsByClassName("txt")[0]; 9 document.oncontextmenu = function(e){ 10 e = e || window.event; 11 e.preventDefault(); 12 contextMenu.style.display = "block"; 13 contextMenu.style.left = e.pageX + ‘px‘; 14 contextMenu.style.top = e.pageY + ‘px‘; 15 } 16 document.onclick = function(e){ 17 e = e || window.event; 18 if(e.button == 0){ 19 contextMenu.style.display = "none"; 20 } 21 } 22 contextMenu.onclick = function(e){ 23 // e.target 触发事件的对象 24 if(e.button == 0){ 25 if(e.target.tagName == "LI"){ 26 txt.value = e.target.innerText; 27 }else if(e.target.tagName == "SPAN"){ 28 txt.value = e.target.innerText; 29 } 30 } 31 } 32 33 }
*监听器
1、标准浏览器：元素.addEventListener(事件名,事件处理函数,是否捕获（默认false，为冒泡）)
例：target.addEventListener("click", fn, false);
2、IE8-：元素.attachEvent(on+事件名,事件处理函数)
例：target.attachEvent("on"+"click",fun);
?
备注：
- 可以绑定多个处理函数在一个对象上, 执行顺序按照绑定的顺序来(标准)
- 不同元素事件执行顺序跟html结构有关
- 相同元素事件执行顺序跟绑定先后有关
- 可以绑定多个函数在一个对象上, 执行顺序按照绑定的反序（ie8-）
* ele.onclick = 函数名;
* ele.onclick = function(){}
* 只能在冒泡阶段执行,只能给同一个元素绑定一个相同事件
1、可以绑定多个处理函数在一个对象上, 执行顺序按照绑定的顺序来(标准)
（1.1）不同元素事件执行顺序跟html结构有关
（1.2）相同元素事件执行顺序跟绑定先后有关
2、可以绑定多个函数在一个对象上, 执行顺序按照绑定的反序（ie8-）
* type 事件类型
* fn 函数
* isCapture 是否捕获，若为true为捕获阶段，默认为false冒泡阶段
* 允许给同一个元素添加多个相同事件
封装：绑定事件，兼容浏览器
1 function bind(ele,type,fn,isCapture){ 2 // 优先使用事件监听器 3 if(ele.addEventListerner){ 4 // 标准浏览器 5 ele.addEventListerner(type,fn,isCapture); 6 }else if(ele.attachEvent){ 7 // IE8- 8 ele.attachEvent(‘on‘ + type,fn); 9 }else{ 10 // DOM节点绑定方式 11 ele[‘on‘ + type] = fn 12 } 13 }
1 例：ele.onclick = null
移除事件的函数与添加事件的函数必须是同一个，才可以移除，否则不能移除事件
传入的参数fn要跟添加时一样，否则不能移除事件
1 原理：鼠标按下且移动鼠标时，改变当前元素的top，left值 2 //给目标元素添加onmousedown事件 3 //- 拖拽的前提是目标元素设置css定位 4 //- 记录按下鼠标位置与元素左上角的偏移量offsetX，offsetY 5 box.onmousedown = function(e){ 6 var ox = e.offsetX; 7 var oy = e.offsetY; 8 //当onmousedown发生以后，此刻给document添加onmousemove事件 9 // - 意味着此刻鼠标在网页的移动都将改变目标元素的位置 10 // - 目标元素的left = 鼠标的pageX – ox 11 // - 目标元素的top = 鼠标的pageY– oy 12 document.onmousemove = function(e){ 13 box.style.left = e.pageX - ox + ‘px‘; 14 box.style.top = e.pageY - oy + ‘px‘; 15 } 16 } 17 //给目标元素或者document（效果有差异）添加onmouseup事件，清空document的onmousemove事件 18 document.onmouseup = function(){ 19 document.onmousemove = null; 20 } 21
原文：https://www.cnblogs.com/wulongke/p/10493263.html