说说 JavaScript 事件流之事件类型（包含 DOM2、DOM3 级事件）

DOM3 级事件规定了这些事件：

事件	说明
焦点	当元素获得或失去焦点时触发。
鼠标	用户通过鼠标在页面上进行操作时触发。
滚轮	使用鼠标滚轮（或类似设备）时触发。
文本	在文档中输入文本时触发。
键盘	用户通过键盘在页面上进行操作时触发。
合成	使用 IME（Input Mehtod Editor）输入字符时触发。
变动	底层 DOM 结构发生变化时触发。
名称变动	元素或属性名改变时触发。（已废弃）

1 UI 事件

DOM 规范为了保证向后兼容，已经保留了 UI 事件。有这些 UI 事件：

事件名	说明
DOMActivate	元素已经被用户的相关操作（鼠标或键盘）激活，DOM3 已废弃。
load	在页面完全加载时在 window 上触发，当所有框架都加载完毕时在框架集上触发，当图像加载完毕时在上触发，当嵌入内容加载完毕时在
unload	在页面完全卸载时在 window 上触发，当所有框架都卸载完毕时在框架集上触发，当嵌入内容卸载完毕时在
abort	用户停止了下载，这是如果嵌入的内容还未加载完，就在
error	发生 JavaScript 错误时在 window 上触发，当无法加载图像时在上触发，当无法加载嵌入内容时在
select	当用户选择或 </code> 中的一个或多个字符时触发。</td> </tr> <tr> <td align="center">resize</td> <td>当窗口或框架的大小发生变化时在 window 或框架上触发。</td> </tr> <tr> <td align="center">scroll</td> <td>当用户滚动带有滚动条的元素中的内容时，在该元素上触发。</td> </tr> </tbody> </table> <hr> <p>多数事件都与 window 对象或者表单控件有关。</p> <p>除了 DOMActivate 外，其他事件在 DOM2 级事件中都归为 HTML 事件，这样确定浏览器是否支持 DOM2 级事件规定的 HTML 事件：</p> <pre class="prettyprint"><code class=" hljs avrasm">var isSupported = document<span class="hljs-preprocessor">.implementation</span><span class="hljs-preprocessor">.hasFeature</span>(<span class="hljs-string">"HTMLEvents"</span>,<span class="hljs-string">"2.0"</span>)<span class="hljs-comment">;</span></code></pre> <p>这样确定浏览器是否支持 DOM3 级事件规定的 UI 事件：</p> <pre class="prettyprint"><code class=" hljs avrasm">var isSupported = document<span class="hljs-preprocessor">.implementation</span><span class="hljs-preprocessor">.hasFeature</span>(<span class="hljs-string">"UIEvent"</span>,<span class="hljs-string">"3.0"</span>)<span class="hljs-comment">;</span></code></pre> <h2 id="11-load-事件">1.1 load 事件</h2> <p>当页面完全加载时就会触发 window 上的 load 事件。有两种定义 onload 事件的方法。第一种是通过 JavaScript 来指定的：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(<span class="hljs-string">"Loaded!"</span>); }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p><em>EventUtil.js 请参见这里</em> </p> <p>第二种是在 <code><body></code> 元素中添加一个 onload 属性：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">body</span> <span class="hljs-attribute">onload</span>=<span class="hljs-value">"console.log('Loaded!')"</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span></code></pre> <p>建议尽量使用 JavaScript 的方式来指定！</p> <hr> <p><strong>注意：</strong> DOM2 级事件规范要求在 document 上触发 load 事件。但所有的浏览器为了确保向后兼容，都在 window 上实现了这一事件！</p> <hr> <p>也可以为图像指定 onload 事件：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://avatar.csdn.net/D/4/8/1_deniro_li.jpg"</span> <span class="hljs-attribute">onload</span>=<span class="hljs-value">"console.log('Image loaded.')"</span>></span></code></pre> <p>上面的例子也可以用 JavaScript 来实现：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">img</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myImage"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://avatar.csdn.net/D/4/8/1_deniro_li.jpg"</span> ></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> image = document.getElementById(<span class="hljs-string">"myImage"</span>); EventUtil.addHandler(image, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); console.log(EventUtil.getTarget(event).src); }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>创建新的 <code><img></code> 元素时，可以为其指定一个事件，但必须在指定 src 属性之前先指定事件，这样才能在图像加载完毕时给出提示：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> <span class="hljs-keyword">var</span> image = document.createElement(<span class="hljs-string">"img"</span>); EventUtil.addHandler(image, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span><span class="hljs-comment">//先指定事件</span> event = EventUtil.getEvent(event); console.log(EventUtil.getTarget(event).src); }); document.body.appendChild(image); image.src = <span class="hljs-string">"http://avatar.csdn.net/D/4/8/1_deniro_li.jpg"</span>;<span class="hljs-comment">//再指定 src</span> }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>注意，新的图像元素只要设置了 src 属性就会开始下载！</p> <p>通过的功能也可以使用 DOM0 级的 Image 对象来实现。在 DOM 出现之前，开发人员经常使用 Image 对象为客户端预加载图像，只不过 Image 对象无法添加到 DOM 树中：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> <span class="hljs-keyword">var</span> image = <span class="hljs-keyword">new</span> Image(); EventUtil.addHandler(image, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span><span class="hljs-comment">//先指定事件</span> console.log(<span class="hljs-string">"Image loaded!"</span>); }); image.src = <span class="hljs-string">"http://avatar.csdn.net/D/4/8/1_deniro_li.jpg"</span>;<span class="hljs-comment">//再指定 src</span> }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <hr> <p><strong>注意：</strong> 在不属于 DOM 文档的图像（未添加到文档的 <code><img></code> 元素和 Image 对象）上触发 load 事件时，IE8 及之前的版本是不会生成 event 对象的！IE9 修复了这个问题。</p> <hr> <p>还有一些元素以非标准的方式支持 load 事件。IE9+、Firefox、Opera、Chrome 和 Safari 3+ 及更高版本中，<code><script></code> 元素也会触发 load 事件，这样做可以方便开发人员确定动态加载的 JavaScript 文件是否已经加载完毕。只有设置了 <code><script></code> 元素的 src 属性并将该元素添加到文档后，才会开始下载 JavaScript 文件：</p> <pre class="prettyprint"><code class=" hljs javascript">EventUtil.addHandler(window, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> <span class="hljs-keyword">var</span> script = document.createElement(<span class="hljs-string">"script"</span>); EventUtil.addHandler(script, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(<span class="hljs-string">"Loaded"</span>); }); script.src = <span class="hljs-string">"http://c.csdnimg.cn/pubfooter/js/tracking.js"</span>; document.body.appendChild(script);</code></pre> <p>IE、Chrome 和 Opera 还支持在 <code><link></code> 元素上的 load 事件，以便开发人员确定样式表是否已经加载完毕：</p> <pre class="prettyprint"><code class=" hljs lasso"><span class="hljs-comment">//动态添加样式表</span> <span class="hljs-built_in">var</span> <span class="hljs-keyword">link</span> <span class="hljs-subst">=</span> document<span class="hljs-built_in">.</span>createElement(<span class="hljs-string">"link"</span>); <span class="hljs-keyword">link</span><span class="hljs-built_in">.</span><span class="hljs-keyword">type</span> <span class="hljs-subst">=</span> <span class="hljs-string">"text/css"</span>; <span class="hljs-keyword">link</span><span class="hljs-built_in">.</span>rel <span class="hljs-subst">=</span> <span class="hljs-string">"stylesheet"</span>; EventUtil<span class="hljs-built_in">.</span>addHandler(<span class="hljs-keyword">link</span>, <span class="hljs-string">"load"</span>, function (event) { console<span class="hljs-built_in">.</span><span class="hljs-keyword">log</span>(<span class="hljs-string">"css loaded"</span>); }); <span class="hljs-keyword">link</span><span class="hljs-built_in">.</span>href <span class="hljs-subst">=</span> <span class="hljs-string">"http://c.csdnimg.cn/public/common/toolbar/css/index.css"</span> document<span class="hljs-built_in">.</span>getElementsByTagName(<span class="hljs-string">"head"</span>)<span class="hljs-preprocessor">[</span><span class="hljs-number">0</span><span class="hljs-preprocessor">]</span><span class="hljs-markup">.appendChild(link);</span></code></pre> <p>只有指定了 href 属性并且添加到文档中的 <code><link></code> 元素才会开始下载样式表。</p> <h2 id="12-unload-事件">1.2 unload 事件</h2> <p>当文档被完全卸载后就会触发。用户从一个页面切换到另一个页面，也会发生 unload 事件。一般利用这个事件来清除引用，避免内存泄漏。也有两种指定 unload 事件的方法，第一种是使用 JavaScript 来指定：</p> <pre class="prettyprint"><code class=" hljs javascript">EventUtil.addHandler(window, <span class="hljs-string">"unload"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event)</span>{</span> console.log(<span class="hljs-string">"Unloaded"</span>); });</code></pre> <p>此时的 event 对象在兼容 DOM 的浏览器中只有 target 属性（值为 document）。IE8 及之前的版本则为这个对象提供了 srcElement 属性。</p> <p>第二种方式是，为 <code><body></code> 元素添加 onunload 属性：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">body</span> <span class="hljs-attribute">onunload</span>=<span class="hljs-value">"alert('Unloaded!')"</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span></code></pre> <hr> <p><strong>注意：</strong> 根据 DOM2 级事件的规范，应该在 <code><body></code> 元素上触发 unload 事件。但所有的浏览器为了确保向后兼容，都在 window 上实现了 unload 事件。</p> <hr> <h2 id="13-resize-事件">1.3 resize 事件</h2> <p>当浏览器窗口的宽高发生变化时，就会触发 resize 事件。它会在 window 上触发，可以通过 JavaScript 或 <code><body></code> 元素中的 onresize 属性来指定，还是推荐使用 JavaScript 来指定：</p> <pre class="prettyprint"><code class=" hljs javascript">EventUtil.addHandler(window, <span class="hljs-string">"resize"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(event)</span>{</span> console.log(<span class="hljs-string">"Resized"</span>); }); </code></pre> <p>此时的 event 对象在兼容 DOM 的浏览器中只有 target 属性（值为 document）。IE8 及之前的版本没有提供任何属性！</p> <p>何时会触发 resize 事件，不同的浏览器有不同的机制。IE、Safari、Chrome 和 Opera 会在浏览器窗口变化了 1 个像素时，触发 resize 事件，然后随着变化不断重复触发。Firefox 只会在用户停止调整窗口大小时，才会触发 resize 事件。这个事件可能会被频繁地执行，因此不要在 resize 事件中加入具有大计算量的代码，这会导致浏览器的反应明显变慢。</p> <hr> <p><strong>注意：</strong> 最大化或最小化浏览器窗口，都会触发 resize 事件。</p> <hr> <h2 id="14-scroll-事件">1.4 scroll 事件</h2> <p>虽然 scroll 事件是在 window 对象上触发的，但它实际表示的是页面中相应的元素发生了变化。在混杂模式下，可以通过 <code><body></code> 元素的 scrollLeft 和 scrollTop 来监控这一变化；在标准模式下，除了 Safari 之外的所有浏览器都会通过 <code><html></code> 元素来监控这一变化（Safari 中仍是基于 <code><body></code> 元素来监控的）：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"scroll"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> <span class="hljs-keyword">if</span> (document.compatMode == <span class="hljs-string">"CSS1Compat"</span>) { console.log(document.documentElement.scrollTop); } <span class="hljs-keyword">else</span> { console.log(document.body.scrollTop); } }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>与 resize 事件类似， scroll 事件也会在文档滚动期间被重复地触发，所以要保持 scroll 事件足够简单！</p> <h1 id="2-焦点事件">2 焦点事件</h1> <p>焦点事件会在页面获得或者失去焦点时触发。利用焦点事件并与 document.hasFocus() 方法以及 document.activeElement 属性相配合，可以获知用户在页面上的行踪，有这些焦点事件：</p> <table> <thead> <tr> <th align="center">焦点事件</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">blur</td> <td>元素失去焦点时触发。它不会冒泡，所有浏览器都支持。</td> </tr> <tr> <td align="center">DOMFocusIn</td> <td>元素获得焦点时触发。它与 HTML 事件的 focus 等价，但它还支持冒泡。只得到 Opera 支持，遭到 DOM3 级事件废弃。</td> </tr> <tr> <td align="center">DOMFocusOut</td> <td>元素失去焦点时触发。它与 HTML 事件的 blur 等价。只得到 Opera 支持，遭到 DOM3 级事件废弃。</td> </tr> <tr> <td align="center">focus</td> <td>元素获得焦点时触发。它不会冒泡，所有浏览器都支持。</td> </tr> <tr> <td align="center">focusin</td> <td>元素获得焦点时触发。它与 HTML 事件的 focus 等价，但它还支持冒泡。IE5.5+、Safari 5.1+、Opera 11.5+ 和 Chrome 都支持。</td> </tr> <tr> <td align="center">focusout</td> <td>元素失去焦点时触发。它与 HTML 事件的 blur 等价。IE5.5+、Safari 5.1+、Opera 11.5+ 和 Chrome 都支持。</td> </tr> </tbody> </table> <hr> <p>focus 和 blur 最大的问题是不冒泡，所以 IE 的 focusin 和 focusout 才被 DOM3 级事件采纳为标准。</p> <p>当焦点从页面中的一个元素移动到另一个元素时，会依次触发这些事件： <br> 1. focusout 在失去焦点的元素上触发。 <br> 2. focusin 在获得焦点的元素上触发。 <br> 3. blur 在失去焦点的元素上触发。 <br> 4. DOMFocusOut 在失去焦点的元素上触发。 <br> 5. focus 在获得焦点的元素上触发。 <br> 6. DOMFocusIn 在获得焦点的元素上触发。</p> <p>使用以下代码可以确定浏览器是否支持这些事件：</p> <pre class="prettyprint"><code class=" hljs avrasm">var isSupported = document<span class="hljs-preprocessor">.implementation</span><span class="hljs-preprocessor">.hasFeature</span>(<span class="hljs-string">"FocusEvent"</span>,<span class="hljs-string">"3.0"</span>)<span class="hljs-comment">;</span></code></pre> <h1 id="3-鼠标和滚轮事件">3 鼠标和滚轮事件</h1> <p>DOM3 级事件定义了 9 个鼠标事件：</p> <table> <thead> <tr> <th align="center">鼠标事件</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">click</td> <td>单击主鼠标按钮（一般是最左边的按钮）或者按下回车键时触发。</td> </tr> <tr> <td align="center">dblclick</td> <td>双击主鼠标按钮时触发。</td> </tr> <tr> <td align="center">mousedown</td> <td>按下任意鼠标按钮时触发。不能通过键盘触发这一事件。</td> </tr> <tr> <td align="center">mouseenter</td> <td>鼠标的光标从元素外部首次移动到元素范围内时触发。它不冒泡，而且光标移动到后代元素上也不会再触发。IE、Firefox 9+ 和 Opera 支持。</td> </tr> <tr> <td align="center">mouseleave</td> <td>位于元素内的鼠标光标移动到元素范围外时触发。。IE、Firefox 9+ 和 Opera 支持。</td> </tr> <tr> <td align="center">mousemove</td> <td>鼠标指针在元素内移动时重复地触发。不能通过键盘触发这一事件。</td> </tr> <tr> <td align="center">mouseout</td> <td>鼠标指针位于一个元素内，然后将其移动另一个元素时触发。这里说的另一个元素可能位于前一个元素外部，也可能是这个元素的子元素。不能通过键盘触发这一事件。</td> </tr> <tr> <td align="center">mouseover</td> <td>鼠标指针位于元素外部，让后将其首次移入另一个元素边界之内时触发。不能通过键盘触发这一事件。</td> </tr> <tr> <td align="center">mouseup</td> <td>释放鼠标按钮时触发。不能通过键盘触发这一事件。</td> </tr> </tbody> </table> <hr> <p>页面上的所有元素都支持鼠标事件。除了 mousedown 和 mouseup 之外，其他所有鼠标事件都会冒泡，它也可以被取消。</p> <p>只有在同一个元素上相继触发 mousedown 和 mouseup 事件，才会触发 click 事件；如果 mousedown 和 mouseup 事件有一个被取消，那么就不会触发 click 事件。只有触发两次 click 事件，才会触发一次 dblclick 事件。它们的触发顺序是这样的： <br> 1. mousedown <br> 2. mouseup <br> 3. click <br> 4. mousedown <br> 5. mouseup <br> 6. click <br> 7. dblclick</p> <p>click 和 dblclick 事件会依赖于其他先行事件。</p> <p>IE8 及之前的版本有一个 bug，就是在双击事件中，会跳过第二个 mousedown 和 click 事件。IE9 修复了这一 bug。</p> <p>使用以下代码可以确定浏览器是否支持这些 DOM2 事件（除 dbclick、mouseenter 和 mouseleave 之外）：</p> <pre class="prettyprint"><code class=" hljs avrasm">var isSupported = document<span class="hljs-preprocessor">.implementation</span><span class="hljs-preprocessor">.hasFeature</span>(<span class="hljs-string">"MouseEvents"</span>,<span class="hljs-string">"2.0"</span>)<span class="hljs-comment">;</span></code></pre> <p>使用以下代码可以确定浏览器是否支持这些 DOM3 事件：</p> <pre class="prettyprint"><code class=" hljs avrasm">var isSupported = document<span class="hljs-preprocessor">.implementation</span><span class="hljs-preprocessor">.hasFeature</span>(<span class="hljs-string">"MouseEvent"</span>,<span class="hljs-string">"3.0"</span>)<span class="hljs-comment">;</span></code></pre> <p>注意：这里是 “MouseEvent”！</p> <p>还有一个 mousewheel 事件，它会跟踪鼠标的滚轮。</p> <h2 id="31-客户区坐标位置">3.1 客户区坐标位置</h2> <p>鼠标事件都是在浏览器视口的特定位置上发生的。这些位置信息保存在事件对象的 clientX 和 clientY 中。所有浏览器都支持这两个属性，它们表示事件发生时鼠标指针在视口中的水平和垂直坐标：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myDiv"</span>></span>点我<span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> div = document.getElementById(<span class="hljs-string">"myDiv"</span>); EventUtil.addHandler(div, <span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); console.log(<span class="hljs-string">"Client coordinates:"</span> + event.clientX + <span class="hljs-string">","</span> + event.clientY); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>因为这些值不表示鼠标在页面上的位置，所以它们并不包含页面的滚动距离。</p> <h2 id="32-页面坐标位置">3.2 页面坐标位置</h2> <p>通过事件对象的 pageX 和 pageY 属性，可以获得事件是在页面中什么位置发生的，即鼠标光标在页面中的位置，因为坐标是从页面本身的左边和顶边计算得出的：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myDiv"</span>></span>点我<span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> div = document.getElementById(<span class="hljs-string">"myDiv"</span>); EventUtil.addHandler(div, <span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); console.log(<span class="hljs-string">"Page coordinates:"</span> + event.pageX + <span class="hljs-string">","</span> + event.pageY); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>页面没有滚动的情况下，pageX 等于 clientX，pageY 等于 clientY。</p> <p>IE8 及早期版本不支持事件对象上的页面坐标，但可以通过客户区坐标和滚动信息计算出来。这需要用到 document.body（混杂）或 document.documentElement（标准）中的 scrollLeft 和 scrollTop 属性：</p> <pre class="prettyprint"><code class=" hljs avrasm"><script type=<span class="hljs-string">"text/javascript"</span>> var div = document<span class="hljs-preprocessor">.getElementById</span>(<span class="hljs-string">"myDiv"</span>)<span class="hljs-comment">;</span> EventUtil<span class="hljs-preprocessor">.addHandler</span>(div, <span class="hljs-string">"click"</span>, function (event) { event = EventUtil<span class="hljs-preprocessor">.getEvent</span>(event)<span class="hljs-comment">;</span> var pageX = event<span class="hljs-preprocessor">.pageX</span><span class="hljs-comment">;</span> var pageY = event<span class="hljs-preprocessor">.pageY</span><span class="hljs-comment">;</span> if (pageX === undefined) { pageX = event<span class="hljs-preprocessor">.clientX</span> + (document<span class="hljs-preprocessor">.body</span><span class="hljs-preprocessor">.scrollLeft</span> \|\| document<span class="hljs-preprocessor">.documentElement</span><span class="hljs-preprocessor">.scrollLeft</span>)<span class="hljs-comment">;</span> } if (pageY === undefined) { pageY = event<span class="hljs-preprocessor">.clientY</span> + (document<span class="hljs-preprocessor">.body</span><span class="hljs-preprocessor">.scrollTop</span> \|\| document<span class="hljs-preprocessor">.documentElement</span><span class="hljs-preprocessor">.scrollTop</span>)<span class="hljs-comment">;</span> } console<span class="hljs-preprocessor">.log</span>(<span class="hljs-string">"Page coordinates:"</span> + pageX + <span class="hljs-string">","</span> + pageY)<span class="hljs-comment">;</span> }) </script></code></pre> <h2 id="33-屏幕坐标位置">3.3 屏幕坐标位置</h2> <p>这是鼠标事件发生时，相对于整个电脑屏幕的位置：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> div = document.getElementById(<span class="hljs-string">"myDiv"</span>); EventUtil.addHandler(div, <span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); console.log(<span class="hljs-string">"Screen coordinates:"</span> + event.screenX + <span class="hljs-string">","</span> + event.screenY); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <h2 id="34-修改键">3.4 修改键</h2> <p>配合这些修改键——Shift、Ctrl、Alt 和 Meta（Windows 中是 Windows 键，苹果中是 Cmd 键），经常被用来修改鼠标事件的行为。DOM 规定了 shiftKey、ctrlKey、altKey、metaKey，它们都是布尔值，如果相应的键被按下，它的值变为 true。当某个鼠标事件发生时，通过检测这些属性就能确定用户是否同时按下了其中的键：</p> <pre class="prettyprint"><code class=" hljs perl"><script type=<span class="hljs-string">"text/javascript"</span>> var div = document.getElementById(<span class="hljs-string">"myDiv"</span>); EventUtil.addHandler(div, <span class="hljs-string">"click"</span>, function (event) { event = EventUtil.getEvent(event); var <span class="hljs-keyword">keys</span> = new Array(); <span class="hljs-keyword">if</span> (event.shiftKey) { <span class="hljs-keyword">keys</span>.<span class="hljs-keyword">push</span>(<span class="hljs-string">"shift"</span>); } <span class="hljs-keyword">if</span> (event.ctrlKey) { <span class="hljs-keyword">keys</span>.<span class="hljs-keyword">push</span>(<span class="hljs-string">"ctrl"</span>); } <span class="hljs-keyword">if</span> (event.altKey) { <span class="hljs-keyword">keys</span>.<span class="hljs-keyword">push</span>(<span class="hljs-string">"alt"</span>); } <span class="hljs-keyword">if</span> (event.metaKey) { <span class="hljs-keyword">keys</span>.<span class="hljs-keyword">push</span>(<span class="hljs-string">"meta"</span>); } console.<span class="hljs-keyword">log</span>(<span class="hljs-string">"Keys:"</span> + <span class="hljs-keyword">keys</span>.<span class="hljs-keyword">join</span>(<span class="hljs-string">","</span>)); }) <<span class="hljs-regexp">/script></span></code></pre> <hr> <p><strong>注意：</strong> IE9、Firefox、Safari、Chrome 和 Opera 都支持这 4 个键。IE8 及之前的版本不支持 metaKey 属性。</p> <hr> <h2 id="35-相关元素">3.5 相关元素</h2> <p>发生 mouseover 和 mouseout 事件时，会涉及到其他元素。mouseover 事件中，主目标是获得光标的元素，相关元素是失去光标的元素；mouseout 事件，主目标是失去光标的元素，相关元素是获得光标的元素。</p> <p>在 EventUtil.js 中添加：</p> <pre class="prettyprint"><code class=" hljs java"><span class="hljs-javadoc">/** * 获取相关元素 <span class="hljs-javadoctag"> @param</span> event <span class="hljs-javadoctag"> @returns</span> {} /</span> getRelatedTarget: function (event) { <span class="hljs-keyword">if</span> (event.relatedTarget) { <span class="hljs-keyword">return</span> event.relatedTarget; } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (event.toElement) { <span class="hljs-keyword">return</span> event.toElement; } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (event.fromElement) { <span class="hljs-keyword">return</span> event.fromElement; } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> <span class="hljs-keyword">null</span>; } } </code></pre> <p>这样使用：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myDiv"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"background-color: red;height:100px;width: 100px;"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> div = document.getElementById(<span class="hljs-string">"myDiv"</span>); EventUtil.addHandler(div, <span class="hljs-string">"mouseout"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> target = EventUtil.getTarget(event); <span class="hljs-keyword">var</span> relatedTarget = EventUtil.getRelatedTarget(event); console.log(<span class="hljs-string">"Moused out of "</span> + target.tagName + <span class="hljs-string">" to "</span> + relatedTarget.tagName); }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <h2 id="36-鼠标按钮">3.6 鼠标按钮</h2> <p>DOM 的 button 属性有这些值：</p> <table> <thead> <tr> <th align="center">属性值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">0</td> <td>主鼠标按钮（左键）</td> </tr> <tr> <td align="center">1</td> <td>中间鼠标按钮（滚轮按钮）</td> </tr> <tr> <td align="center">2</td> <td>次鼠标按钮（右键）</td> </tr> </tbody> </table> <hr> <p>IE8 及之前的版本也提供了 button 属性，但有 8 种值！所以 DOM 模型定义的更简明实用。我们把 IE 的选项转换为 DOM 模型的选项，就可以实现跨浏览器获取 button 属性值：</p> <pre class="prettyprint"><code class=" hljs java"><span class="hljs-javadoc">/** * 获取鼠标点击事件类型 * 0：主鼠标按钮；1：中间鼠标按钮；2：次鼠标按钮 <span class="hljs-javadoctag"> @param</span> event <span class="hljs-javadoctag"> @returns</span> {} /</span> getButton: function (event) { <span class="hljs-keyword">if</span> (document.implementation.hasFeature(<span class="hljs-string">"MouseEvents"</span>, <span class="hljs-string">"2.0"</span>)) {<span class="hljs-comment">//支持 DOM 版的鼠标事件</span> <span class="hljs-keyword">return</span> event.button; } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">switch</span> (event.button) {<span class="hljs-comment">//IE8 及早期版本</span> <span class="hljs-keyword">case</span> <span class="hljs-number">0</span>: <span class="hljs-keyword">case</span> <span class="hljs-number">1</span>: <span class="hljs-keyword">case</span> <span class="hljs-number">3</span>: <span class="hljs-keyword">case</span> <span class="hljs-number">5</span>: <span class="hljs-keyword">case</span> <span class="hljs-number">7</span>: <span class="hljs-keyword">return</span> <span class="hljs-number">0</span>; <span class="hljs-keyword">case</span> <span class="hljs-number">2</span>: <span class="hljs-keyword">case</span> <span class="hljs-number">6</span>: <span class="hljs-keyword">return</span> <span class="hljs-number">2</span>; <span class="hljs-keyword">case</span> <span class="hljs-number">4</span>: <span class="hljs-keyword">return</span> <span class="hljs-number">1</span>; } } }</code></pre> <p>这样使用：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> div = document.getElementById(<span class="hljs-string">"myDiv"</span>); EventUtil.addHandler(div, <span class="hljs-string">"mousedown"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); console.log(EventUtil.getButton(event)); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <hr> <p><strong>注意：</strong> 使用 onmouseup 事件处理程序时，button 的值表示释放的是哪个鼠标按钮。在 Opera 中，只有按下或释放了主鼠标按钮，才会触发 mouseup 或 mousedown 事件。</p> <hr> <h2 id="37-更多的事件信息">3.7 更多的事件信息</h2> <p>DOM2 级事件规范中，event 对象还有一个 detail 属性。对于鼠标事件来说，detail 表示给定位置上发生了多少次单击。在同一个像素上相继发生一次 mousedown 和一次 mouseup 事件总算一次单击。它从 1 开始计数，每次单击后会递增。如果鼠标在 mousedown 和 mouseup 之间移动了位置，detail 会被重置为 0。</p> <p>IE 也通过其他属性为鼠标事件提供了更多信息。但只有 IE 支持它们，所以没什么用处，这里也就不列举咯 O(∩_∩)O~</p> <h2 id="38-鼠标滚轮事件">3.8 鼠标滚轮事件</h2> <p>当用户通过鼠标滚轮与页面交互（在垂直方向上滚动页面时），会触发 mousewheel 事件。它可以在任何元素上触发，最终会冒泡到 document（IE8）或 window （IE9、Opera、Chrome 及 Safari）对象。mousewheel 事件还包含 wheelDelta 属性，当向前滚动鼠标滚轮时，wheelDelta 是 120 的倍数；当向后滚动鼠标滚轮时，wheelDelta 是 -120 的倍数：</p> <p></p> <p>将 mousewheel 的事件处理程序指定给页面中的任何元素，或者 document 对象，就可处理鼠标滚轮的交互操作。多数情况下，只需要知道鼠标滚轮的滚动方向。在 Opera 9.5 之前的版本，wheelDelta 的正负值是颠倒的：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"ClientUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(document, <span class="hljs-string">"mousewheel"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> delta = (client.engine.opera && client.engine.opera < <span class="hljs-number">9.5</span> ? -event.wheelDelta : event.wheelDelta);<span class="hljs-comment">//opera 9.5 之前的版本，wheelDelta 正负号是颠倒的</span> console.log(delta); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>ClientUtil.js 请参见这里。</p> <hr> <p><strong>注意：</strong> HTML 5 也加入了 mousewheel 事件。</p> <hr> <p>Firefox 支持 DOMMouseScroll 事件，会在鼠标滚轮滚动时触发。滚轮的信息保存在 detail 属性中，当向前滚动时，它是 -3 的倍数，当向后滚动时，它是 3 的倍数：</p> <p></p> <p>DOMMouseScroll 可以添加到页面中的任何元素，它会冒泡到 window 对象。</p> <p>因此，跨浏览器的方案是：</p> <pre class="prettyprint"><code class=" hljs java"><span class="hljs-javadoc">/** * 获取鼠标滚动的滚动值 <span class="hljs-javadoctag"> @param</span> event <span class="hljs-javadoctag"> @returns</span> {number} /</span> getWheelDelta: function (event) { <span class="hljs-keyword">if</span> (event.wheelDelta) { <span class="hljs-keyword">return</span> (client.engine.opera && client.engine.opera < <span class="hljs-number">9.5</span> ? -event.wheelDelta : event.wheelDelta); } <span class="hljs-keyword">else</span> {<span class="hljs-comment">//Firefox</span> <span class="hljs-keyword">return</span> -event.detail <span class="hljs-number">40</span>; } }</code></pre> <p>这样使用：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> (<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">handleMouseWheel</span><span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> delta = EventUtil.getWheelDelta(event); console.log(delta); } EventUtil.addHandler(document, <span class="hljs-string">"mousewheel"</span>, handleMouseWheel); EventUtil.addHandler(document, <span class="hljs-string">"DOMMouseScroll"</span>, handleMouseWheel); })(); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>我们把代码放在一个私有的作用域中，这样就不会让新定义的函数干扰到全局作用域。这里把 handleMouseWheel() 作为两个事件的处理程序，如果指定的事件不存在，那么代码会静默地失败。</p> <h1 id="4-键盘与文本事件">4 键盘与文本事件</h1> <p>对键盘事件的支持，遵循的是 DOM0 级规范。有这些事件：</p> <table> <thead> <tr> <th align="center">键盘事件</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">keydown</td> <td>当按下键盘任意键时触发，如果按住不放，会重复触发。</td> </tr> <tr> <td align="center">keypress</td> <td>按下键盘上的字符键时触发，如果按住不放，会重复触发。按下 Esc 键也会触发。Safari 3.1 之前的版本，按下非字符键也会触发。</td> </tr> <tr> <td align="center">keyup</td> <td>当用户释放键盘上的键时触发。</td> </tr> </tbody> </table> <hr> <p>所有元素都支持，但一般在文本框中常用到这些事件。</p> <p>textInput 是文本事件，会在文本插入文本框之前触发，用于在将文本展示给用户时拦截文本。</p> <p>用户按了下键盘上的字符键时，会先触发 keydown 事件，然后是 keypress 事件，最后是 keyup 事件。keydown 和 keypress 都是在文本框发生变化之前被触发，keyup 是在文本框发生变化之后触发。如果按下一个键不放，会重复触发 keydown 和 keypress 事件。</p> <p>如果按下的是非字符键，会先触发 keydown 事件，然后是 keyup 事件。。如果按下一个键不放，会重复触发 keydown 事件。</p> <hr> <p><strong>注意：</strong> 键盘事件与鼠标事件一样，也支持修改键（shiftKey、ctrlKey、altKey 和 metaKey）。IE 不支持 metaKey。</p> <hr> <h2 id="41-键码">4.1 键码</h2> <p>发生 keydown 和 keyup 事件时，event 对象的 keyCode 属性会有一个键码，它与键盘上的一个特定值相对应。对于数字字母键，keyCode 属性会包含一个代码，它与键盘上的一个特定键相对应。DOM 和 IE 的 event 对象都支持 keyCode 属性：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.getElementById(<span class="hljs-string">"myText"</span>); EventUtil.addHandler(textbox, <span class="hljs-string">"keyup"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); console.log(event.keyCode); }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>下面是所有非字符键的键码：</p> <table> <thead> <tr> <th align="center">键</th> <th align="center">键码</th> <th align="center">键</th> <th align="center">键码</th> </tr> </thead> <tbody> <tr> <td align="center">Backspace</td> <td align="center">8</td> <td align="center">Tab</td> <td align="center">9</td> </tr> <tr> <td align="center">回车</td> <td align="center">13</td> <td align="center">Shift</td> <td align="center">16</td> </tr> <tr> <td align="center">Ctrl</td> <td align="center">17</td> <td align="center">Alt</td> <td align="center">18</td> </tr> <tr> <td align="center">pause/break</td> <td align="center">19</td> <td align="center">Caps Lock</td> <td align="center">20</td> </tr> <tr> <td align="center">Esc</td> <td align="center">27</td> <td align="center">Page Up</td> <td align="center">33</td> </tr> <tr> <td align="center">Page Down</td> <td align="center">34</td> <td align="center">End</td> <td align="center">35</td> </tr> <tr> <td align="center">Home</td> <td align="center">36</td> <td align="center">左箭头</td> <td align="center">37</td> </tr> <tr> <td align="center">上箭头</td> <td align="center">38</td> <td align="center">右箭头</td> <td align="center">39</td> </tr> <tr> <td align="center">下箭头</td> <td align="center">40</td> <td align="center">Insert</td> <td align="center">45</td> </tr> <tr> <td align="center">Del</td> <td align="center">46</td> <td align="center">左 windows</td> <td align="center">91</td> </tr> <tr> <td align="center">右 windows</td> <td align="center">92</td> <td align="center">上下文菜单键</td> <td align="center">93</td> </tr> <tr> <td align="center">0（数字小键盘）</td> <td align="center">96</td> <td align="center">1（数字小键盘）</td> <td align="center">97</td> </tr> <tr> <td align="center">2（数字小键盘）</td> <td align="center">98</td> <td align="center">3（数字小键盘）</td> <td align="center">99</td> </tr> <tr> <td align="center">4（数字小键盘）</td> <td align="center">100</td> <td align="center">5（数字小键盘）</td> <td align="center">101</td> </tr> <tr> <td align="center">6（数字小键盘）</td> <td align="center">102</td> <td align="center">7（数字小键盘）</td> <td align="center">103</td> </tr> <tr> <td align="center">8（数字小键盘）</td> <td align="center">104</td> <td align="center">9（数字小键盘）</td> <td align="center">105</td> </tr> <tr> <td align="center">+（数字小键盘）</td> <td align="center">107</td> <td align="center">-（数字小键盘、大键盘）</td> <td align="center">109</td> </tr> <tr> <td align="center">.（数字小键盘）</td> <td align="center">110</td> <td align="center">/（数字小键盘）</td> <td align="center">111</td> </tr> <tr> <td align="center">F1</td> <td align="center">112</td> <td align="center">F2</td> <td align="center">113</td> </tr> <tr> <td align="center">F3</td> <td align="center">114</td> <td align="center">F4</td> <td align="center">115</td> </tr> <tr> <td align="center">F5</td> <td align="center">116</td> <td align="center">F6</td> <td align="center">117</td> </tr> <tr> <td align="center">F7</td> <td align="center">118</td> <td align="center">F8</td> <td align="center">119</td> </tr> <tr> <td align="center">F9</td> <td align="center">120</td> <td align="center">F10</td> <td align="center">121</td> </tr> <tr> <td align="center">F11</td> <td align="center">122</td> <td align="center">F12</td> <td align="center">123</td> </tr> <tr> <td align="center">Num Lock</td> <td align="center">144</td> <td align="center">Scroll Lock</td> <td align="center">145</td> </tr> <tr> <td align="center">分号（IE、Safari、Chrome）</td> <td align="center">186</td> <td align="center">分号（Opera、Firefox）</td> <td align="center">59</td> </tr> <tr> <td align="center">小于</td> <td align="center">188</td> <td align="center">大于</td> <td align="center">190</td> </tr> <tr> <td align="center">正斜杠</td> <td align="center">191</td> <td align="center">沉音符（`）</td> <td align="center">192</td> </tr> <tr> <td align="center">等于</td> <td align="center">61</td> <td align="center">左方括号</td> <td align="center">219</td> </tr> <tr> <td align="center">反斜杠</td> <td align="center">220</td> <td align="center">右方括号</td> <td align="center">221</td> </tr> <tr> <td align="center">单引号</td> <td align="center">222</td> <td align="center"></td> <td align="center"></td> </tr> </tbody> </table> <h2 id="42-字符编码">4.2 字符编码</h2> <p>所有的浏览器中，按下能插入或者删除字符的键都会触发 keypress 事件。</p> <p>IE9、Firefox、Chrome 和 Safari 的 event 对象都支持 charCode 属性，会触发 keypress 事件时，charCode 属性才包含值，表示的是按下的键对代表字符的 ASCII 编码。IE8 及之前的版本和 Opera 支持的是类似功能的 charCode。以下的跨浏览器的代码：</p> <pre class="prettyprint"><code class=" hljs java"><span class="hljs-javadoc">/** * 取得键盘按下的字符编码 <span class="hljs-javadoctag"> @param</span> event <span class="hljs-javadoctag"> @returns</span> {} /</span> getCharCode: function (event) { <span class="hljs-keyword">if</span> (typeof event.charCode == <span class="hljs-string">"number"</span>) { <span class="hljs-keyword">return</span> event.charCode; } <span class="hljs-keyword">else</span> { <span class="hljs-keyword">return</span> event.keyCode; } }</code></pre> <p>这样使用：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.getElementById(<span class="hljs-string">"myText"</span>); EventUtil.addHandler(textbox, <span class="hljs-string">"keypress"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> charCode = EventUtil.getCharCode(event); console.log(charCode); console.log(<span class="hljs-built_in">String</span>.fromCharCode(charCode));<span class="hljs-comment">//转为实际字符</span> }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <h2 id="43-dom3-级变化">4.3 DOM3 级变化</h2> <h3 id="431-key-和-char-属性">4.3.1 key 和 char 属性</h3> <p>DOM3 级中的键盘事件包含 key 和 char。</p> <p>key 是字符串。按下某个字符键，值是对应的文本字符；按下非字符键，值是对应的键名。char 在按下字符键时，值与 key 相同；按下非字符键时，值为 null。</p> <p>IE9 支持 key 属性，但不支持 char 属性。Safari 5 和 Chrome 支持 keyIdentifier 属性，它在按下非字符键时，与 key 相同：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.getElementById(<span class="hljs-string">"myText"</span>); EventUtil.addHandler(textbox, <span class="hljs-string">"keypress"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> identifier=event.key\|\|event.keyIdentifier; <span class="hljs-keyword">if</span>(identifier){ console.log(identifier); } }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <hr> <p><strong>注意：</strong> 因为跨浏览器的问题，所以目前暂时不建议使用 key、keyIdentifier 或 char。</p> <hr> <h3 id="432-location-属性">4.3.2 location 属性</h3> <p>它表示在什么位置按下了键：</p> <table> <thead> <tr> <th align="center">值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">0</td> <td>键盘（默认）</td> </tr> <tr> <td align="center">1</td> <td>左侧功能键（比如左 Alt）</td> </tr> <tr> <td align="center">2</td> <td>右侧功能键（比如右 Alt）</td> </tr> <tr> <td align="center">3</td> <td>数字小键盘</td> </tr> <tr> <td align="center">4</td> <td>移动设备键盘（虚拟键盘）</td> </tr> <tr> <td align="center">5</td> <td>手柄</td> </tr> </tbody> </table> <hr> <p>IE9 支持。Safari 和 Chrome 支持 keyLocation 的等价属性，但只有两个值！3 表示数字小键盘，0表示其它情况：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.getElementById(<span class="hljs-string">"myText"</span>); EventUtil.addHandler(textbox, <span class="hljs-string">"keypress"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> loc = event.location \|\| event.keyLocation; <span class="hljs-keyword">if</span> (loc) { console.log(loc); } }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>因为支持这一属性的浏览器不多，所以建议在跨浏览器方案中不要使用！</p> <h3 id="433-getmodifierstate-方法">4.3.3 getModifierState() 方法</h3> <p>它接受一个参数，表示要检测的修改键（Shift、Control、AltGraph 或 Meta 字符串）。如果指定的修改键被按下，这个方法会返回 true：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.getElementById(<span class="hljs-string">"myText"</span>); EventUtil.addHandler(textbox, <span class="hljs-string">"keypress"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">if</span> (event.getModifierState) { console.log(event.getModifierState(<span class="hljs-string">"Shift"</span>));<span class="hljs-comment">//chrome 与 IE10 也支持</span> } }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <h2 id="44-textinput-事件">4.4 textInput 事件</h2> <p>textInput 事件与 keypress 事件的区别：</p> <table> <thead> <tr> <th align="center">.</th> <th>被触发的对象</th> <th>按下的键</th> </tr> </thead> <tbody> <tr> <td align="center">textInput</td> <td>任何可以获得焦点的元素</td> <td>按下能够输入实际字符的键</td> </tr> <tr> <td align="center">keypress</td> <td>只有可编辑区域</td> <td>按下能够输入实际字符的键以及能够影响文本显示的键（比如退格键）</td> </tr> </tbody> </table> <hr> <p>textInput 事件的 event 对象还包含 data 属性，它表示的是用户输入的字符（不是字符编码！），比如按下了 A 键，就是 “a”，如果按住上档键的情况下按下了该键，就是 “A”。</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> <span class="hljs-keyword">var</span> textbox = document.getElementById(<span class="hljs-string">"myText"</span>); EventUtil.addHandler(textbox, <span class="hljs-string">"textInput"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); console.log(event.data); }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>event 对象上还有一个 inputMethod 属性，表示把文本输入到文本框中方式：</p> <table> <thead> <tr> <th align="center">值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">0</td> <td>无法确定。</td> </tr> <tr> <td align="center">1</td> <td>键盘输入。</td> </tr> <tr> <td align="center">2</td> <td>粘贴进来的。</td> </tr> <tr> <td align="center">3</td> <td>拖放进来的。</td> </tr> <tr> <td align="center">4</td> <td>使用 IME 输入。</td> </tr> <tr> <td align="center">5</td> <td>表单中选择某一项输入。</td> </tr> <tr> <td align="center">6</td> <td>通过手写输入。（手写笔）</td> </tr> <tr> <td align="center">7</td> <td>通过语音输入。</td> </tr> <tr> <td align="center">8</td> <td>几种方式组合输入。</td> </tr> <tr> <td align="center">9</td> <td>通过脚本输入。</td> </tr> </tbody> </table> <hr> <p>使用这个属性得到文本输入控件的方式，从而验证文本的有效性。支持 textInput 属性的浏览器有 IE9+、Safari 和 Chrome。。只有 IE 支持 inputMethod 属性。</p> <h1 id="5-变动事件">5 变动事件</h1> <p>DOM2 级定义的变动事件会监听 DOM 中的某一部分发生的变化。有这些事件：</p> <table> <thead> <tr> <th align="center">变动事件</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td align="center">DOMSubtreeModified</td> <td>DOM 结构发生变化时触发。它会在其他事件触发后被触发。</td> </tr> <tr> <td align="center">DOMNodeInserted</td> <td>一个节点作为子节点被插入到另一个节点时触发。</td> </tr> <tr> <td align="center">DOMNodeRemoved</td> <td>父节点中移除子节点时触发。</td> </tr> <tr> <td align="center">DOMNodeInsertedIntoDocument</td> <td>节点被直接插入文档或通过子树间接插入文档之前触发，它会在 DOMNodeInserted 之后触发。</td> </tr> <tr> <td align="center">DOMNodeRemovedFromDocument</td> <td>节点被直接从文档中移除或通过子树间接从文档中移除之前触发，它会在 DOMNodeRemoved 之后触发。</td> </tr> <tr> <td align="center">DOMAttrModified</td> <td>属性被修改后触发。</td> </tr> <tr> <td align="center">DOMCharacterDataModified</td> <td>文本节点的值发生变化时触发。</td> </tr> </tbody> </table> <hr> <p>可以使用下列代码来检测浏览器是否支持变动事件：</p> <pre class="prettyprint"><code class=" hljs avrasm">var isSupported=document<span class="hljs-preprocessor">.implementation</span><span class="hljs-preprocessor">.hasFeature</span>(<span class="hljs-string">"MutationEvents"</span>,<span class="hljs-string">"2.0"</span>)<span class="hljs-comment">;</span></code></pre> <p>下列列出不同浏览器对这些变动事件的支持情况：</p> <table> <thead> <tr> <th align="center">事件</th> <th align="center">Opera 9+</th> <th align="center">Firefox 3+</th> <th align="center">Safari 3+ 与 Chrome</th> <th align="center">IE9+</th> </tr> </thead> <tbody> <tr> <td align="center">DOMSubtreeModified</td> <td align="center">-</td> <td align="center">支持</td> <td align="center">支持</td> <td align="center">支持</td> </tr> <tr> <td align="center">DOMNodeInserted</td> <td align="center">支持</td> <td align="center">支持</td> <td align="center">支持</td> <td align="center">支持</td> </tr> <tr> <td align="center">DOMNodeRemoved</td> <td align="center">支持</td> <td align="center">支持</td> <td align="center">支持</td> <td align="center">支持</td> </tr> </tbody> </table> <h2 id="51-删除节点">5.1 删除节点</h2> <p>使用 removeChild() 或 replaceChild() 从 DOM 中删除节点时，会触发 DOMNodeRemoved 事件。它的 event.target 是被删除的节点，event.relatedNode 是目标节点父节点的引用。这个事件被触发时，节点尚未从其父节点被删除，所以它的 parentNode 仍然指向父节点。这个事件会冒泡，所以可以在 DOM 的任何层次处理它。</p> <p>如果被移除的节点包含子节点，那么它所有的子节点以及这个节点会相继触发 DOMNodeRemovedFromDocument 事件。但它不会冒泡，所以只有直接指定给其中一个子节点的事件处理程序才会调用这个事件。这个事件的 event.target 是相应的子节点或者那个被移除的节点。</p> <p>最后触发 DOMSubtreeModified 事件。这个事件的 event.target 是被移除节点的父节点。</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myList"</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> <span class="hljs-keyword">var</span> list = document.getElementById(<span class="hljs-string">"myList"</span>); <span class="hljs-keyword">var</span> item = document.createElement(<span class="hljs-string">"li"</span>); item.appendChild(document.createTextNode(<span class="hljs-string">"Item 4"</span>)); EventUtil.addHandler(document, <span class="hljs-string">"DOMSubtreeModified"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(event.type); console.log(event.target); }); EventUtil.addHandler(document, <span class="hljs-string">"DOMNodeInserted"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(event.type); console.log(event.target); console.log(event.relatedNode); }); EventUtil.addHandler(item, <span class="hljs-string">"DOMNodeInsertedIntoDocument"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(event.type); console.log(event.target); }); list.appendChild(item); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span></code></pre> <h2 id="52-插入节点">5.2 插入节点</h2> <p>使用 appendChild()、replaceChild() 或 insertBefore() 向 DOM 插入节点时，会先触发 DOMNodeInserted 事件。这个事件的 event.target 是被插入的节点，event.relatedNode 是父节点的引用。这个事件触发时，节点已被插入到父节点中。它是冒泡的，所有可以在 DOM 的各个层次处理它。</p> <p>接着会在新插入的节点上触发 DOMNodeInsertedIntoDocument 事件。它不会冒泡，所以必须在插入节点之前为它添加事件处理程序。这个事件的 event.target 是被插入的节点。</p> <p>最后一个触发 DOMSubtreeModified 事件。</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">body</span>></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myList"</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> <span class="hljs-keyword">var</span> list = document.getElementById(<span class="hljs-string">"myList"</span>); EventUtil.addHandler(document, <span class="hljs-string">"DOMSubtreeModified"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(event.type); console.log(event.target); }); EventUtil.addHandler(document, <span class="hljs-string">"DOMNodeRemoved"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(event.type); console.log(event.target); console.log(event.relatedNode); }); EventUtil.addHandler(list.firstChild, <span class="hljs-string">"DOMNodeRemovedFromDocument"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(event.type); console.log(event.target); }); list.parentNode.removeChild(list); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"></<span class="hljs-title">body</span>></span></code></pre> <h1 id="6-html5-事件">6 HTML5 事件</h1> <p>HTML5 详细地列出了浏览器应该支持的所有事件，我们只说说那些得到浏览器支持的事件。</p> <h2 id="61-contextmenu-事件">6.1 contextmenu 事件</h2> <p>它用于表示何时显示上下文菜单（即鼠标右击菜单），以便开发人员可以取消默认的上下文菜单而提供自定义的菜单。</p> <p>因为这个事件是冒泡的，所以可以在 document 指定一个事件处理程序。它的 event.target 是发生用户操作的元素。所有的浏览器都可以取消这个事件：兼容的 DOM 的浏览器中，是使用 event.preventDefault()；IE 中，是将 event。returnValue 的值设为 false。因为 contextmenu 事件是鼠标事件，所以它的事件对象包含于光标位置有关的属性。通常使用 contextmenu 事件来显示自定义的上下文菜单，使用 onclick 事件来隐藏这个菜单：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myDiv"</span>></span>Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu. <span class="hljs-tag"></<span class="hljs-title">div</span>></span> <span class="hljs-tag"><<span class="hljs-title">ul</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"myMenu"</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">"position: absolute;visibility: hidden;background-color: silver"</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://www.163.com"</span>></span>163 site<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"><<span class="hljs-title">li</span>></span><span class="hljs-tag"><<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"http://www.baidu.com"</span>></span>baidu site<span class="hljs-tag"></<span class="hljs-title">a</span>></span><span class="hljs-tag"></<span class="hljs-title">li</span>></span> <span class="hljs-tag"></<span class="hljs-title">ul</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> <span class="hljs-keyword">var</span> div = document.getElementById(<span class="hljs-string">"myDiv"</span>); EventUtil.addHandler(div, <span class="hljs-string">"contextmenu"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); EventUtil.preventDefault(event); <span class="hljs-keyword">var</span> menu = document.getElementById(<span class="hljs-string">"myMenu"</span>); menu.style.left = event.clientX + <span class="hljs-string">"px"</span>; menu.style.top = event.clientY + <span class="hljs-string">"px"</span>; menu.style.visibility = <span class="hljs-string">"visible"</span>; }); EventUtil.addHandler(document, <span class="hljs-string">"click"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> document.getElementById(<span class="hljs-string">"myMenu"</span>).style.visibility = <span class="hljs-string">"hidden"</span>; }) }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>效果如下：</p> <p></p> <p>在这个例子中为菜单加一些 CSS 样式，就可以得到很好的效果！</p> <p>这些浏览器支持 contextmenu 事件：IE、Firefox、Safari、Chrome 和 Opera 11+。</p> <h2 id="62-beforeunload-事件">6.2 beforeunload 事件</h2> <p>这个事件是为了让开发人员可以在页面卸载时，可以出现提示，让用户选择是否真的要关闭这个页面，还是继续留下来：</p> <p></p> <p>可以将 event.returnValue 的值设置为要显示给用户的字符串：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"EventUtil.js"</span>></span><span class="javascript"></span><span class="hljs-tag"></<span class="hljs-title">script</span>></span> <span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"beforeunload"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> message = <span class="hljs-string">"I'm really going to miss you if you go."</span>; event.returnValue = message; <span class="hljs-keyword">return</span> message; }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>IE、Firefox、Safari、Chrome 都支持 beforeunload 事件，但 Opera 11 及之前的版本不支持！</p> <h2 id="63-domcontentloaded-事件">6.3 DOMContentLoaded 事件</h2> <p>这个事件会在形成完整的 DOM 树之后触发，而 load 事件必须在页面中的所有资源都加载完毕才会触发。　所以利用 DOMContentLoaded 事件，可以让用户尽可能早地与页面进行交互。</p> <p>可以为 document（实际目标）或 window（冒泡过来的）添加相应的事件处理程序：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(document, <span class="hljs-string">"DOMContentLoaded"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(<span class="hljs-string">"Content loaded"</span>); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>这个事件的对象没有听过任何额外的信息！</p> <p>这些浏览器支持 DOMContentLoaded 事件：IE9+、Firefox、Safari 3.1+、Chrome 和 Opera 9+。这个事件始终都会在 load 事件之前触发。</p> <p>对于不支持 DOMContentLoaded 事件的浏览器，建议在页面加载期间设置一个时间为 0 毫秒的超时调用：</p> <pre class="prettyprint"><code class=" hljs javascript">setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span>{</span> <span class="hljs-comment">//添加事件处理程序</span> },<span class="hljs-number">0</span>);</code></pre> <p>这段脚本应该会在页面下载和构建期间被触发。为了确保这个方法有效，必须将它作为页面的第一个超时调用，但无法完全保证它一定早于 load 事件被触发！</p> <h2 id="64-readystatechange-事件">6.4 readystatechange 事件</h2> <p>它会提供与文档或元素的加载状态有关的信息。支持 readystatechange 事件的对象都有一个 readyState 属性，它可能包含这些值：</p> <p>属性值（阶段） \| 说明 <br> uninitialized \| 对象存在但还未初始化。 <br> loading \| 对象正在加载数据。 <br> loaded \| 加载数据完成。 <br> interacdtive \| 可以操作对象。 <br> complete \| 对象已加载完毕。</p> <p>注意，并非所有对象都会经历上述的这些阶段！而且无法保证顺序！所以，有必要同时检测交互和完成阶段：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(document, <span class="hljs-string">"readystatechange"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> <span class="hljs-keyword">if</span> (document.readyState == <span class="hljs-string">"interactive"</span> \|\| document.readyState == <span class="hljs-string">"complete"</span>) { EventUtil.removeHandler(document, <span class="hljs-string">"readystatechange"</span>, <span class="hljs-built_in">arguments</span>.callee); console.log(<span class="hljs-string">"Content loaded"</span>); } }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p><em>因为使用了匿名函数作为事件处理程序，所以使用了 arguments.callee 来引用这个函数。</em></p> <p>IE、Firefox 4+ 和 Opera 支持 readystatechange 事件。</p> <hr> <p><strong>注意：</strong> readystatechange 与 DOMContentLoaded 事件在本上的是不同的。而且，load 事件和 readystatechange 事件都不能保证以相同的顺序触发。</p> <hr> <p><code><script></code> （IE 和 Opera）和 <code><link></code>（仅 IE ）也会触发 readystatechange 事件，它可以确定外部的 JavaScript 和 CSS 文件是否已经加载完成。但这个事件也跟元素触发的 readystatechange 事件一样存在问题，所以也需要同时检测：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"load"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">()</span> {</span> <span class="hljs-keyword">var</span> script = document.createElement(<span class="hljs-string">"script"</span>); EventUtil.addHandler(script, <span class="hljs-string">"readystatechange"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> event = EventUtil.getEvent(event); <span class="hljs-keyword">var</span> target = EventUtil.getTarget(event); <span class="hljs-comment">//防止被执行两次，所以移除这个事件处理程序</span> <span class="hljs-keyword">if</span> (document.readyState == <span class="hljs-string">"loaded"</span> \|\| document.readyState == <span class="hljs-string">"complete"</span>) { EventUtil.removeHandler(target, <span class="hljs-string">"readystatechange"</span>, <span class="hljs-built_in">arguments</span>.callee); console.log(<span class="hljs-string">"Script loaded"</span>); } }); script.src = <span class="hljs-string">"http://static.blog.csdn.net/scripts/jquery.js"</span>; document.body.appendChild(script); }); </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>下面是针对 <code><link></code> 元素加载 CSS 文件的情况：</p> <pre class="prettyprint"><code class=" hljs avrasm"><script type=<span class="hljs-string">"text/javascript"</span>> EventUtil<span class="hljs-preprocessor">.addHandler</span>(window, <span class="hljs-string">"load"</span>, function () { var link = document<span class="hljs-preprocessor">.createElement</span>(<span class="hljs-string">"link"</span>)<span class="hljs-comment">;</span> link<span class="hljs-preprocessor">.type</span> = <span class="hljs-string">"text/css"</span><span class="hljs-comment">;</span> link<span class="hljs-preprocessor">.rel</span> = <span class="hljs-string">"stylesheet"</span><span class="hljs-comment">;</span> EventUtil<span class="hljs-preprocessor">.addHandler</span>(link, <span class="hljs-string">"readystatechange"</span>, function (event) { event = EventUtil<span class="hljs-preprocessor">.getEvent</span>(event)<span class="hljs-comment">;</span> var target = EventUtil<span class="hljs-preprocessor">.getTarget</span>(event)<span class="hljs-comment">;</span> if (document<span class="hljs-preprocessor">.readyState</span> == <span class="hljs-string">"loaded"</span> \|\| document<span class="hljs-preprocessor">.readyState</span> == <span class="hljs-string">"complete"</span>) { EventUtil<span class="hljs-preprocessor">.removeHandler</span>(target, <span class="hljs-string">"readystatechange"</span>, arguments<span class="hljs-preprocessor">.callee</span>)<span class="hljs-comment">;</span> console<span class="hljs-preprocessor">.log</span>(<span class="hljs-string">"CSS loaded"</span>)<span class="hljs-comment">;</span> } })<span class="hljs-comment">;</span> link<span class="hljs-preprocessor">.href</span> = <span class="hljs-string">"http://c.csdnimg.cn/public/common/toolbar/css/index.css"</span><span class="hljs-comment">;</span> document<span class="hljs-preprocessor">.getElementsByTagName</span>(<span class="hljs-string">"head"</span>)[<span class="hljs-number">0</span>]<span class="hljs-preprocessor">.appendChild</span>(link)<span class="hljs-comment">;</span> document<span class="hljs-preprocessor">.body</span><span class="hljs-preprocessor">.appendChild</span>(link)<span class="hljs-comment">;</span> })<span class="hljs-comment">;</span> </script> </code></pre> <p>这里同时检测了 readyState 的两个状态，并在调用过一次事件处理程序之后，就将其移除咯。</p> <h2 id="65-hashchange-事件">6.5 hashchange 事件</h2> <p>它会在 URL（# 后面的所有字符串）的参数列表发生变化时触发。</p> <p>要把这个事件添加给 window 对象。它的 event 对象包含 oldURL 和 newURL，即参数变化前后的完整的 URL：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"haschange"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(<span class="hljs-string">"Old URL: "</span> + event.oldURL + <span class="hljs-string">"\nNew URL:"</span> + event.newURL); console.log(<span class="hljs-string">"Current hash:"</span> + location.hash); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>IE8+、Firefox 3.6+、Safari 5+、Chrome 和 Opera 10.6+ 都支持这个事件，但只有 Firefox 6+、Chrome 和 Opera 支持 oldURL 和 newURL，所以最好使用 location 对象来确定当前的参数列表：</p> <pre class="prettyprint"><code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">script</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/javascript"</span>></span><span class="javascript"> EventUtil.addHandler(window, <span class="hljs-string">"haschange"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-params">(event)</span> {</span> console.log(<span class="hljs-string">"Current hash:"</span> + location.hash); }) </span><span class="hljs-tag"></<span class="hljs-title">script</span>></span></code></pre> <p>可以这样检测浏览器是否支持 hashchange 事件:</p> <pre class="prettyprint"><code class=" hljs coffeescript"><span class="hljs-reserved">var</span> isSupported = (<span class="hljs-string">"onhashchange"</span> <span class="hljs-keyword">in</span> <span class="hljs-built_in">window</span>) && (<span class="hljs-built_in">document</span>.documentMode == <span class="hljs-literal">undefined</span> \|\| <span class="hljs-built_in">document</span>.documentMode > <span class="hljs-number">7</span>); <span class="hljs-built_in">console</span>.log(isSupported);</code></pre> <p><em>因为 IE8 是在 IE7 文档模式下运行的，所以即使功能无效它也会返回 true，所以上面的检测必须针对这一情况进行特殊处理。</em></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1177041795016634368"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(JavaScript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1773495574226599936.htm" title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a> <span class="text-muted">所谓远行Misnearch</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名</div> </li> <li><a href="/article/1773403175781466112.htm" title="Python dict字符串转json对象，小数精度丢失问题" target="_blank">Python dict字符串转json对象，小数精度丢失问题</a> <span class="text-muted">朝如青丝暮成雪</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print</div> </li> <li><a href="/article/1773256158274977792.htm" title="javascript 日期转换为时间戳，时间戳转换为日期的函数" target="_blank">javascript 日期转换为时间戳，时间戳转换为日期的函数</a> <span class="text-muted">cdcdhj</span> <a class="tag" taget="_blank" href="/search/javascript%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0/1.htm">javascript学习日记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-\|\/)\d{2}(-\|\/)\d{2}$/;constregex2=/^\d{4}(-\|\/)\d{2}(-</div> </li> <li><a href="/article/1773198631940194304.htm" title="COMP315 JavaScript Cloud Computing for E Commerce" target="_blank">COMP315 JavaScript Cloud Computing for E Commerce</a> <span class="text-muted">zhuyu0206girl</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform</div> </li> <li><a href="/article/1773191331473063936.htm" title="JSON与AJAX：网页交互的利器" target="_blank">JSON与AJAX：网页交互的利器</a> <span class="text-muted">入冉心</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据</div> </li> <li><a href="/article/1772738346825613312.htm" title="javascript的数据类型及转换" target="_blank">javascript的数据类型及转换</a> <span class="text-muted">田小田txt</span> <div>一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa</div> </li> <li><a href="/article/1772631263593693184.htm" title="javascript实现SM2加密解密" target="_blank">javascript实现SM2加密解密</a> <span class="text-muted">人生在勤，不索何获</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu</div> </li> <li><a href="/article/1772618299398488064.htm" title="Vue：为什么要使用v-cloak" target="_blank">Vue：为什么要使用v-cloak</a> <span class="text-muted">刻刻帝的海角</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu</div> </li> <li><a href="/article/1772594886269272064.htm" title="JavaScript快速入门笔记之二（变量、常量、数据类型）" target="_blank">JavaScript快速入门笔记之二（变量、常量、数据类型）</a> <span class="text-muted">eshineLau</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据</div> </li> <li><a href="/article/1772541266194661376.htm" title="前端埋点解决方案" target="_blank">前端埋点解决方案</a> <span class="text-muted">zhu_zhu_xia</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、前言：基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2)，入口文件接入sdk以及添加配置(func</div> </li> <li><a href="/article/1772500355632922624.htm" title="vue时间组件：dayjs与moment" target="_blank">vue时间组件：dayjs与moment</a> <span class="text-muted">煸橙干儿~~</span> <a class="tag" taget="_blank" href="/search/VUE%E5%AE%9E%E6%88%98/1.htm">VUE实战</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、dayjs使用Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。具体使用可参考：dayjs官网1、本年start=dayjs().startOf('year').format('YYYY-MM-DD')end=dayjs().endOf('year').format('YYYY-MM-DD')console.log(start,end)//['2</div> </li> <li><a href="/article/1772084223755223040.htm" title="APP UI自动化测试思路总结" target="_blank">APP UI自动化测试思路总结</a> <span class="text-muted">程序员老鹰</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>首先想要说明一下，APP自动化测试可能很多公司不用，但也是大部分自动化测试工程师、高级测试工程师岗位招聘信息上要求的，所以为了更好的待遇，我们还是需要花时间去掌握的，毕竟谁也不会跟钱过不去。接下来，一起总结一下APPUI自动化测试的思路吧。一，开发语言选择通常用于自动化测试的编程语言有：Python、Java、Javascript、Ruby、C#、PHP等。一般我们会选择自己熟悉的编程语言来编写自</div> </li> <li><a href="/article/1772022542693892096.htm" title="JS的设计模式（23种）" target="_blank">JS的设计模式（23种）</a> <span class="text-muted">是个车迷</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript设计模式是指在JavaScript编程中普遍应用的一系列经过验证的最佳实践和可重用的解决方案模板，它们用来解决在软件设计中频繁出现的问题，如对象的创建、职责分配、对象间通信以及系统架构等。设计模式并不特指某个具体的代码片段，而是一种描述在特定上下文中如何组织程序结构和对象交互的通用指导原则。JavaScript设计模式涵盖了创建型模式（处理对象创建的方式）、结构型模式（关注对象</div> </li> <li><a href="/article/1771859536957734912.htm" title="JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？" target="_blank">JavaScript和HTML/CSS之间有什么区别？它们之间的关系是什么？</a> <span class="text-muted">智伴科技</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个简单的代码示例，展示了HTML、CSS和JavaScript是如何一起工作的：HTML,CSS,JavaScriptExample/在HTML文档内使用内联CSS/.greeting{color:blue;font-size:24px;}Hello,素材8网，www.sucai8.cnChangeText//在HTML文档内使用内联JavaScriptdocument.addEven</div> </li> <li><a href="/article/1771649715369213952.htm" title="【大咖力荐新手必备】软件开发入门，这300篇文章就够了！" target="_blank">【大咖力荐新手必备】软件开发入门，这300篇文章就够了！</a> <span class="text-muted">高校俱乐部</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91/1.htm">软件开发</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B%E5%BF%85%E5%A4%87/1.htm">新手必备</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BC%96%E7%A0%81/1.htm">数据编码</a><a class="tag" taget="_blank" href="/search/IP/1.htm">IP</a> <div>小编在这里根据知识图谱整理了CSDN站内的优质文章300篇，帮助见习工程提升技术能力、实现系统化学习！基础IT技术文章300篇大合集包含：【信息/编码】进制转换25篇、数据编码25篇；【IP/组网】网关与网段25篇、IP协议26篇、主机与DNS23篇、访问控制37篇；【程序逻辑】JavaScript29篇、常用算法37篇；【Web基础】HTML31篇、CSS32篇、DOM与BOM23篇扫码添加小助</div> </li> <li><a href="/article/1770408572249767936.htm" title="问了一下 GPT--当前基于 React + TypeScript 的生态中一名前端工程师需要具备哪些能力？" target="_blank">问了一下 GPT--当前基于 React + TypeScript 的生态中一名前端工程师需要具备哪些能力？</a> <span class="text-muted">zoe_ya</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>在当前基于React+TypeScript的生态中，你需要掌握一系列的技能和知识，以构建现代化、高效能且可维护的前端应用程序。以下是一些关键领域的知识和技能点：基础知识HTML/CSS/JavaScript:理解语义化的HTML、CSS布局和定位技术以及现代JavaScript（ES6+）的特性。TypeScript:掌握TypeScript的基本语法、类型系统以及如何在React项目中使用Typ</div> </li> <li><a href="/article/1770399006292246528.htm" title="reactive 和ref区别和原理" target="_blank">reactive 和ref区别和原理</a> <span class="text-muted">小王学前端️</span> <a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>reactive和ref区别和原理在Vue3中，reactive和ref都是用来创建响应式数据的方法。它们的主要区别在于如何使用它们以及它们如何处理值.reactive是用来创建响应式对象的。当你传递一个普通的JavaScript对象给reactive，它会返回一个新的响应式对象，这个对象与原始对象具有相同的属性和值，但是当这些属性被修改时，Vue会自动跟踪这些更改并更新视图。import{rea</div> </li> <li><a href="/article/1770381258401054720.htm" title="react 和vue区别" target="_blank">react 和vue区别</a> <span class="text-muted">小王学前端️</span> <a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>React和Vue是两个非常流行的前端JavaScript框架，它们有许多相似之处，但也有一些关键的区别：设计理念：React更倾向于函数式编程，推崇组件的纯粹性和可预测性，而Vue则更倾向于易用性和灵活性，提供了更多的内置特性和语法糖。模板vsJSX：Vue使用基于HTML的模板语法，这使得开发者可以快速上手。而React使用JSX，它是JavaScript的语法扩展，允许在JavaScript</div> </li> <li><a href="/article/1770188547035299840.htm" title="爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析" target="_blank">爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析</a> <span class="text-muted">洛可可白</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E4%B8%93%E6%A0%8F/1.htm">前端专栏</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>前言欢迎来到我的技术小宇宙！这里不仅是我记录技术点滴的后花园，也是我分享学习心得和项目经验的乐园。无论你是技术小白还是资深大牛，这里总有一些内容能触动你的好奇心。洛可可白：个人主页个人专栏：✅前端技术✅后端技术个人博客：洛可可白博客代码获取：bestwishes0203封面壁纸：洛可可白wallpaper文章目录爆肝五千字！ECMAScript核心概念与现代JavaScript特性全解析基本语法1</div> </li> <li><a href="/article/1769981361290018816.htm" title="速盾：cdn分流是什么意思" target="_blank">速盾：cdn分流是什么意思</a> <span class="text-muted">速盾cdn</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>CDN分流是一种通过内容分发网络（CDN）来优化网站访问速度和用户体验的技术。通过CDN分流，网站的静态资源可以被缓存到全球不同的CDN节点上，从而减少用户请求原始服务器的次数，提高了网站的响应速度和可靠性。本文将详细介绍CDN分流的原理、优势和应用场景。CDN分流的原理是通过将网站的静态资源（如HTML、CSS、JavaScript、图片、视频等）复制到CDN节点上，并将用户的请求转发到离用户最</div> </li> <li><a href="/article/1769783486312415232.htm" title="vue的axios教程" target="_blank">vue的axios教程</a> <span class="text-muted">可爱的小小小狼</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/okhttp/1.htm">okhttp</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>ajax技术：不重新加载整个页面的情况下，异步地与服务器进行通信，并更新页面的部分内容Ajax（AsynchronousJavaScriptandXML）是一种使用JavaScript向服务器发送和接收数据的技术。Ajax的工作原理基于以下关键组件：XMLHttpRequest对象：XMLHttpRequest是浏览器提供的API，用于创建HTTP请求，并与服务器进行通信。通过XMLHttpReq</div> </li> <li><a href="/article/1769779961574522880.htm" title="JS中的八种继承方法" target="_blank">JS中的八种继承方法</a> <span class="text-muted">酥脆角</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.原型链继承：原型链继承是JavaScript中最基本的继承方式。每个对象都有一个原型对象，通过原型链将属性和方法沿着对象链传递下来。在原型链继承中，通过将子构造函数的原型对象指向父构造函数的实例，实现了继承。这意味着子对象可以访问父对象原型链上的属性和方法。functionParent(){this.name='Parent';}Parent.prototype.sayHello=functi</div> </li> <li><a href="/article/1769766366396612608.htm" title="原型对象与原型链" target="_blank">原型对象与原型链</a> <span class="text-muted">网站打工人</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/1.htm">原型模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>原型对象实际上每一个构造函数都有一个名为prototype的属性，就是原型的意思，prototype的是对象类据类型，称为构造函数的原型对象，每个原型对象都具有constructor属性代表了该原型对象对应的构造函数。 functionPerson(){ } //每个函数都有prototype属性 console.log(Person.prototype);了解了JavaScript中构造函数</div> </li> <li><a href="/article/1769760827419721728.htm" title="JS中的继承" target="_blank">JS中的继承</a> <span class="text-muted">浅墨_东</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，有多种实现继承的方法。下面介绍几种常见的继承方式以及它们的优缺点：原型链继承原型链继承是JavaScript中最基本的一种继承方式。它的原理是通过将父类的实例作为子类的原型（prototype）来实现继承。functionParent(){this.name='Parent';}Parent.prototype.sayHello=function(){console.lo</div> </li> <li><a href="/article/1769517256871575552.htm" title="【前端框架的发展史详细介绍】" target="_blank">【前端框架的发展史详细介绍】</a> <span class="text-muted">程序员不想敲代码啊</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>前端框架的发展史前端框架的发展史可以追溯到1995年，当时微软推出了IE浏览器并开始支持CSS，随后，在1997年，W3C（万维网联盟）发布了CSS的第一个正式标准。在2003年，苹果推出了Safari浏览器，它支持Web标准，包括CSS和JavaScript。同年，Mozilla基金会发布了Firefox浏览器，也开始支持这些标准。2006年，jQuery库发布，它简化了JavaScript编程</div> </li> <li><a href="/article/1769485775629516800.htm" title="JavaScript函数3:Math" target="_blank">JavaScript函数3:Math</a> <span class="text-muted">天下vs栋哥</span> <div>2.Math2.1console.log(Math.PI)πconsole.log(Math.E)econsole.log(Math.ceil(4.01))5向上求整console.log(Math.floor(4.999999999))4向下求整console.log(Math.sqrt(9))求方根console.log(Math.pow(3,3))3^3console.log(Math.ab</div> </li> <li><a href="/article/1769473954336014336.htm" title="uniapp 实现双击点赞出现特效" target="_blank">uniapp 实现双击点赞出现特效</a> <span class="text-muted">全栈^_^小菜鸟</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>更新一下老板改了需求要加上特效1.创建点赞按钮首先，在你的页面中创建一个点赞按钮全局点赞的话就写在最外面的标签就行了。你可以使用组件或者自定义一个视图组件。点赞这里我们使用了@click事件监听器来监听按钮的点击事件，并且使用了:class绑定来根据isDoubleTap的值改变按钮的样式（可选）。showHeart用于控制小心心的显示与隐藏。2.实现双击检测在JavaScript部分，你需要实现</div> </li> <li><a href="/article/1769345566535385088.htm" title="使用JavaScript写拖拽案例" target="_blank">使用JavaScript写拖拽案例</a> <span class="text-muted">诶呦我那个暴脾气</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%8B%96%E6%8B%BD%E6%A1%88%E4%BE%8B/1.htm">拖拽案例</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a> <div>//设置HTML标签中的css样式。//用全局选择器（）把HTML中的默认样式去掉。//设置一个拖拽用的div盒子。使用绝对定位。css代码：{margin:0;padding:0;list-style:none;}#box{width:100px;height:100px;background-color:hotpink;position:absolute;cursor:move;}HTML</div> </li> <li><a href="/article/1769300123210285056.htm" title="js中怎样添加、移出、插入、复制、创建？" target="_blank">js中怎样添加、移出、插入、复制、创建？</a> <span class="text-muted">一个大长腿</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，可以使用以下方法来添加、移除、插入、复制和创建元素：添加元素：使用appendChild()方法将一个子元素添加到指定父元素的末尾。使用insertBefore()方法将一个子元素插入到指定父元素的指定位置之前。移除元素：使用removeChild()方法从父元素中移除指定的子元素。插入元素：使用insertAdjacentHTML()方法在指定元素的相对位置插入HTML</div> </li> <li><a href="/article/1769135097593790464.htm" title="【javaScript/ES6】获取对象数组中其中一个属性值的集合（forEach、Array.from）" target="_blank">【javaScript/ES6】获取对象数组中其中一个属性值的集合（forEach、Array.from）</a> <span class="text-muted">花间半盘棋</span> <a class="tag" taget="_blank" href="/search/javaScript/1.htm">javaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>引入：有一个对象数组，但只需要其中的某一个属性值。举个栗子，有一个对象数组，其中不止有一个对象：letarr=[{name:'Luenay',age:10},{name:'Kitty',age:20}]但是我只需要包含name的集合；方法1：使用forEach；letresArr=[]arr.forEach(item=>{resArr.push(item.name)})方法2：使用Array.fr</div> </li> <li><a href="/article/15.htm" title="Spring4.1新特性——Spring MVC增强" target="_blank">Spring4.1新特性——Spring MVC增强</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a> <div>目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T</div> </li> <li><a href="/article/142.htm" title="mysql 性能查询优化" target="_blank">mysql 性能查询优化</a> <span class="text-muted">annan211</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E4%BC%98%E5%8C%96/1.htm">优化</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a> <div> 1 时间到底花在哪了？ mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操</div> </li> <li><a href="/article/269.htm" title="windows系统配置" target="_blank">windows系统配置</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可： http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html 类似的还有pagefile.sys msconfig 配置启动项 shutdown 定时关机 ipconfig 查看网络配置 ipconfig /flushdns</div> </li> <li><a href="/article/396.htm" title="人体的排毒时间" target="_blank">人体的排毒时间</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>======================== \|\| 人体的排毒时间是什么时候？\|\| ======================== 转载于： http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR</div> </li> <li><a href="/article/523.htm" title="ZooKeeper" target="_blank">ZooKeeper</a> <span class="text-muted">cugfy</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步，配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea</div> </li> <li><a href="/article/650.htm" title="网络爬虫的乱码处理" target="_blank">网络爬虫的乱码处理</a> <span class="text-muted">随意而生</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文、俄文、藏文之类的乱码处理，因为他们的解决方式是一致的，故在此统一说明。网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理</div> </li> <li><a href="/article/777.htm" title="Xcode常用快捷键" target="_blank">Xcode常用快捷键</a> <span class="text-muted">张亚雄</span> <a class="tag" taget="_blank" href="/search/xcode/1.htm">xcode</a> <div>一、总结的常用命令：隐藏xcode command+h 退出xcode command+q 关闭窗口 command+w 关闭所有窗口 command+option+w 关闭当前</div> </li> <li><a href="/article/904.htm" title="mongoDB索引操作" target="_blank">mongoDB索引操作</a> <span class="text-muted">adminjun</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a> <div>一、索引基础： MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令： > db.test.ensureIndex({"username":1}) 可以通过下面的名称查看索引是否已经成功建立： &nbs</div> </li> <li><a href="/article/1031.htm" title="成都软件园实习那些话" target="_blank">成都软件园实习那些话</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E6%88%90%E9%83%BD+%E8%BD%AF%E4%BB%B6%E5%9B%AD+%E5%AE%9E%E4%B9%A0/1.htm">成都软件园实习</a> <div>无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~ 　　断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。　　都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都</div> </li> <li><a href="/article/1158.htm" title="Linux下FTP服务器安装及配置" target="_blank">Linux下FTP服务器安装及配置</a> <span class="text-muted">ayaoxinchao</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/FTP%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">FTP服务器</a><a class="tag" taget="_blank" href="/search/vsftp/1.htm">vsftp</a> <div>检测是否安装了FTP [root@localhost ~]# rpm -q vsftpd 如果未安装：package vsftpd is not installed 安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息安装FTP 运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf</div> </li> <li><a href="/article/1285.htm" title="使用mongo-java-driver获取文档id和查找文档" target="_blank">使用mongo-java-driver获取文档id和查找文档</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/driver/1.htm">driver</a> <div>注：本文所有代码都使用的mongo-java-driver实现。在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在</div> </li> <li><a href="/article/1412.htm" title="JSONObject以及json串" target="_blank">JSONObject以及json串</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/JSONObject/1.htm">JSONObject</a> <div>一.JAR包简介要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包： 1.commons-lang-2.0.jar 2.commons-beanutils-1.7.0.jar 3.commons-collections-3.1.jar &n</div> </li> <li><a href="/article/1539.htm" title="[Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性" target="_blank">[Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>为了说明问题，看个简单的代码， import org.apache.zookeeper.*; import java.io.IOException; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ThreadLocal</div> </li> <li><a href="/article/1666.htm" title="【Scala十二】Scala核心六：Trait" target="_blank">【Scala十二】Scala核心六：Trait</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c</div> </li> <li><a href="/article/1793.htm" title="weblogic version 10.3破解" target="_blank">weblogic version 10.3破解</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a> <div>版本：WebLogic Server 10.3 说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain 1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa</div> </li> <li><a href="/article/1920.htm" title="求第n个斐波那契数" target="_blank">求第n个斐波那契数</a> <span class="text-muted">BrokenDreams</span> <div> 今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。自己试了下，搞了好久。。。基础要加强了。 &nbs</div> </li> <li><a href="/article/2047.htm" title="读《研磨设计模式》-代码笔记-访问者模式-Visitor" target="_blank">读《研磨设计模式》-代码笔记-访问者模式-Visitor</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; interface IVisitor { //第二次分派，Visitor调用Element void visitConcret</div> </li> <li><a href="/article/2174.htm" title="MatConvNet的excise 3改为网络配置文件形式" target="_blank">MatConvNet的excise 3改为网络配置文件形式</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a> <div>MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。主页： http://www.vlfeat.org/matconvnet/ 教程： http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html 注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet： http</div> </li> <li><a href="/article/2301.htm" title="ZK Timeout再讨论" target="_blank">ZK Timeout再讨论</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/timeout/1.htm">timeout</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>http://crazyjvm.iteye.com/blog/1693757 文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息： Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003</div> </li> <li><a href="/article/2428.htm" title="CASE WHEN 用法介绍" target="_blank">CASE WHEN 用法介绍</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/group+by/1.htm">group by</a><a class="tag" taget="_blank" href="/search/case+when/1.htm">case when</a> <div>CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END --Case搜索函数 CASE WHEN sex = '1' THEN </div> </li> <li><a href="/article/2555.htm" title="PHP技巧汇总:提高PHP性能的53个技巧" target="_blank">PHP技巧汇总:提高PHP性能的53个技巧</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>PHP技巧汇总:提高PHP性能的53个技巧　　用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，　　单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注：　　PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。　　1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍</div> </li> <li><a href="/article/2682.htm" title="Yii框架中CGridView的使用方法以及详细示例" target="_blank">Yii框架中CGridView的使用方法以及详细示例</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>CGridView显示一个数据项的列表中的一个表。表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。　　CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。实例代码如下：</div> </li> <li><a href="/article/2809.htm" title="Maven项目打包成可执行Jar文件" target="_blank">Maven项目打包成可执行Jar文件</a> <span class="text-muted">dyy_gusi</span> <a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a> <div>Maven项目打包成可执行Jar文件在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下： 1、在项目中加入插件的依赖： <plugin> </div> </li> <li><a href="/article/2936.htm" title="php常见错误" target="_blank">php常见错误</a> <span class="text-muted">geeksun</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>1. kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "fastc</div> </li> <li><a href="/article/3063.htm" title="修改linux的用户名" target="_blank">修改linux的用户名</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/change+password/1.htm">change password</a> <div>Change Linux Username 更改Linux用户名，需要修改4个系统的文件： /etc/passwd /etc/shadow /etc/group /etc/gshadow 古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替： vipw vipw -s vigr vigr -s 具体的操作顺</div> </li> <li><a href="/article/3190.htm" title="第五章常用Lua开发库1-redis、mysql、http客户端" target="_blank">第五章常用Lua开发库1-redis、mysql、http客户端</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a> <div>对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&q=lua+resty。 Redis客户端 lua-resty-r</div> </li> <li><a href="/article/3317.htm" title="zkClient 监控机制实现" target="_blank">zkClient 监控机制实现</a> <span class="text-muted">liyonghui160com</span> <a class="tag" taget="_blank" href="/search/zkClient+%E7%9B%91%E6%8E%A7%E6%9C%BA%E5%88%B6%E5%AE%9E%E7%8E%B0/1.htm">zkClient 监控机制实现</a> <div> 直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举</div> </li> <li><a href="/article/3444.htm" title="在Mysql 众多表中查找一个表名或者字段名的 SQL 语句" target="_blank">在Mysql 众多表中查找一个表名或者字段名的 SQL 语句</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>在Mysql 众多表中查找一个表名或者字段名的 SQL 语句：　　方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name'; 　　方法二：SELECT column_name from information_schema.colum</div> </li> <li><a href="/article/3571.htm" title="程序员对英语的依赖" target="_blank">程序员对英语的依赖</a> <span class="text-muted">Smile.zeng</span> <a class="tag" taget="_blank" href="/search/%E8%8B%B1%E8%AF%AD/1.htm">英语</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E7%8C%BF/1.htm">程序猿</a> <div>1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。 2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。 3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。 4、写的程序至少能有一定的可读性，至少要人别人能懂吧... 以上一些问题，充分说明了英语对程序猿的重要性。骚年</div> </li> <li><a href="/article/3698.htm" title="Oracle学习笔记(8) 使用PLSQL编写触发器" target="_blank">Oracle学习笔记(8) 使用PLSQL编写触发器</a> <span class="text-muted">vipbooks</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/Access/1.htm">Access</a> <div> 时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！这是第八章的学习笔记，学习完第七章的子程序和包之后</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>