浏览器下的event对象

在javascript中，我们要常常用到event对象来处理一些事件，但是IE和Firefox下event对象的属性是不同的。

1.keyCode||which||charCode

      IE下支持keyCode，不支持which，charCode。
      Firefox下支持keyCode，除功能键外，其他键值始终为0，Firefox下支持which和charCode属性
      要获取兼容IE和Firefox的键值，有如下方法：
      在函数调用时传递event

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
浏览器下的event对象

<html xmlns="http://www.w3.org/1999/xhtml">
浏览器下的event对象

<head>

<title>Demo</title>
浏览器下的event对象

在函数调用时不传递event

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
浏览器下的event对象

<html xmlns="http://www.w3.org/1999/xhtml">
浏览器下的event对象

<head>

<title>Demo</title>
浏览器下的event对象

<input value="查看示例" type="button"><p><br></p>
<h3>2.event.srcElement||event.target</h3>
     在IE下，event对象有srcElement属性，没有target属性。在火狐下，event对象有target属性，没有srcElement属性<br>
解决办法很简单：<br>
     <br><div class="likecs_code">
<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象"><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象"></span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html </span><span style="color: rgba(255, 0, 0, 1)">xmlns</span><span style="color: rgba(0, 0, 255, 1)">="http://www.w3.org/1999/xhtml"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象"></span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象">    </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">Demo</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"><br><img>></span>
</div>
<textarea name="textBox2" style="width: 0; height: 0" cols="20" rows="2" xmlns="http://www.w3.org/1999/xhtml" type="text/css" .focus color: red function test_event var evt="event.srcElement" event.target evt.classname="focus"><input value="查看示例" type="button"><br><br><h3>3.event.x,event.y||event.pageX,event.pageY</h3>
      IE下event对象有event.x,event.y属性，而Firefox下没有。Firefox下有event.pageX,event.PageY属性，而IE下没有。解决办法：<br>
      var mx = event.x?event.x:event.pageX;<br><br><h3>4.attachEvent()||addEventListener()</h3>
IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。<br><strong>attachEvent("eventType",fun)</strong><br>
eventType是指事件类型,fun是指调用事件的函数<br><strong>addEventListener("eventType",fun,flag)</strong><br>
addEventListener方法的前两个参数和attachEvent方法一样，flag参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。<br><br><div class="likecs_code">
<img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象"><span style="color: rgba(0, 0, 255, 1)"><!</span><span style="color: rgba(255, 0, 255, 1)">DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象"></span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">html </span><span style="color: rgba(255, 0, 0, 1)">xmlns</span><span style="color: rgba(0, 0, 255, 1)">="http://www.w3.org/1999/xhtml"</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象"></span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"><br><img src="/default/index/img?u=L2RlZmF1bHQvaW5kZXgvaW1nP3U9YUhSMGNITTZMeTkzZDNjdVkyNWliRzluY3k1amIyMHZTVzFoWjJWekwwOTFkR3hwYm1sdVowbHVaR2xqWVhSdmNuTXZUbTl1WlM1bmFXWT0=" alt="浏览器下的event对象" align="top" title="浏览器下的event对象">    </span><span style="color: rgba(0, 0, 255, 1)"><</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)">Demo</span><span style="color: rgba(0, 0, 255, 1)"></</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">></span><span style="color: rgba(0, 0, 0, 1)"><br><img>></span>
</div>
<textarea style="width: 0; height: 0" name="textBox3" cols="0" rows="0" xmlns="http://www.w3.org/1999/xhtml" type="text/javascript" function test var str="为了兼容IE和Firefox，就要多写代码！" alert test_event obj='document.getElementById("btn");' if obj.attachevent else obj.addeventlistener false window.onload="test_event;" value="测试按钮"><input value="查看示例" type="button"><br><br>      我所知道的常用的event属性或方法就是上面那4条。上面的东西虽然不复杂，但是我会经常遗忘，jQuery则帮我们很好的解决了这些问题，我们通过jQuery无需再去判断浏览器是否支持某某属性，某某方法。<br>      首先看看jQuery对象有哪些属性和方法<br>      <br><p><strong>下面是jQuery事件对象可以在扩浏览器支持的属性:</strong></p>       <table border="1" cellpadding="2" cellspacing="1" width="780"><tbody>
<tr>
<td width="233" valign="top"><strong>属性名称</strong></td>        <td width="233" valign="top"><strong>描述</strong></td>        <td width="308" valign="top"><strong>举例</strong></td>     </tr>
<tr>
<td width="233" valign="top">         <h5>type </h5>       </td>        <td width="233" valign="top">事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click.</td>        <td width="308" valign="top">         <pre>$("a").click(function(event) {<br>  alert(event.type);<br>});</pre>       </td>     </tr>
<tr>
<td width="233" valign="top">         <h5>target </h5>       </td>        <td width="233" valign="top">获取事件触发者DOM对象</td>        <td width="308" valign="top">         <pre>$("a[href=http://google.com]").click(function(event) {<br>  alert(event.target.href);<br>});</pre>       </td>     </tr>
<tr>
<td width="233" valign="top">         <h5>data </h5>       </td>        <td width="233" valign="top">事件调用时传入额外参数.</td>        <td width="308" valign="top">         <pre>$("a").each(function(i) {<br>  $(this).bind('click', {index:i}, function(e){<br>     alert('my index is ' + e.data.index);<br>  });<br>});</pre>       </td>     </tr>
<tr>
<td width="233" valign="top">         <h5>relatedTarget</h5>       </td>        <td width="233" valign="top">对于鼠标事件, 标示触发事件时离开或者进入的DOM元素</td>        <td width="308" valign="top">         <pre>$("a").mouseout(function(event) {<br>  alert(event.relatedTarget);<br>});</pre>       </td>     </tr>
<tr>
<td width="233" valign="top">         <h5>currentTarget</h5>       </td>        <td width="233" valign="top">冒泡前的当前触发事件的DOM对象, 等同于this.</td>        <td width="308" valign="top">         <pre>$("p").click(function(event) {<br>  alert( event.currentTarget.nodeName );<br>});</pre>          <br>结果:P</td>     </tr>
<tr>
<td width="233" valign="top">         <h5>pageX/Y </h5>       </td>        <td width="233" valign="top">鼠标事件中, 事件相对于页面原点的水平/垂直坐标.</td>        <td width="308" valign="top">         <pre>$("a").click(function(event) {<br>  alert("Current mouse position: " + event.pageX + ", " + event.pageY );<br>});</pre>       </td>     </tr>
<tr>
<td width="233" valign="top">         <h5>result</h5>       </td>        <td width="233" valign="top">上一个事件处理函数返回的值</td>        <td width="308" valign="top">         <pre>$("p").click(function(event) {<br>  return "hey"<br>});<br>$("p").click(function(event) {<br>  alert( event.result );<br>});</pre>          <br>结果:"hey"</td>     </tr>
<tr>
<td width="233" valign="top">         <h5>timeStamp</h5>       </td>        <td width="233" valign="top">事件发生时的时间戳.</td>        <td width="308" valign="top">         <pre>var last;<br>$("p").click(function(event) {<br>   if( last )<br>      alert( "time since last event " + event.timeStamp - last );<br>   last = event.timeStamp;<br>});</pre>
</td>
</tr>
</tbody></table>
<br><table border="1" cellpadding="2" cellspacing="1" width="776"><tbody>
<tr>
<td width="266" valign="top"><strong>名称</strong></td>        <td width="207" valign="top"><strong>说明</strong></td>        <td width="297" valign="top"><strong>举例</strong></td>     </tr>
<tr>
<td width="266" valign="top">         <h5>preventDefault() </h5>       </td>        <td width="207" valign="top">取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换.</td>        <td width="297" valign="top">         <pre>$("a").click(function(event){<br>  event.preventDefault();<br>  // do something<br>});</pre>       </td>     </tr>
<tr>
<td width="266" valign="top">         <h5>isDefaultPrevented() </h5>       </td>        <td width="207" valign="top">是否调用过          <h5>preventDefault() </h5> 方法</td>        <td width="297" valign="top">         <pre>$("a").click(function(event){<br>  alert( event.isDefaultPrevented() );<br>  event.preventDefault();<br>  alert( event.isDefaultPrevented() );<br>});</pre>       </td>     </tr>
<tr>
<td width="266" valign="top">         <h5>stopPropagation() </h5>       </td>        <td width="207" valign="top">取消事件冒泡</td>        <td width="297" valign="top">         <pre>$("p").click(function(event){<br>  event.stopPropagation();<br>  // do something<br>});</pre>       </td>     </tr>
<tr>
<td width="266" valign="top">         <h5>isPropagationStopped() </h5>       </td>        <td width="207" valign="top">是否调用过          <h5>stopPropagation() </h5> 方法</td>        <td width="297" valign="top">         <pre>$("p").click(function(event){<br>  alert( event.isPropagationStopped() );<br>  event.stopPropagation();<br>  alert( event.isPropagationStopped() );<br>});</pre>       </td>     </tr>
<tr>
<td width="266" valign="top">         <h5>stopImmediatePropagation() </h5>       </td>        <td width="207" valign="top">取消执行其他的事件处理函数并取消事件冒泡.          <br><br>如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.</td>        <td width="297" valign="top">         <pre>$("p").click(function(event){<br>  event.stopImmediatePropagation();<br>});<br>$("p").click(function(event){<br>  // This function won't be executed<br>});</pre>       </td>     </tr>
<tr>
<td width="266" valign="top">         <h5>isImmediatePropagationStopped() </h5>       </td>        <td width="207" valign="top">是否调用过          <h5>stopImmediatePropagation() </h5> 方法</td>        <td width="297" valign="top">         <pre>$("p").click(function(event){<br>  alert( event.isImmediatePropagationStopped() );<br>  event.stopImmediatePropagation();<br>  alert( event.isImmediatePropagationStopped() );<br>});</pre>       </td>     </tr>
</tbody></table>
<p>   <br>这些函数中  stopPropagation()  是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.</p>