<meta charset="utf-8">

<meta http-equiv="description" content="ieBetter.js方法支持API简介以及演示 » 张鑫旭-鑫空间-鑫生活" />

<meta name="description" content="张鑫旭web前端文档页面之ieBetter方法支持API简介以及演示" />

<meta name="keywords" content="ieBetter.js, javascript, ie6, ie7, ie8, API" />

<meta name="author" content="张鑫旭, zhangxinxu" />

<title>ieBetter.js方法支持API简介以及演示 » 张鑫旭-鑫空间-鑫生活</title>

<link rel="stylesheet" href="api.css">

<link rel="shortcut icon" href="zxx_ico.ico" />

.button { display: inline-block; padding-left: 12px; padding-right: 12px; height: 26px; border: 1px solid #a0b3d6; border-radius: 2px; background-color: #cad5eb; box-shadow: inset 0 1px 1px #f0f3f9; text-shadow: 0 1px #f0f3f9; font-weight: 700; overflow: visible; cursor: pointer; }

.button:hover { border-color: #819DD3; }

:root .button:active { box-shadow: inset 0 1px 1px #34538b; }

img { background-color: #f5f5f5; }

.link { background-color: #34538b; color:#fff; padding: 1px 5px; }

<div class="zxx_header">

<div class="zxx_constr">

<a href="http://www.zhangxinxu.com/" class="zxx_logo">

<img class="l" src="index_logo.gif" alt="张鑫旭-鑫空间-鑫生活" />

</a>

<span class="zxx_author_time">特别感谢媳妇对我工作的大力支持！<br>——by <span role="author">zhangxinxu</span> <span role="timer">2013-12-12 17:52</span></span>

</div>

<div class="zxx_nav">

<div class="zxx_constr">

<ul class="zxx_nav_ul">

<li class="zxx_nav_li"><a href="index.html" class="zxx_nav_a zxx_nav_on">API展示</a></li>

<li class="zxx_nav_li"><a href="http://www.zhangxinxu.com/wordpress/?p=3835" class="zxx_nav_a">相关文章</a></li>

<li class="zxx_nav_sp">

<a href="javascript:" id="hideHeadFoot" class="zxx_gbtn" title="如果您的浏览器高度不够，可以点击这个按钮增强体验">隐藏头部和尾部</a>&nbsp;

<a href="https://github.com/zhangxinxu/ieBetter.js" class="zxx_rbtn">Fork Me</a>

</li>

</ul>

</div>

<div id="zxxBody" class="zxx_body">

<div id="zxxSlide" class="zxx_side">

<h6 class="zxx_api_title">• 选择器相关API</h6>

<a href="#querySelector" class="zxx_api_a zxx_api_on" name="querySelector">*.querySelector</a>

<a href="#querySelectorAll" class="zxx_api_a" name="querySelectorAll">*.querySelectorAll</a>

<a href="#getElementsByClassName" class="zxx_api_a" name="getElementsByClassName">*.getElementsByClassName</a>

<h6 class="zxx_api_title">• 事件相关API</h6>

<a href="#addEventListener" class="zxx_api_a" name="addEventListener">*.addEventListener</a>

<a href="#removeEventListener" class="zxx_api_a" name="removeEventListener">*.removeEventListener</a>

<a href="#dispatchEvent" class="zxx_api_a" name="dispatchEvent">*.dispatchEvent</a>

<a href="#createEvent" class="zxx_api_a" name="createEvent">document.createEvent</a>

<a href="#initEvent" class="zxx_api_a" name="initEvent">init[|Mouse|UI]Event</a>

<a href="#input" class="zxx_api_a" name="input">input</a>

<a href="#hashchange" class="zxx_api_a" name="hashchange">window.onhashchange</a>

<h6 class="zxx_api_title">• DOM特性相关API</h6>

<a href="#getComputedStyle" class="zxx_api_a" name="getComputedStyle">window.getComputedStyle</a>

<h6 class="zxx_api_title">• ES5 JSON扩展</h6>

<a href="#parse" class="zxx_api_a" name="parse">JSON.parse</a>

<a href="#stringify" class="zxx_api_a" name="stringify">JSON.stringify</a>

<h6 class="zxx_api_title">• ES5 Object扩展</h6>

<a href="#create" class="zxx_api_a" name="create">Object.create</a>

<a href="#keys" class="zxx_api_a" name="keys">Object.keys</a>

<h6 class="zxx_api_title">• Date对象</h6>

<a href="#now" class="zxx_api_a" name="now">Date.now</a>

<h6 class="zxx_api_title">• ES5 Function扩展</h6>

<a href="#bind" class="zxx_api_a" name="bind">Function.bind</a>

<h6 class="zxx_api_title">• ES5 String扩展</h6>

<a href="#trim" class="zxx_api_a" name="trim">String.trim</a>

<h6 class="zxx_api_title">• ES5 数组方法扩展</h6>

<a href="#isArray" class="zxx_api_a" name="isArray">Array.isArray</a>

<a href="#forEach" class="zxx_api_a" name="forEach">Array.forEach</a>

<a href="#map" class="zxx_api_a" name="map">Array.map</a>

<a href="#filter" class="zxx_api_a" name="filter">Array.filter</a>

<a href="#some" class="zxx_api_a" name="some">Array.some</a>

<a href="#every" class="zxx_api_a" name="every">Array.every</a>

<a href="#indexOf" class="zxx_api_a" name="indexOf">Array.indexOf</a>

<a href="#lastIndexOf" class="zxx_api_a" name="lastIndexOf">Array.lastIndexOf</a>

<a href="#reduce" class="zxx_api_a" name="reduce">Array.reduce</a>

<a href="#reduceRight" class="zxx_api_a" name="reduce">Array.reduceRight</a>

</div>

<div id="querySelector" class="zxx_api_detail" style="visibility: visible;">

<div class="zxx_api_content">

<h2>*.querySelector</h2>

<h3>概述</h3>

<p>返回当前文档中匹配一个特定选择器的第一个元素。返回的对象类型是<code>Node</code>或<code>Null</code>. 选择器内核为<a href="http://www.sizzlejs.com/">Sizzle</a>.</p>

<h3>语法</h3>

<ul>

<li><code>selector</code> 表示选择器。</li>

</ul>

<h3>其他说明</h3>

<p>支持<code>document.querySelector</code>以及<code>element.querySelector</code>. 不过有个限制，<code>element</code>需要是<code>document.querySelector</code>或<code>document.querySelectorAll</code>选择的元素。</p>

<p>例如下面这个在IE6~IE8下是会报错：</p>

<pre>document.getElementById("query").querySelector(".selector");</pre>

<p>需要这么使用：</p>

<pre>document.querySelector("#query").querySelector(".selector");</pre>

<h3>示例</h3>

<p><input type="button" id="testButton1" class="button" value="class为bingo的图片往前走两步"></p>

<p>

<img src="mm1.jpg" class="bingo">

<img src="mm2.jpg" class="bingo1">

<img src="mm3.jpg" class="bingo2">

</p>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;img src="mm1.jpg" class="bingo">

&lt;img src="mm2.jpg" class="bingo1">

&lt;img src="mm3.jpg" class="bingo2"></pre>

<p>JS</p>

<pre>var eleTestButton1 = <mark>document.querySelector</mark>("#testButton1");

if (eleTestButton1) {

eleTestButton1.addEventListener("click", function() {

var eleBingo = <mark>document.querySelector</mark>(".bingo");

if (eleBingo) {

if (!eleBingo.style.verticalAlign) {

eleBingo.style.verticalAlign = "8px";

this.value = "给我回来！";

} else {

eleBingo.style.verticalAlign = "";

this.value = "走两步！";

}

}

});

}</pre>

</div>

</div>

<!-- another API -->

<div id="querySelectorAll" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>*.querySelectorAll</h2>

<h3>概述</h3>

<p>返回当前文档中匹配一个特定选择器的所有的元素。在IE6-8下，返回的是装载节点集合的数组；其他浏览器为<code>NodeList</code>类型。</p>

<h3>语法</h3>

<pre>&lt;var&gt;elementList&lt;/var&gt; = document.querySelectorAll(<em>selectors</em>);</pre>

<ul>

<li><code>selectors</code> 表示是一个由逗号连接的包含一个或多个CSS选择器的字符串。</li>

</ul>

<h3>其他说明</h3>

<p>如果你想遍历所有的节点。可以试试这种用法：</p>

<pre>var elementList = document.querySelectorAll(<em>selectors</em>);

[].slice.call(elementList).forEach(function(elementNode, index) {

<span style="color: #999;">// elementNode 就是遍历的节点 </span>

});

<h3>示例</h3>

<p><input type="button" id="testButton2" class="button" value="class为bingoAll的图片边框变身"></p>

<p>

<img src="mm1.jpg" class="bingoAll">

<img src="mm2.jpg" class="bingoAll">

<img src="mm3.jpg" class="bingoAll">

</p>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;img src="mm1.jpg" class="bingoAll">

&lt;img src="mm2.jpg" class="bingoAll">

&lt;img src="mm3.jpg" class="bingoAll"></pre>

<p>JS</p>

<pre>var eleTestButton2 = document.querySelector("#testButton2");

if (eleTestButton2 && !eleTestButton2.clicked) {

eleTestButton2.addEventListener("click", function() {

var eleBingoAll = document.<mark>querySelectorAll</mark>(".bingoAll");

[].slice.call(eleBingoAll).forEach(function(eleBingo) {

eleBingo.style.padding = "3px";

eleBingo.style.border = "1px solid #aaa";

});

eleTestButton2.clicked = true;

});

}</pre>

</div>

</div>

<!-- another API -->

<div id="getElementsByClassName" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>*.getElementsByClassName</h2>

<h3>概述</h3>

<p>根据类名获得匹配的所有元素。在IE6-8下，返回的是装载节点集合的数组；其他浏览器为<code>NodeList</code>类型。</p>

<h3>语法</h3>

<pre>&lt;var&gt;elementList&lt;/var&gt; = document.getElementsByClassName(<em>classNameA classNameB ...</em>);</pre>

<ul>

<li><code>className</code> 表示希望匹配的元素的类名。</li>

</ul>

<h3>其他说明</h3>

<p>在IE9+浏览器下，使用的是原生<code>getElementsByClassName</code>方法，其速度要比<code>querySelector</code>快。支持多个类名。</p>

<h3>示例</h3>

<p><input type="button" id="testButton3" class="button" value="class为bingA+bingoB的躲猫猫"></p>

<p>

<img src="mm1.jpg" class="bingoA bingoB">

</p>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;img src="mm1.jpg" class="bingoA bingoB"></pre>

<p>JS</p>

<pre>var eleTestButton3 = document.querySelector("#testButton3");

if (eleTestButton3) {

eleTestButton3.addEventListener("click", function() {

var eleBingClassName = document.<mark>getElementsByClassName</mark>("bingoA bingoB")[0];

if (eleBingClassName) {

var visibility = eleBingClassName.style.visibility;

if (visibility == "hidden") {

this.value = "点击隐藏";

eleBingClassName.style.visibility = "visible";

} else {

this.value = "点击显示";

eleBingClassName.style.visibility = "hidden";

}

}

});

}</pre>

</div>

</div>

<!-- another API -->

<div id="addEventListener" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>*.addEventListener</h2>

<h3>概述</h3>

<p>在一个单一的目标上注册单一的监听事件。监听事件可以是一个文档上的元素，或者<code>document</code>本身，或<code>window</code>.</p>

<h3>语法</h3>

<pre><em>target</em>.addEventListener(<em>type</em>, <em>listener</em>[, useCapture]);</pre>

<ul>

<li><code>type</code> 表示监听的事件类型的字符串。比如点击事件，可以是<code>"click"</code>.</li>

<li><code>listener</code> 侦听方法。在事情发生的时候，接受一个通知对象。</li>

<li><code>useCapture</code> 可选参数。如果为<code>true</code>，则表示用户希望启动从外及内的捕获获取。如果该参数未指定，<code>useCapture</code>为<code>false</code>，表示采用从里到外的冒泡获取。</li>

</ul>

<h3>其他说明</h3>

<p>目前只做了基本事件的兼容处理。低版本IE浏览器不支持的有：</p>

<ol>

<li><code>XMLHttpRequest</code>侦听</li>

<li><code>progress</code>audio/video等HTML5事件</li>

</ol>

<p>另外，IE6-IE8浏览器的第三个参数<code>useCapture</code>实际并未作用。<code>listener</code>传入对象（假设名为event）做了如下一下兼容性处理：</p>

<ol>

<li><code>event</code>对象直接使用，而无需<code>window.event</code></li>

<li><code>event.target</code></li>

<li><code>event.preventDefault()</code></li>

</ol>

<p>可见，目前只做了些常用属性或方法的兼容处理。欢迎你一同参与更多的建设。</p>

<h3>示例</h3>

<p><input type="button" id="testAddEvent" class="button" value="mouseover事情侦听"></p>

<p><span id="txtAddEvent" style="color:#666;">我在等待鼠标经过按钮哦~</span></p>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;span id="txtAddEvent" style="color:#666;">我在等待鼠标经过按钮哦~&lt;/span></pre>

<p>JS</p>

<pre>var eleTestAddEvent = document.querySelector("#testAddEvent")

, eleTxtAddEvent = document.querySelector("#txtAddEvent");

if (eleTestAddEvent && eleTxtAddEvent) {

eleTestAddEvent.<mark>addEventListener</mark>("mouseover", function() {

eleTxtAddEvent.innerHTML = '经过人家啦！';

});

eleTestAddEvent.<mark>addEventListener</mark>("mouseout", function() {

eleTxtAddEvent.innerHTML = '不要离开人家嘛！';

});

}</pre>

</div>

</div>

<!-- another API -->

<div id="removeEventListener" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>*.removeEventListener</h2>

<h3>概述</h3>

<p>移除注册的事件。</p>

<h3>语法</h3>

<pre><em>target</em>.removeEventListener(<em>type</em>, <em>listener</em>[, <em>useCapture</em>])</pre>

<ul>

<li><code>type</code> 表示要移除的事件类型。</li>

<li><code>listener</code> 表示要移除的事件方法。</li>

<li><code>useCapture</code> 可选参数。要移除的事件是不是可以捕获的。此参数在本项目中没有作用，可忽略。</li>

</ul>

<h3>其他说明</h3>

<p>暂无</p>

<h3>示例</h3>

<p>这个例子是这样的：<br>两个按钮，第一个按钮注册了两个方法，一个是图片尺寸变化，另外一个是图片位置随机变化。点击第二个按钮则移除“位置变化”这个注册事件。此时，再点击第一个按钮，看看效果如何？</p>

<p>

<input type="button" id="testAddEventAB" class="button" value="我注册了两个方法？">

<input type="button" id="testRemoveEventB" class="button" value="我移除了第2个方法？">

</p>

<p style="height: 96px;">

<img src="mm1.jpg" id="bingoRemoveEvent">

</p>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;img src="mm1.jpg" id="bingoRemoveEvent"></pre>

<p>JS</p>

<pre>var eleAddEventAB = document.querySelector("#testAddEventAB")

, eleRemoveEventB = document.querySelector("#testRemoveEventB");

var eleBingoRemoveEvent = document.querySelector("#bingoRemoveEvent");

if (eleAddEventAB && eleRemoveEventB && eleBingoRemoveEvent) {

var eventAddA = function() {

<span style="color: #999;">// 大小随机</span>

eleBingoRemoveEvent.style.width = Math.ceil(128 * Math.random()) + "px";

}, eventAddB = function() {

<span style="color: #999;">// 位置随机</span>

eleBingoRemoveEvent.style.marginLeft = Math.ceil(128 * Math.random()) + "px";

};

<span style="color: #999;">// 注册事件</span>

eleAddEventAB.addEventListener("click", eventAddA);

eleAddEventAB.addEventListener("click", eventAddB);

<span style="color: #999;">// 移除事件</span>

eleRemoveEventB.addEventListener("click", function() {

eleAddEventAB.<mark>removeEventListener</mark>("click", eventAddB);

this.value += "√";

});

}</pre>

</div>

</div>

<!-- another API -->

<div id="dispatchEvent" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>*.dispatchEvent</h2>

<h3>概述</h3>

<p>给DOM节点委派一个事件。</p>

<h3>语法</h3>

<pre><em>element</em>.dispatchEvent(<em>event</em>);</pre>

<ul>

<li><code>event</code> 表示事件对象。在标准浏览器中，由<a href="#createEvent">document.createEvent</a>创建。不过这其实属于旧方法，目前，推荐使用<code>new Event()</code>. 但IE9似乎不支持新的用法，因此，本项目依然使用的是<code>document.createEvent</code>.</li>

</ul>

<h3>其他说明</h3>

<p>引入<code>dispatchEvent</code>的初衷是触发各类事件。类似jQuery中的<code>trigger</code>方法。</p>

<p><code>dispatchEvent</code>要想起作用，前面还需要两步，一是<a href="#createEvent">创建</a>，二是<a href="#initEvent">初始化</a>。具体可参考下面的示例代码。</p>

<p>在IE6~IE9中，参数<code>event</code>对象（如果是采用<code>document.createEvent</code>创建）有用的属性值有：</p>

<ol>

<li><code>event.target</code> 事件元素</li>

<li><code>event.type</code> 事件类型</li>

<li><code>event.timeStamp</code> 事件执行时候的时间戳</li>

</ol>

<p>其他参数实际上只是个占位子的摆设。因此，<code>dispatchEvent</code>更适合自定义事件或者不依赖<code>event</code>事件对象的事件。</p>

<h3>示例</h3>

<p>创建一个基本的自定义事件，实现图片随机左边距(<code>margin-left</code>)效果。如下代码：</p>

<pre><span style="color: #999;">// 创建</span>

var eventMarginLeft = document.createEvent("Event");

var eleDispatch = document.querySelector("#bingoDispatch");

if (eleDispatch) {

eleDispatch.addEventListener("marginLeft", function() {

this.style.marginLeft = Math.round(Math.random() * 100) + "px";

});

<span style="color: #999;">// 初始化</span>

eventMarginLeft.initEvent("marginLeft");

}</pre>

<p><input type="button" id="testDispatchEvent" class="button" value="点击我执行：eleDispatch.dispatchEvent(eventMarginLeft)"></p>

<p>

<img src="mm1.jpg" id="bingoDispatch">

</p>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;img src="mm1.jpg" id="bingoDispatch"></pre>

<p>JS</p>

<pre>var eventMarginLeft = document.createEvent("Event");

var eleDispatch = document.querySelector("#bingoDispatch");

if (eleDispatch) {

eleDispatch.addEventListener("marginLeft", function() {

this.style.marginLeft = Math.round(Math.random() * 100) + "px";

});

eventMarginLeft.initEvent("marginLeft");

}

var eleTestDispatch = document.querySelector("#testDispatchEvent");

if (eleTestDispatch) eleTestDispatch.addEventListener("click", function() {

eleDispatch.<mark>dispatchEvent</mark>(eventMarginLeft);

});</pre>

</div>

</div>

<!-- another API -->

<div id="createEvent" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>document.createEvent</h2>

<h3>概述</h3>

<p>创建指定类型的事件。</p>

<h3>语法</h3>

<pre>var <em>event</em> = document.createEvent(<em>type</em>);</pre>

<ul>

<li><code>type</code> 表示事件的类别。本项目支持如下值：<code>"Event"</code>, <code>"HTMLEvents"</code>, <code>"MouseEvents"</code>, <code>"UIEvents"</code>. 并不支持DOM 3 <code>"TextEvent"</code>, <code>HTMLEvent</code>, <code>MouseEvent</code>, <code>KeyboardEvent</code>等其他类别，否则在IE6~8浏览器下会抛出异常。</li>

</ul>

<h3>其他说明</h3>

<p>实际上，在IE6~8浏览器中，<code>type</code>类别实际并没有多少实际的差异。不过，从兼容统一角度讲，还是根据情况使用合适的类别。</p>

<h3>示例</h3>

<p>参考<a href="#dispatchEvent">*.dispatchEvent</a>中的示例。</p>

<h3>代码</h3>

<p>暂无</p>

</div>

</div>

<!-- another API -->

<div id="initEvent" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>initEvent | initMouseEvent | initUIEvent</h2>

<h3>概述</h3>

<p>初始化<code>document.createEvent</code>返回事件。 <span style="color: #999; margin-left: 1em;">// 作者自述: 这一连串使用其实很啰嗦，在新的构造器事件生成中，已经没有这个啰嗦的初始化步骤。</span></p>

<h3>语法</h3>

<pre><em>event</em>.initEvent(<em>eventType</em>, <em>canBubble</em>, <em>cancelable</em>);</pre>

<pre><em>event</em>.initMouseEvent(<em>eventType</em>, <em>canBubble</em>, <em>cancelable</em>, <em>view</em>,

<em>detail</em>, <em>screenX</em>, <em>screenY</em>, <em>clientX</em>, <em>clientY</em>,

<em>ctrlKey</em>, <em>altKey</em>, <em>shiftKey</em>, <em>metaKey</em>,

<em>button</em>, <em>relatedTarget</em>);</pre>

<pre><em>event</em>.initUIEvent(<em>eventType</em>, <em>canBubble</em>, <em>cancelable</em>, <em>view</em>, <em>detail</em>);</pre>

<ul>

<li><code>eventType</code> 表示事件的类型，例如<code>"click"</code>或者自定义注册的事件类型，如<code>"marginLeft"</code>.</li>

<li><code>canBubble</code> 可选参数。表示事件是否冒泡。默认为<code>false</code>.</li>

<li><code>cancelable</code> 可选参数。表示是否可以用<code>preventDefault()</code>方法取消事件，默认为<code>false</code>.</li>

<li><code>view</code> 可选参数。表示...</li>

<li>...</li>

<li>...</li>

<li>抱歉，条目过多... <code>event</code>对象各个属性含义请大家自行查找相关资料。</li>

</ul>

<h3>其他说明</h3>

<p>以上初始化方法的参数可以通过<code>addEventListener</code>注册事件的<code>event</code>对象获得，于是，通过这个，我们可以区分是主动触发行为（鼠标点击）还是代码触发行为（<code>dispatchEvent</code>）。</p>

<p><code>document.createEvent</code>, <code>event.initEvent</code>, <code>element.disptachEvent</code>. 实际是触发<code>addEventListener</code>注册事件的三步曲。

<p>于是，<code>element</code>元素上注册的<code>click</code>事件就可以被执行了。行为表现有些类似jQuery中的<code>trigger</code>.</p>

<p>这里的对象初始化方法与事件类别是一一对应的，如下：</p>

<table>

<tr><td>Event</td><td>initEvent</td></tr>

<tr><td>HTMLEvents</td><td>initEvent</td></tr>

<tr><td>MouseEvents</td><td>initMouseEvent</td></tr>

<tr><td>UIEvents</td><td>initUIEvent</td></tr>

</table>

<p>其他一些事件类别，如<code>TextEvent</code>为DOM3级别，这里不予以支持。</p>

<h3>示例</h3>

<p>

<input type="button" id="testClickAdded" class="button" value="我绑定了一个点击事件">

<input type="button" id="testClickDispatch" class="button" value="点击我也可以触发">

</p>

<p>

<img src="mm1.jpg" id="bingoInitEvent">

</p>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;img src="mm1.jpg" id="bingoInitEvent"></pre>

<p>JS</p>

<pre>var eleClickAdded = document.querySelector("#testClickAdded")

eleClickDispatch = document.querySelector("#testClickDispatch");

var eleBingoInitEvent = document.querySelector("#bingoInitEvent");

if (eleClickAdded && eleClickDispatch && eleBingoInitEvent) {

eleClickAdded.addEventListener("click", function() {

eleBingoInitEvent.style.marginLeft = Math.ceil(100 * Math.random()) + "px";

});

<span style="color: #999;">// 创建</span>

var initEventCreate = document.createEvent("MouseEvents");

<span style="color: #999;">// 初始化</span>

initEventCreate.<mark>initMouseEvent</mark>("click");

<span style="color: #999;">// 点击触发</span>

eleClickDispatch.addEventListener("click", function() {

eleClickAdded.dispatchEvent(initEventCreate);

});

}</pre>

</div>

</div>

<!-- another API -->

<div id="input" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>input</h2>

<h3>概述</h3>

<p>表示表单元素的输入事件。此事件为HTML5新增。</p>

<h3>语法</h3>

<pre>element.addEventListener(<em>"input"</em>, fn);</pre>

<h3>其他说明</h3>

<p>比方说Autocomplete这些组件效果，需要侦听用户的输入行为。传统方法为侦听<code>keydown</code>或<code>keyup</code>等键盘事件，但存在一个问题，就是用户鼠标右键粘贴内容的时候是无法捕获的。还需要再做额外的处理，这人力成本显然上升了。</p>

<p><code>input</code>事件专为这种情况诞生。只要输入框里面有内容输入，才会执行响应的事件。性能更高，适应性更好。</p>

<h3>示例</h3>

<p>还可以输入<span id="inputLeftText">140</span>字：</p>

<p><textarea id="areaTextInput" cols="50" rows="5" placeholder="别愣着，赶快输入内容..."></textarea></p>

<h3>代码</h3>

<pre>还可以输入&lt;span id="inputLeftText">140&lt;/span>字：

&lt;textarea id="areaTextInput" cols="50" rows="5" placeholder="别愣着，赶快输入内容...">&lt;/textarea></pre>

<p>JS</p>

<pre>var eleAreaInput = document.querySelector("#areaTextInput")

, eleNumLeftInput = document.querySelector("#inputLeftText");

if (eleAreaInput && eleNumLeftInput) {

eleAreaInput.addEventListener("input", function() {

var left = 140 - this.value.trim().length;

if (left < 10) {

eleNumLeftInput.style.color = "#cd0000";

} else {

eleNumLeftInput.style.color = "";

}

eleNumLeftInput.innerHTML = left;

});

</div>

</div>

<!-- another API -->

<div id="hashchange" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>window.onhashchange</h2>

<h3>概述</h3>

<p>url地址hash改变时候触发。</p>

<h3>语法</h3>

<pre>window.onhashchange = function(event) {

<span style="color: #999;">// 该干嘛干嘛嘛</span>

};</pre>

<p><code>event</code>对象的参数如下：</p>

<ul>

<li><code>target</code> 表示浏览器上下文(<code>window</code>).</li>

<li><code>type</code> 表示事件类型。</li>

<li><code>oldURL</code> 表示之前的URL地址。</li>

<li><code>newURL</code> 当前的URL地址。</li>

</ul>

<h3>其他说明</h3>

<p>IE6-IE8浏览器下，不支持<code>window.addEventListener("hashchange", fn)</code>的用法。</p>

<p>IE8浏览器下，原本不支持<code>oldURL</code>和<code>newURL</code>. 这里做了重置处理，也是支持这两个参数。不过恕我水平有限，还需要做一个额外的小处理。就是在事件的最上面加上，以阻止默认支持的方法执行：</p>

<pre>event = event || {};</pre>

<p>或者：</p>

<pre>if (!event) return;</pre>

<h3>示例</h3>

<p>点击下面三个文字链接：</p>

<p><a href="#red" class="link">变红色</a> &nbsp; <a href="#blue" class="link">变蓝色</a> &nbsp; <a href="#yellow" class="link">变黄色</a></p>

<p><span id="hashChangeColor">你的意思是我会变色？</span></p>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;a href="#red" class="link">变红色&lt;/a> &lt;a href="#blue" class="link">变蓝色&lt;/a> &lt;a href="#yellow" class="link">变黄色&lt;/a>

&lt;span id="hashChangeColor">你的意思是我会变色？&lt;/span></pre>

<p>JS</p>

<pre>var eleHashChange = document.querySelector("#hashChangeColor");

if (eleHashChange) {

var hashKeyColor = {

red: "红色",

blue: "绿色",

yellow: "黄色"

};

window.<mark>onhashchange</mark> = function(event) {

<span style="color: #999;">// for IE8</span>

event = event || {};

<span style="color: #999;">// for all</span>

var oldUrl = event.oldURL, newUrl = event.newURL;

var hashOld = '', hashNew = '';

if (oldUrl && newUrl) {

hashOld = oldUrl.split("#")[1] || '';

hashNew = newUrl.split("#")[1] || '';

<span style="color: #999;">// 颜色变化</span>

eleHashChange.style.color = hashKeyColor[hashNew]? hashNew: '';

<span style="color: #999;">// 变化日志</span>

eleHashChange.insertAdjacentHTML("beforeEnd",

'&lt;br>&lt;span style="color: #666;">颜色从' + (hashKeyColor[hashOld] || '继承色') + '变成' + (hashKeyColor[hashNew] || '继承色;&lt;/span>')

);

}

};

}</pre>

</div>

</div>

<!-- another API -->

<div id="getComputedStyle" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>window.getComputedStyle</h2>

<h3>概述</h3>

<p>返回元素包含的CSS属性以及对应的属性值。</p>

<h3>语法</h3>

<pre>var <em>style</em> = window.getComputedStyle(<em>element</em>[, <em>pseudoElt</em>]);</pre>

<ul>

<li><code>element</code> 表示DOM元素。</li>

<li><code>pseudoElt</code> 表示伪类。不过这里并不支持。包括IE9浏览器。</li>

</ul>

<h3>其他说明</h3>

<p>要想得到特性属性的CSS值，有两种方式：</p>

<ol start="1">

<li>直接获取。但是，属性名只能是驼峰形式，例如<code>backgroundColor</code>, 而不能是<code>background-color</code>. 如下代码：

<pre>var bgColor = <em>style</em>.backgroundColor;</pre>

<p>不能直接使用<code>"float"</code>属性获得浮动值。需要使用<code>styleFloat</code>：</p>

<pre>var <em>valueFloat</em> = window.getComputedStyle(<em>element</em>)["styleFloat"];</pre>

</li>

<li>使用<code>getPropertyValue</code>方法获取。

<pre>var <em>cssValue</em> = <em>style</em>.getPropertyValue(<em>cssKey</em>);</pre>

<p><code>getPropertyValue</code>获取有两个好处。一是支持短横连接符的写法，如<code>"background-color"</code>; 二是可以直接使用<code>float</code>属性。</p>

</li>

</ol>

<p>更多知识点可参考我的“<a href="http://www.zhangxinxu.com/wordpress/?p=2378">获取元素CSS值之getComputedStyle方法熟悉</a>”这篇文章。</p>

<h3>示例</h3>

<form id="formGetCssValue">

<p>你想知道下图的哪个CSS属性值？</p>

<p>

<img src="mm1.jpg" id="bingoGetCss">

</p>

<p><input id="inputCssValue" size="20" value="float" placeholder="输入CSS属性名称" required pattern="^[a-zA-Z]+(?:\-[a-zA-Z]+)?$"></p>

<p><input type="submit" class="button" value="出现吧~"></p>

<p id="resultCssValue">您输入的属性<code>$key$</code>对应的值是<code>$value$</code>.</p>

</form>

<h3>代码</h3>

<p>HTML</p>

<pre>&lt;form id="formGetCssValue">

&lt;p>你想知道下图的哪个CSS属性值？&lt;/p>

&lt;p>

&lt;img src="mm1.jpg" id="bingoGetCss">

&lt;/p>

&lt;p>&lt;input id="inputCssValue" size="20" value="float" placeholder="输入CSS属性名称" required pattern="^[a-zA-Z]+(?:\-[a-zA-Z]+)?$">&lt;/p>

&lt;p>&lt;input type="submit" class="button" value="出现吧~">&lt;/p>

&lt;p id="resultCssValue">您输入的属性&lt;code>$key$&lt;/code>对应的值是&lt;code>$value$&lt;/code>.&lt;/p>

&lt;/form></pre>

<p>JS</p>

<pre>var eleFormGetCss = document.querySelector("#formGetCssValue")

, eleBingoGetCss = document.querySelector("#bingoGetCss")

, eleInputCssValue = document.querySelector("#inputCssValue")

, eleResultCssValue = document.querySelector("#resultCssValue");

var initHtmlResult = '';

if (eleFormGetCss && eleBingoGetCss && eleInputCssValue && eleResultCssValue) {

initHtmlResult = eleResultCssValue.innerHTML;

eleResultCssValue.innerHTML = '&nbsp;';

eleFormGetCss.addEventListener("submit", function(event) {

var key = eleInputCssValue.value;

var value = window.<mark>getComputedStyle</mark>(eleBingoGetCss).getPropertyValue(key) + "";

eleResultCssValue.innerHTML = initHtmlResult.replace("$key$", key).replace("$value$", value);

event.preventDefault();

});

}</pre>

</div>

</div>

<!-- another API -->

<div id="parse" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>JSON.parse</h2>

<h3>概述</h3>

<p>将JavaScript对象表示法(JSON)字符串转换为对象。</p>

<h3>语法</h3>

<pre>JSON.parse(text[, reviver])</pre>

<ul>

<li><code>text</code> 表示要解析的JSON字符串。</li>

<li><code>reviver</code> 可选。如果是一个转换结果的函数，将为对象的每个成员调用此函数。如果成员包含嵌套对象，则先于父对象转换嵌套对象。对于每个成员，会发生以下情况：</li>

<ul>

<li>如果<code>reviver</code>返回一个有效值，则成员值将替换为转换后的值。</li>

<li>如果<code>reviver</code>返回它接收的相同值，则不修改成员值。</li>

<li>如果<code>reviver</code>返回<code>null</code>或<code>undefined</code>, 则删除成员。</li>

</ul>

</ul>

<p>返回一个对象或数组。</p>

<h3>其他说明</h3>

<p>如果此函数引发JavaScript分析器错误（如“SCRIPT1014：无效字符”），则输入文本将不遵循JSON语法。 若要更正此错误，请执行下列操作之一：

修改<code>text</code>参数以遵循JSON语法。有关更多信息，请参见JSON对象的<a href="http://go.microsoft.com/fwlink/?LinkId=125203">BNF syntax notation</a>（BNF语法表示法）。</p>

<h3>示例</h3>

<pre>try {

JSON.parse('{}'); <span style="color: #999;">// {}</span>

JSON.parse('true'); <span style="color: #999;">// true</span>

JSON.parse('"foo"'); <span style="color: #999;">// "foo"</span>

JSON.parse('[1, 5, "false"]'); <span style="color: #999;">// [1, 5, "false"]</span>

JSON.parse('null'); <span style="color: #999;">// null</span>

} catch (e) {

console.error("Parsing error:", e);

}</pre>

<pre>var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';

var contact = JSON.parse(jsontext);

document.write(contact.surname + ", " + contact.firstname);

<span style="color: #999;">// 输出: Aaberg, Jesper</span></pre>

</div>

</div>

<!-- another API -->

<div id="stringify" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>JSON.stringify</h2>

<h3>概述</h3>

<p>将JavaScript值转换为JavaScript对象表示法(Json)字符串。</p>

<h3>语法</h3>

<pre>JSON.stringify(value [, replacer] [, space])</pre>

<ul>

<li><code>value</code> 表示要转换的JavaScript值（通常为对象或数组）。</li>

<li><code>replacer</code> 可选。表示转换结果的函数或数组。

<ul>

<li>如果<code>replacer</code>为一个函数，则<code>JSON.stringify</code>会调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回<code>undefined</code>, 则排除成员。根对象的键是一个空字符串：<code>""</code>.</li>

<li>如果<code>replacer</code>为一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当<code>value</code>参数也为数组时，将忽略<code>replacer</code>数组。</li>

</ul>

</li>

<li><code>space</code> 可选。表示向返回值JSON文本添加缩进、空白和换行符以使其更易于读取。

<ul>

<li>如果省略<code>space</code>，则将生成返回值文本，而没有任何额外空白。</li>

<li>如果<code>space</code>为一个数字，则返回值文本在每个级别缩进指定数目的空格。 如果<code>space</code>大于<code>10</code>, 则文本缩进<code>10</code>个空格。</li>

<li>如果<code>space</code>是非空字符串（例如<code>"\t"</code>），则返回值文本在每个级别中缩进字符串中的字符数。</li>

<li>如果<code>space</code>是长度大于<code>10</code>个字符的字符串，则使用前<code>10</code>个字符。</li>

</ul>

</li>

</ul>

<p>返回值为一个包含JSON文本的字符串。</p>

<h3>其他说明</h3>

<p>目前，本项目中，<code>JSON.parse</code>和<code>JSON.stringify</code>两个方法都源自开源项目：<a href="https://github.com/douglascrockford/JSON-js/blob/master/json2.js">https://github.com/douglascrockford/JSON-js/blob/master/json2.js</a>.</p>

<h3>示例</h3>

<pre>assert(JSON.stringify({}) === '{}');

assert(JSON.stringify(true) === 'true');

assert(JSON.stringify("foo") === '"foo"');

assert(JSON.stringify([1, "false", false]) === '[1,"false",false]');

assert(JSON.stringify({ x: 5 }) === '{"x":5}');

JSON.stringify({x: 5, y: 6}); <span style="color: #999;">// '{"x":5,"y":6}' or '{"y":6,"x":5}'</span></pre>

</div>

</div>

<!-- another API -->

<div id="create" class="zxx_api_detail">

<div class="zxx_api_content">

<h2>Object.create</h2>

<h3>概述</h3>

<p>根据指定的原型对象和属性创建新的对象。</p>

<h3>语法</h3>

<pre>Object.create(proto [, propertiesObject ])</pre>

<ul>

<li><code>proto</code> 表示新创建对象的原型。</li>

<li><code>propertiesObject</code> 可选参数。表示一个对象值，可以包含若干个属性，属性名为新建对象的属性名，属性值为那个属性的属性描述符对象。</li>

</ul>

<h3>其他说明</h3>

<p>如果<code>proto</code>参数的值不是<code>null</code>或者对象，则会抛出<code>TypeError</code>异常。</p>

<h3>示例</h3>

<p>可参考MDN: <a href="https://developer.mozilla.org/zh-CN/docs/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a>.</p>