事件 XMind 2021-04-27- 2025-06-09 XMind > JS-JavaScript 事件 on+... 绑定事件 1.内联模式 2.外联模式/脚本模式(最多) 元素节点 . on+事件类型= 匿名函数 事件类型 一.鼠标事件(可以绑定在任意元素节点上 ) click 单击 dblclick 双击 mouseover 鼠标移入 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件 mouseout 鼠标移出 同理mouseover mouseenter 鼠标移入 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。 mouseleave 鼠标移出 同理mouseenter mousemove 鼠标移动( 会不停触发) mousedown 鼠标按下 mouseup 鼠标抬起 二.键盘事件 keydown 键盘按下(如果不松手,会一直触发) keyup 键盘抬起 keypress 键盘按下(只支持字符键(不包括小键盘) 持 续触发) 三.HTMl事件 1.window事件 load 当页面加载完成后触发 unload 当页面解构的时候出发(刷新页面,关闭当前 页) IE浏览器兼容 scroll 页面滚动 resize 窗口大小发生变化时触发 2.表单事件 blur 失去焦点 focus 获取焦点 select 当在输入框内选中文本时触发 input 当在输入框输入时触发 包括删除 change 当对输入框的文本进行修改并且数去焦点时 触发 submit 点击submit按钮时触发 reset 点击reset 按钮时触发 必须添加在form表单内 事件对象 button 的属性 e.button 0 左键 1 按下鼠标中键 2 按下鼠标右键 获取当前鼠标位置 ( 获取时原点不同) clientX clientY 原点位置 :可视窗口的左上角为原点 pageX pageY 整个页面的左上角包含滚动出去的 距离 screenX screenY 电脑屏幕的左上角 offsetX offsetY 相对于点击元素的边框内测来计 算 四个修改键 shiftKey 如果按下就为true,否则为false ctrlKey altKey metaKey ( window键 mac的command键 ) 键码:只在keydown下支持 注: 不管是大小写字母,返回值都为大写字母的ASCII 码值 keyCode 只在keydown下生效 回车13 左上右下37 38 39 40 不区分大小写(字母按大写),返回值为ASCII码值 兼容写法 : var which = e.whiich || e.keyCode var which=e.keyCode||e.which 字符码: 只在keypress下支持 注: 区分大小写,按下时返回这个键的ASCII码值 charCode 字符码 返回区分大小写的ASCII码值 兼容写法: var which = e.which || e.charCode; var which=e.keyCode||e.which target 注: 这个事件是由谁而起的 IE8 不兼容window.event.srcElement; 目标对象/触发对象/ 事件对象的属性 var e=ev ||window.event ( 兼容写法 ) 事件流 时间冒泡: 由里向外逐级触发. ( 默认 ) 事件捕获 : 由外向里逐级触发 阻止事件冒泡: 浏览器兼容问题事 件对象的属性和方法: function stopBubble(ev){ if(ev. cancelBubble){ ev.cancelBubble= true; } else{ ev.stopPropagation(); } } 鼠标位置 e.pageX()相对于这个html页面左上角带滚动条 e.clientX()相对与可视窗口左上角 e.offsetX()相对与触发事件左上角 e.screenX()相对于屏幕左上角 事件方法 阻止右键菜单 鼠标点击onclick事件优先度小于右键菜单使用 onmousedown 方法 document.oncontentmenu=function(){return false } if(e.button == 2) 可以另写自己的右键菜单 阻止超链接默认行为 简单方法 a.onclick=function(){ return flase } 利用返回会false不跳转 return confirm ( ' 你确定 要离开吗 ' ) 官方方法 e.preventDefault(); 兼容问题 (调用函数跨浏览器兼容) function preDef(ev) { if (ev.preventDefault) { ev.preventDefault(); } else { ev.returnValue = false; } } 拖拽实现 node.mousedown var X=e.clientX-node.offsetLeft; var Y=e.clientY-node.offsetTop; document.mousemove node.style.left=e.clientX-X+'px ' node.style.top=e.clientY-Y+'px' document.onmouseup document.mousemove=null 书写代码结构 clientX clientY 窗口的左上角为原点 node.offsetLeft node.offsetTop 没有position时 为到窗口左上角的距离 事件委托 给需要事件的节点的父节点或者祖先节点添加,给需 要事件的节点添加判断以进行操作 父节点.onclick var e.ev||window.event; var target=e.target||window.event; if(target.tagName==='需要事件节点的标签名的大 写'){ 需要执行的操作 } 或者通过.tolowCase()转化为小写 事件监听绑定 addEventListener(on+事件类型,函数,布 尔) 事件监听器/事件侦听器 布尔 false 事件冒泡 由内向外触发 true 事件捕获 由外向内触发 attachEvent(事件,函数) IE78使用两个参数 removeEventListenter(on+事件类型,函数) 解除事 件绑定 普通事件绑定,重复绑定函数时之前的函数会被覆盖 组合键 var which=e.which||e.keyCode DAY12 事件函数都为同一个 基本键码 组合实现更多 本文作者：Mayyuji本文链接：https://mayyuji.github.io/2021/04/27/Eventxmind/版权声明：本博客所有文章除特别声明外，均默认采用 许可协议。