The interaction between JavaScript and HTML is achieved through events. JavaScript uses an asynchronous event-driven programming model. When something specific happens to the document, browser, element, or object related to it, the browser will generate an event. If JavaScript cares about a specific type of event, it can register a handler to be called when that type of event occurs.
Event flow
The event flow describes the order in which events are received from the page. For example, if there are two nested divs and the inner div is clicked, will the inner div trigger the click event first or the outer div? There are currently three main models
IE's event bubbling: the event is initially received by the most specific element, and then propagates upwards to less specific elements
Netscape's event capture: less specific nodes receive events earlier, while the most specific elements receive events last, contrary to event bubbling
DOM event flow: DOM level 2 events stipulate that the event flow includes three stages, the event capture stage, which is in the target stage, and the event bubbling stage. The first thing that happens is the event capture, which provides an opportunity to intercept the event, and then the actual target receives the event. , and finally the bubble sentence stage.
Opera, Firefox, Chrome, and Safari all support DOM event streaming. IE does not support event streaming and only supports event bubbling
If there is the following html, click on the div area
Test Page<br></head><br><body><br> /html><br><br><br>
<br>
</div>
<p><img border="0" alt="Untitled" src="http://files.jb51.net/file_images/article/201304/201304120922134.png">Event handler </p>
<p>
<strong>We also call it an event listener. An event is a certain action performed by the user or the browser itself. For example, click, load, moseover, etc. are all event types (commonly known as event names), and the method to respond to an event is called an event handler or event listener or event handler. The event handler name is: on event type. </strong>
</p>Understanding this, let’s see how to add event handlers to elements <p>
</p>Each event supported by the HTML event handler element can be specified using an HTML attribute with the same name as the corresponding event handler. The value of this attribute should be executable JavaScript code. We can add a click event handler for a button <p>
</p>
<p></p>
<p></p>
<div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="45117" class="copybut" id="copybut45117" onclick="doCopy('code45117')"><u> The code is as follows:</u></a></span><input type="button" value="Click Here" onclick="alert('Clicked!');" /></div>
<div class="codebody" id="code45117">
<br>The HTML event handler can contain specific actions to be performed, or it can call scripts defined elsewhere on the page , the example just now can be written like this <br>
</div>
<br><p></p>
<div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="23091" class="copybut" id="copybut23091" onclick="doCopy('code23091')"><u> The code is as follows:</u></a></span><input type="button" value="Click Here" onclick="showMessage();" /></div> <script type="text/javascript"><div class="codebody" id="code23091"> function showMessage() {<br> alert('Clicked!');<br> }<br><br><br>It is convenient to write event handlers in HTML, but it has two disadvantages. <br>
</div>First of all, there is a loading order problem. If the event handler is loaded after the html code, the user may click a trigger event such as a button before the event handler is loaded. There is a time difference problem. <br>
Secondly, writing HTML code and JavaScript code in this way are tightly coupled, making maintenance inconvenient. <p>
</p>JavaScript designated event handler Specifying an event handler through JavaScript is to assign a method to the event handler attribute of an element. Each element has its own event handler attribute. These attribute names are usually in lowercase, such as onclick, etc. By setting the value of these attributes to a method, you can specify the event handler, as follows <p>
</p>
<p></p>
<p></p>
<div class="codetitle">Copy code<span><a style="CURSOR: pointer" data="62612" class="copybut" id="copybut62612" onclick="doCopy('code62612')"><u> The code is as follows:</u><div class="codebody" id="code62612">
<br><input id="btnClick" type="button" value="Click Here" />
<p> <script type="text/javascript"><br> var btnClick = document.getElementById('btnClick');<br> btnClick.onclick = function showMessage() {<br> alert(this.id );<br> }; The current element, so the result of clicking the button is: btnClick<br>
<br>Another advantage of this is that we can delete the event handler and just set the onclick attribute of the element to null</p>
</div>
<br>DOM2 event handler DOM2-level events define two methods for handling the operations of specifying and removing event handlers: addEventListener and removeEventListener. All DOM nodes contain these two methods, and they all accept three parameters: event type, event handling method, and a Boolean value. If the final Boolean parameter is true, it means that the event handler is called in the capture phase. If it is false, it is processed in the event bubbling phase.
<p>We can write the example just like this</p>
<p></p>
<p></p>
<p>Copy code</p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="44049" class="copybut" id="copybut44049" onclick="doCopy('code44049')"> The code is as follows:<u></u></a><input id="btnClick" type="button " value="Click Here" /></span>
</div> <script type="text/javascript"><div class="codebody" id="code44049"> var btnClick = document.getElementById('btnClick');<br> btnClick.addEventListener('click', function() { alert( this.id);<p> }, false);<br> </script><br><br><br>The above code adds a handler for the click event to the button, which is triggered during the bubbling phase. The same method, this program also runs under the scope of the element, but there is a benefit, we can add multiple handlers for the click event <br><br></p>
</div>
<br><br>Copy code<div class="codetitle">
<span><a style="CURSOR: pointer" data="26296" class="copybut" id="copybut26296" onclick="doCopy('code26296')"> The code is as follows:<u></u></a><input id="btnClick" type="button" value="Click Here" /></span>
</div> <script type="text/javascript"><div class="codebody" id="code26296"> var btnClick = document.getElementById('btnClick');<br> btnClick.addEventListener('click', function() { alert( this.id);<p> }, false);<br> btnClick.addEventListener('click', function() {<br> alert('Hello!');<br> }, false);<br> </script><br><br><br>In this way, the two event handlers will be executed in the order they were added after the user clicks the button. <br>
<br>Event handlers added through addEventListener can only be removed through removeEventListener. The parameters when removed are the same as when added. This means that the anonymous function we just added cannot be removed, because although the anonymous function has the same method body, The handles are different, so when we remove the event handler, we can write like this </p>
</div>
<br><p></p>
<p>Copy code</p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="52999" class="copybut" id="copybut52999" onclick="doCopy('code52999')"> The code is as follows:<u></u></a><input id="btnClick" type="button " value="Click Here" /></span>
</div> <script type="text/javascript"><div class="codebody" id="code52999"> var btnClick = document.getElementById('btnClick');<br> var handler=function() { alert(this.id); <p> }<br> btnClick.addEventListener('click', handler, false);<br> btnClick.removeEventListener('click', handler, false);<br> </script><br><br><br>The following is the commonplace IE compatibility issue. . . </p>
<p>IE does not support the addEventListener and removeEventListener methods. Instead, it implements two similar methods, attachEvent and detachEvent. Both methods receive the same two parameters, event handler name and event handler method. Since IE refers to Supports event bubbling, so added programs will be added to the bubbling stage. </p>
<p>Using attachEvent to add an event handler can be as follows</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="72889" class="copybut" id="copybut72889" onclick="doCopy('code72889')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code72889">
<br><input id="btnClick" type="button " value="Click Here" />
<p> <script type="text/javascript"><br> var btnClick = document.getElementById('btnClick');<br> var handler=function() {<br> alert(this.id); <br> }<br> btnClick.attachEvent('onclick', handler);<br> </script><br></p>
</div>
<br>The result is undefined, which is very strange. We will introduce it later
<p>Event handlers added using attachEvent can be removed through detachEvent. The conditions are also the same parameters. Anonymous functions cannot be removed. </p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="39777" class="copybut" id="copybut39777" onclick="doCopy('code39777')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code39777">
<br><input id="btnClick" type="button " value="Click Here" />
<p> <script type="text/javascript"><br> var btnClick = document.getElementById('btnClick');<br> var handler=function() {<br> alert(this.id); <br> }<br> btnClick.attachEvent('onclick', handler);<br> btnClick.detachEvent('onclick', handler);<br> </script><br></p>
</div>
<br><strong>Cross-browser event handlers</strong>
<p>We can see from the previous content that the methods of adding and removing event handlers are different in different browsers. If we want to write a cross-browser event handler, we must first understand the processing in different browsers. Differences in event handlers</p>
<p>There are several main differences between addEventListener and attachEvent when adding event handlers <br>1. The number of parameters is different. This is the most intuitive. addEventListener has three parameters, attachEvent has only two, and the event handler added by attachEvent can only Occurs in the bubbling phase. The third parameter of addEventListener can determine whether the added event handler is processed in the capturing phase or the bubbling phase (we generally set it to the bubbling phase for browser compatibility) </p>
<p>2. The first parameter has different meanings. The first parameter of addEventListener is the event type (such as click, load), while the first parameter of attachEvent specifies the event processing function name (onclick, onload) </p>
<p>3. The scope of event handlers is different. The scope of addEventListener is the element itself, this refers to the triggering element, and the attachEvent event handler will run in the global variable. This is window, so the example just now will Return undefined, not element id</p>
<p>4. When adding multiple event handlers for an event, the execution order is different. addEventListener will be added in the order of addition, while attachEvent will add multiple event handlers in an irregular order (when there are few methods added, most of them will be executed in the order added). The order of addition is executed in reverse order, but if you add too much, it will become irregular), so when adding more than one, it is better not to rely on the order of execution. If it depends on the order of function execution, it is best to handle it yourself, and don't count on the browser. </p>
<p>After understanding these four differences, we can try to write a method of adding event handlers with better browser compatibility</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="39113" class="copybut" id="copybut39113" onclick="doCopy('code39113')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code39113">
<br>function addEvent(node, type, handler) {<br> if (!node) return false;<br> if (node.addEventListener) {<br> node.addEventListener(type, handler, false) ;<br> ; return true;<br> return true; > return false; Solution, if it is IE, we add on to the type. There is currently no solution to the fourth problem, and users need to pay attention to it. Under normal circumstances, everyone will not add many event handlers. It feels good to try this method. But we did not solve the third problem. Since the handler scope is different, if there is an operation such as this in the handler, an error will occur. Under IE, in fact, most functions will have this operation. <br>
<br><br><br><br><br>Copy code<br>
</div>
<br> The code is as follows:<p></p>
<div class="codetitle">function addEvent(node, type, handler) {<span> if (!node) return false;<a style="CURSOR: pointer" data="14546" class="copybut" id="copybut14546" onclick="doCopy('code14546')"> if (node.addEventListener) {<u> node.addEventListener(type, handler, false);</u> return true;</a> }</span> else if (node .attachEvent) {</div> . 🎜> } <div class="codebody" id="code14546">
<br><br>In this way, this problem can be solved, but a new problem has arisen. This is equivalent to adding an anonymous event handler. The event handler cannot be canceled with detachEvent. There are many solutions. For solutions, we can learn from the master’s approach. John Resig, the founder of jQuery, did this <br>
<br><br><br><br><br>Copy code<br><br><br> The code is as follows:<br><div class="codebody" id="code88247">
<br>function addEvent(node, type, handler) {<br> if (!node) return false;<br> if (node.addEventListener) {<br> node.addEventListener(type, handler, false) ;<br> Node[type handler] = function() {<br> node['e' type handler](window.event);<br> Return true;<br> } <br> return false;<br> }<br><br><br>When canceling the event handler<br>
<br><br><br>
</div>
<br>Copy code<p></p>
<div class="codetitle"> The code is as follows:<span><a style="CURSOR: pointer" data="40586" class="copybut" id="copybut40586" onclick="doCopy('code40586')"><u>function removeEvent(node, type, handler) {</u> if (!node) return false;</a> if (node.removeEventListener) {</span> node.removeEventListener(type, handler, false);</div> return true;<div class="codebody" id="code40586"> }<br> else if (node .detachEvent) {<br> node.detachEvent('on' type, node[type handler]); 🎜> }<br><br><br>John Resig uses closures very cleverly and looks very good. <br>
<br><br>Event Object<br><br>
<br>When an event on the DOM is triggered, an event object event is generated. This object contains all information related to the event, including the element that generated the event, event type and other related information. All browsers support event objects, but in different ways. <br>
<br>Event object in DOM A DOM-compatible browser will generate an event object and pass it into the event handler. Apply the addEvent method we just wrote</div>
<br><p><strong></strong>Copy code</p>
<p></p> The code is as follows:<p></p>
<p>var btnClick = document.getElementById('btnClick'); </p>
<div class="codetitle"> addEvent(btnClick, 'click', handler);<span><a style="CURSOR: pointer" data="83570" class="copybut" id="copybut83570" onclick="doCopy('code83570')"><br>点击button的时候我们可以看到弹出内容是click的弹窗
<p>event对象包含与创建它的特定事件有关的属性和方法，触发事件的类型不同，可用的属性和方法也不同，但是所有事件都会包含</p>
<p>
</p></a><table border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="130">
<p align="center"><strong>属性/方法</strong></p>
</td>
<td valign="top" width="91">
<p align="center"><strong>类型</strong></p>
</td>
<td valign="top" width="79">
<p align="center"><strong>读/写</strong></p>
</td>
<td valign="top">
<p align="center"><strong>说明</strong></p>
</td>
</tr>
<tr>
<td valign="top" width="130">bubbles</td>
<td valign="top" width="91">Boolean</td>
<td valign="top" width="79">只读</td>
<td valign="top">事件是否冒泡</td>
</tr>
<tr>
<td valign="top" width="130">cancelable</td>
<td valign="top" width="91">Boolean</td>
<td valign="top" width="79">只读</td>
<td valign="top">是否可以取消事件的默认行为</td>
</tr>
<tr>
<td valign="top" width="130">currentTarget</td>
<td valign="top" width="91">Element</td>
<td valign="top" width="79">只读</td>
<td valign="top">事件处理程序当前处理元素</td>
</tr>
<tr>
<td valign="top" width="130">detail</td>
<td valign="top" width="91">Integer</td>
<td valign="top" width="79">只读</td>
<td valign="top">与事件相关细节信息</td>
</tr>
<tr>
<td valign="top" width="130">eventPhase</td>
<td valign="top" width="91">Integer</td>
<td valign="top" width="79">只读</td>
<td valign="top">事件处理程序阶段：1 捕获阶段，2 处于目标阶段，3 冒泡阶段</td>
</tr>
<tr>
<td valign="top" width="130">preventDefault()</td>
<td valign="top" width="91">Function</td>
<td valign="top" width="79">只读</td>
<td valign="top">取消事件默认行为</td>
</tr>
<tr>
<td valign="top" width="130">stopPropagation()</td>
<td valign="top" width="91">Function</td>
<td valign="top" width="79">只读</td>
<td valign="top">取消事件进一步捕获或冒泡</td>
</tr>
<tr>
<td valign="top" width="130">target</td>
<td valign="top" width="91">Element</td>
<td valign="top" width="79">只读</td>
<td valign="top">事件的目标元素</td>
</tr>
<tr>
<td valign="top" width="130">type</td>
<td valign="top" width="91">String</td>
<td valign="top" width="79">只读</td>
<td valign="top">被触发的事件类型</td>
</tr>
<tr>
<td valign="top" width="130">view</td>
<td valign="top" width="91">AbstractView</td>
<td valign="top" width="79">只读</td>
<td valign="top">与事件关联的抽象视图，等同于发生事件的window对象</td>
</tr>
</tbody>
</table>在事件处理程序内部，this始终等同于currentTarget，而target是事件的实际目标。
<p>要阻止事件的默认行为，可以使用preventDefault（）方法，前提是cancelable值为true，比如我们可以阻止链接导航这一默认行为</p>
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="7733" class="copybut" id="copybut7733" onclick="doCopy('code7733')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code7733">
<br>document.getElementsByTagName('a').onclick = function (e) {<br> e.preventDefault();<br> }<br>
</div>
<br>stopPaopagation()方法可以停止事件在DOM层次的传播，即取消进一步的事件捕获或冒泡。我们可以在button的事件处理程序中调用stopPropagation（）从而避免注册在body上的事件发生
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="35245" class="copybut" id="copybut35245" onclick="doCopy('code35245')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code35245">
<br>var handler = function (e) {<br> alert(e.type);<br> e.stopPropagation();<br> }<br> addEvent(document.body, 'click', function () { alert('Clicked body')});<br> var btnClick = document.getElementById('btnClick');<br> addEvent(btnClick, 'click', handler);<br>
</div>
<br>若是注释掉e.stopPropagation(); 在点击button的时候，由于事件冒泡，body的click事件也会触发，但是调用这句后，事件会停止传播。
<p>IE中的事件对象访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在<br></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="99592" class="copybut" id="copybut99592" onclick="doCopy('code99592')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code99592">
<br>var handler = function () {<br> var e = window.event;<br> alert(e.type);<br> }<br> var btnClick = document.getElementById('btnClick');<br> btnClick.onclick = handler;<br>
</div>
<br>我们通过window.event取得了event对象，并检测到了其类型，可是如果事件处理程序是通过attachEvent添加的，那么就会有一个event对象被传入事件处理程序中
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="33109" class="copybut" id="copybut33109" onclick="doCopy('code33109')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code33109">
<br>var handler = function (e) {<br> alert(e.type);<br> }<br> var btnClick = document.getElementById('btnClick');<br> attachEvent(btnClick, handler);<br>
</div>
<br><br>当然这时候也可以通过window对象访问event，方便起见，我们一般会传入event对象，IE中所有的事件都包含以下属性方法
<p>
</p>
<table border="1" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="100">
<p align="center"><strong>属性/方法</strong></p>
</td>
<td valign="top" width="100">
<p align="center"><strong>类型</strong></p>
</td>
<td valign="top" width="100">
<p align="center"><strong>读/写</strong></p>
</td>
<td valign="top">
<p align="center"><strong>说明</strong></p>
</td>
</tr>
<tr>
<td valign="top" width="100">cancelBulle</td>
<td valign="top" width="100">Boolean</td>
<td valign="top" width="100">读/写</td>
<td valign="top">默认为false，设置为true后可以取消事件冒泡</td>
</tr>
<tr>
<td valign="top" width="100">returnValue</td>
<td valign="top" width="100">Boolean</td>
<td valign="top" width="100">读/写</td>
<td valign="top">默认为true，设为false可以取消事件默认行为</td>
</tr>
<tr>
<td valign="top" width="100">srcElement</td>
<td valign="top" width="100">Element</td>
<td valign="top" width="100">只读</td>
<td valign="top">事件的目标元素</td>
</tr>
<tr>
<td valign="top" width="100">type</td>
<td valign="top" width="100">String</td>
<td valign="top" width="100">只读</td>
<td valign="top">被触发的事件类型</td>
</tr>
</tbody>
</table>Cross-browser event objects Although the event objects of DOM and IE are different, based on their similarities, we can still write a cross-browser event object solution
<p></p>
<div class="codetitle">
<span><a style="CURSOR: pointer" data="6001" class="copybut" id="copybut6001" onclick="doCopy('code6001')"><u>Copy code</u></a></span> The code is as follows:</div>
<div class="codebody" id="code6001">
<br>function getEvent(e) {<br> return e | | window.event;<br> }
<p> function getTarget(e) {<br> return e.target || e.scrElement;<br> }</p>
<p> function preventDefault(e) {<br> if (e.preventDefault)<br> e.preventDefault();<br> else<br> e.return Value = false;<br> }</p>
<p> function stopPropagation(e) {<br> if (e.stopPropagation)<br> e.stopPropagation();<br> else<br> e.can celBubble = true;<br> }<br></p>
</div> <br><strong>Common HTML events</strong>
<p>There are some HTML events that we often use. These events are not necessarily related to user operations. They are just briefly mentioned here. For detailed usage, you have to search Baidu and Google </p>
<p>1.load: Triggered on the window when the page is completely loaded, triggered on the img element when the image is loaded, or triggered on the object element when the embedded content is loaded <br>2.unload: The page is completely loaded Triggered on the window after uninstalling, or triggered on the object element after the embedded content is uninstalled<br>3.select: Triggered when the user selects a character in the text box<br>4.change: Triggered when the value of the text box changes after the focus changes<br>5.submit: Triggered when the user submits the form<br>6.resize: Triggered on the window when the window or frame size changes<br>7.scool: When the user scrolls an element with a scroll bar, on the element Trigger<br>8.focus: Triggered on the window and corresponding elements when the page or element gains focus<br>9.blur: Triggered on the window and corresponding elements when the page or element loses focus<br>10.beforeunload: Unload the page Previously triggered on window <br> 11.mousewheel: Not counting HTML, triggered when the user interacts with the page through the mouse wheel and scrolls the page in the vertical direction </p></span>
</div>
</div>
</div></a></span>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="关于query Javascript CSS Selector engine_jquery" href="http://m.php.cn/faq/17500.html">关于query Javascript CSS Selector engine_jquery</a></span><span>Next article：<a class="dBlack" title="关于query Javascript CSS Selector engine_jquery" href="http://m.php.cn/faq/17502.html">关于query Javascript CSS Selector engine_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="http://m.php.cn/about/us.html">About us</a><a href="http://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="http://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
