给元素注册事件（事件绑定）
事件源.on事件类型 = 事件处理程序
事件监听
事件目标.addEventListener(事件类型,事件处理程序,是否捕获);
btn.addEventListener(‘click‘, function () { ???box.style.width = ‘500px‘;});事件监听移除元素事件程序
事件目标.removeEventListener(事件类型,事件处理程序名称);
btn.removeEventListener(‘click‘,fn2);
事件流
事件冒泡
现象：从目标阶段向document传递
事件对象
公共属性
事件对象.type
?作用：获取当前的事件名
document.onclick = function (e) { ???// 查看当前的事件类型 ???console.log(_e.type); ?// click}事件对象.target
作用：获取事件目标里最先触发的元素
事件对象.preventDefalt()
作用：阻止事件默认行为的执行
var link = document.getElementById(‘link‘); ???link.onclick = function (e) { ???????alert(‘执行了‘); ???????// 阻止默认行为 ???????e.preventDefault(); // 可以用return false 代替 ???};事件对象.stopPropagation()
作用：停止冒泡
鼠标事件对象的属性
事件对象.clientX / 事件对象.clientY
作用：鼠标在浏览器可视区域中的坐标
???document.onclick = function (e) { ?????// 获取鼠标在浏览器可视区域中的坐标 ?????alert(‘x:‘ + e.clientX + ‘,y:‘ + e.clientY); ???}事件对象.offsetX / 事件对象.offsetY
?作用：获取鼠标在指定的元素的区域中的坐标
事件对象.pageX / 事件对象.pageY
作用：获取鼠标在整个文档区域中的坐标
键盘事件对象的属性
.ctrlKey
.shiftKey
.altKey
.keyCode
事件委托（事件代理）
?????// 获取div元素 ???var divNode = document.getElementById(‘box‘); ???divNode.onclick = function(e){ ?????// 获取最先触发的元素节点 ?????var node = e.target; ?????// 节点对象.tagName ?获取节点对象对应的标签名 返回的是大写node.tagName.toLowerCase() ?????if(node.tagName.toLowerCase()==‘p‘){ ???????alert(node.innerHTML); ?????} ???}JS 事件
原文地址：https://www.cnblogs.com/houfee/p/10315325.html