<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>