deniro_li

说说 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/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><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><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业\|游景点介绍\|旅游风景区\|家乡介绍\|等网站的设计与制作\|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍\|旅游风景区\|家乡介绍\|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</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>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</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%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> <span class="text-muted">海淀萌狗</span> <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835360244646113280.htm" title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a> <span class="text-muted">Q_w7742</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>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> <span class="text-muted">听你讲故事啊</span> <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</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%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <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><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</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/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> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi</div> </li> <li><a href="/article/1835298981362626560.htm" title="webstorm报错TypeError: this.cliEngine is not a constructor" target="_blank">webstorm报错TypeError: this.cliEngine is not a constructor</a> <span class="text-muted">Blue_Color</span> <div>点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG：前端开发者的包管理利器" target="_blank">了解 UNPKG：前端开发者的包管理利器</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835247344719851520.htm" title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a> <span class="text-muted">Kason晨</span> <div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div> </li> <li><a href="/article/1835216109297561600.htm" title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a> <span class="text-muted">diygwcom</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><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> <div>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div> </li> <li><a href="/article/1835194426499100672.htm" title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a> <span class="text-muted">闹小艾</span> <a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账</div> </li> <li><a href="/article/1835192531881652224.htm" title="Axure设计之全屏与退出全屏交互实现" target="_blank">Axure设计之全屏与退出全屏交互实现</a> <span class="text-muted">招风的黑耳</span> <a class="tag" taget="_blank" href="/search/Axure/1.htm">Axure</a><a class="tag" taget="_blank" href="/search/axure/1.htm">axure</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a> <div>在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure</div> </li> <li><a href="/article/1835162742533746688.htm" title="全面指南：用户行为从前端数据采集到实时处理的最佳实践" target="_blank">全面指南：用户行为从前端数据采集到实时处理的最佳实践</a> <span class="text-muted">数字沉思</span> <a class="tag" taget="_blank" href="/search/%E8%90%A5%E9%94%80/1.htm">营销</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E8%BF%90%E8%90%A5/1.htm">流量运营</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/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/%E5%86%85%E5%AE%B9%E8%BF%90%E8%90%A5/1.htm">内容运营</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信</div> </li> <li><a href="/article/1835154546289111040.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/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，</div> </li> <li><a href="/article/1835137656992919552.htm" title="javascript添加p元素，html添加文字，appendChild" target="_blank">javascript添加p元素，html添加文字，appendChild</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%E6%B7%BB%E5%8A%A0p/1.htm">html添加p</a><a class="tag" taget="_blank" href="/search/appendChild/1.htm">appendChild</a> <div>javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}</div> </li> <li><a href="/article/1835136018660028416.htm" title="CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制" target="_blank">CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载裁剪区域绘制</a> <span class="text-muted">SteveJi666</span> <a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/cesium/1.htm">cesium</a><a class="tag" taget="_blank" href="/search/EarthSDK/1.htm">EarthSDK</a><a class="tag" taget="_blank" href="/search/SuperMap/1.htm">SuperMap</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a><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/arcgis/1.htm">arcgis</a> <div>版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心\|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap</div> </li> <li><a href="/article/1835131605585326080.htm" title="html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示" target="_blank">html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示</a> <span class="text-muted">睿理</span> <div>html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以</div> </li> <li><a href="/article/1835131225128398848.htm" title="如何在 Python 中声明一个静态属性?" target="_blank">如何在 Python 中声明一个静态属性?</a> <span class="text-muted">潮易</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla</div> </li> <li><a href="/article/1835125415920889856.htm" title="数据格式：什么是JSON和XML" target="_blank">数据格式：什么是JSON和XML</a> <span class="text-muted">isNotNullX</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是</div> </li> <li><a href="/article/1835118231979913216.htm" title="HighCharts图表自动化简介" target="_blank">HighCharts图表自动化简介</a> <span class="text-muted">知识的宝藏</span> <a class="tag" taget="_blank" href="/search/Selenium%E9%AB%98%E7%BA%A7%E7%AF%87/1.htm">Selenium高级篇</a><a class="tag" taget="_blank" href="/search/Selenium%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">Selenium图表自动化测试</a><a class="tag" taget="_blank" href="/search/highcharts%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">highcharts图表自动化</a><a class="tag" taget="_blank" href="/search/Selenium%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">Selenium图表自动化</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">图表自动化测试</a><a class="tag" taget="_blank" href="/search/highcharts/1.htm">highcharts</a><a class="tag" taget="_blank" href="/search/Selenium/1.htm">Selenium</a> <div>什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互</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>