JS中用户交互的常见事件处理
月城之上
8年前
<p>用户交互是基于用户事件的，这些事件通常是鼠标事件、触摸事件以及键盘事件。</p> <h2>一. 监听器与事件处理程序</h2> <p>添加事件监听可以使用 <strong>addEventListener()</strong> ：</p> <pre> <code class="language-javascript">element.addEventListener(type, handler [, userCapture])</code></pre> <p>移除事件监听可以使用 <strong>removeEventListener()</strong> ：</p> <pre> <code class="language-javascript">element.removeEventListener(type, handler [, userCapture])</code></pre> <p>addEventListener()兼容IE9+浏览器和其他主流的现代浏览器，不兼容IE8及其以下版本。在IE8及其以下版本浏览器应使用attachEvent()来进行事件绑定。具体可查看： <a href="/misc/goto?guid=4959677038019374352" rel="nofollow,noindex">JavaScript事件处理兼容性总结</a></p> <h3>1.1 event事件类型</h3> <p>event事件类型具体可参考： <a href="/misc/goto?guid=4959677038105173177" rel="nofollow,noindex">http://www.w3school.com.cn/tags/html_ref_eventattributes.asp</a></p> <h3>1.2 event事件属性和方法</h3> <table> <thead> <tr> <th>属性</th> <th>描述</th> <th>IE</th> <th>非IE</th> <th>W3C</th> </tr> </thead> <tbody> <tr> <td>altKey</td> <td>返回当事件被触发时，”ALT” 是否被按下。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>button</td> <td>返回当事件被触发时，哪个鼠标按钮被点击。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>clientX</td> <td>返回当事件被触发时，鼠标指针的水平坐标。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>clientY</td> <td>返回当事件被触发时，鼠标指针的垂直坐标。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>ctrlKey</td> <td>返回当事件被触发时，”CTRL” 键是否被按下。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>metaKey</td> <td>返回当事件被触发时，”meta” 键是否被按下。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>relatedTarget</td> <td>返回与事件的目标节点相关的节点。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>screenX</td> <td>返回当某个事件被触发时，鼠标指针的水平坐标。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>screenY</td> <td>返回当某个事件被触发时，鼠标指针的垂直坐标。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>shiftKey</td> <td>返回当事件被触发时，”SHIFT” 键是否被按下。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>bubbles</td> <td>返回布尔值，指示事件是否是起泡事件类型。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>cancelable</td> <td>返回布尔值，指示事件是否可拥可取消的默认动作。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>currentTarget</td> <td>返回其事件监听器触发该事件的元素。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>eventPhase</td> <td>返回事件传播的当前阶段。</td> <td> </td> <td> </td> <td>Yes</td> </tr> <tr> <td>target</td> <td>返回触发此事件的元素（事件的目标节点）。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>timeStamp</td> <td>返回事件生成的日期和时间。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>type</td> <td>返回当前 Event 对象表示的事件的名称。</td> <td>Yes</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>which</td> <td>键盘码。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>charCode</td> <td>键盘码。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table> <table> <thead> <tr> <th>方法</th> <th>描述</th> <th>IE</th> <th>非IE</th> <th>W3C</th> </tr> </thead> <tbody> <tr> <td>initEvent()</td> <td>初始化新创建的 Event 对象的属性。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>preventDefault()</td> <td>通知浏览器不要执行与事件关联的默认动作。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> <tr> <td>stopPropagation()</td> <td>不再派发事件。</td> <td>No</td> <td>Yes</td> <td>Yes</td> </tr> </tbody> </table> <p>除了上面W3C规范所规定的属性和方法外，IE浏览器还支持以下属性。</p> <p>event对象的属性（IE特有）：</p> <table> <thead> <tr> <th>属性</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td>cancelBubble</td> <td>如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。</td> </tr> <tr> <td>fromElement</td> <td>对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。</td> </tr> <tr> <td>keyCode</td> <td>对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。</td> </tr> <tr> <td>offsetX, offsetY</td> <td>发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。</td> </tr> <tr> <td>returnValue</td> <td>如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。</td> </tr> <tr> <td>srcElement</td> <td>对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。</td> </tr> <tr> <td>toElement</td> <td>对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。</td> </tr> <tr> <td>x, y</td> <td>事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。</td> </tr> </tbody> </table> <h2>二. 鼠标事件</h2> <p>鼠标事件常用的有：</p> <ul> <li><strong>mousedown</strong></li> <li><strong>mouseup</strong></li> <li><strong>click</strong></li> <li><strong>dbclick</strong></li> <li><strong>mousewheel</strong></li> <li><strong>mousemove</strong></li> <li><strong>mouseover</strong></li> <li><strong>mouseout</strong></li> <li><strong>mouseenter</strong></li> </ul> <h2>三. 鼠标位置</h2> <p>每个鼠标事件都有两个属性用于确定鼠标的当前位置：pageX与pageY。结合这两个属性及目标元素相对于document的偏移量，可以确定鼠标在canvas元素上的相对坐标。遗憾的是，并不是所有的浏览器都支持pageX和pageY属性，可能要用到clientX和clientY。</p> <p>获取鼠标位置的兼容性写法如下：</p> <pre> <code class="language-javascript">// 获取鼠标的当前位置 function getMouse(event) { var event = event || window.event; var mouse = {}; var x, y; if(event.pageX || event.pageY) { x = event.pageX; y = event.pageY; } else if(event.clientX || event.clientY) { var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; x = event.clientX + scrollLeft; y = event.clientY + scrollTop; } mouse.x = x; mouse.y = y; return mouse; }</code></pre> <p>使用方法如下：</p> <pre> <code class="language-javascript"><canvas id="canvas" width="300" height="300" style="background: #ccc;"></canvas> var canvas = document.getElementById("canvas"); canvas.addEventListener("mousemove", function(e) { var x = getMouse(e).x, y = getMouse(e).y; console.log("x: " + x + "; y: " + y); }); // 获取鼠标的当前位置 function getMouse(event) { var event = event || window.event; var mouse = {}; var x, y; if(event.pageX || event.pageY) { x = event.pageX; y = event.pageY; } else if(event.clientX || event.clientY) { var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; x = event.clientX + scrollLeft; y = event.clientY + scrollTop; } mouse.x = x; mouse.y = y; return mouse; }</code></pre> <h2>四. 触摸事件</h2> <p>触摸事件与鼠标事件相似，一个触摸点可以被想象成一个鼠标光标。不过鼠标光标会一直停留在屏幕上，而受制却会从设备上按下、移动以及释放同一时间可能发生多点触摸，某个触摸点会保存在触摸事件的一个数组中，不过一般都建议使用第一个触摸点。</p> <p>常用到的触摸事件有：</p> <ul> <li><strong>touchstart</strong></li> <li><strong>touchend</strong></li> <li><strong>touchmove</strong></li> </ul> <h2>五. 触摸位置</h2> <p>其中， <strong>touchstart</strong> 和 <strong>touchmove</strong> 事件的第一个触摸点位置为：</p> <pre> <code class="language-javascript">event.touches[0]</code></pre> <p>touchend事件的第一个触摸点位置为：</p> <pre> <code class="language-javascript">event.changedTouches[0]</code></pre> <pre> <code class="language-javascript"><canvas id="canvas" width="300" height="300" style="background: #ccc;"></canvas> var canvas = document.getElementById("canvas"); canvas.addEventListener("touchstart", function(e) { var touches = e.touches ? e.touches[0] : e; touchstartPosition = { x : touches.pageX, y : touches.pageY }; }); canvas.addEventListener("touchmove", function(e) { var touches = e.touches ? e.touches[0] : e; touchmovePosition = { x : touches.pageX, y : touches.pageY }; console.log(touchmovePosition); }); canvas.addEventListener("touchend", function(e) { var changedTouches = e.changedTouches ? e.changedTouches[0] : e; touchsEndPosition = { x : changedTouches.pageX, y : changedTouches.pageY }; console.log(touchsEndPosition); });</code></pre> <h2>六. 键盘事件</h2> <p>键盘事件仅有两个：</p> <ul> <li><strong>keydown</strong></li> <li><strong>keyup</strong></li> </ul> <h2>七. 键盘码</h2> <p>在一个键盘事件中，可以通过事件对象的keyCode属性获知哪个键按下。</p> <p>具体的键盘码可参考： <a href="/misc/goto?guid=4959677038186950671" rel="nofollow,noindex">https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode</a></p> <h2>八. 拖拽事件</h2> <ul> <li><strong>dragstart</strong></li> <li><strong>drag</strong></li> <li><strong>dragenter</strong></li> <li><strong>dragover</strong></li> <li><strong>dragleave</strong></li> <li><strong>drop</strong></li> <li><strong>dragend</strong></li> </ul> <p>拖拽事件的具体用法可参考我的另一篇笔记： <a href="/misc/goto?guid=4959677038259253249" rel="nofollow,noindex">http://www.dengzhr.com/frontend/html/927</a></p> <p> </p> <p>来自：http://www.dengzhr.com/js/945</p> <p> </p>