Created
March 18, 2015 02:12
-
-
Save leohxj/db61b0f94e9c4a68c7c8 to your computer and use it in GitHub Desktop.
setTimeout面试题，事件相关
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
| <title>setTimeout</title> | |
| <script type="text/javascript"> | |
| function get(id) { | |
| return document.getElementById(id); | |
| } | |
| window.onload = function () { | |
| //第一个例子：未使用setTimeout | |
| var makeBtn = get('makeinput'); | |
| makeBtn.onmousedown = function (e) { | |
| console.log(e.type); | |
| var input = document.createElement('input'); | |
| input.setAttribute('type', 'text'); | |
| input.setAttribute('value', 'test1'); | |
| get('inpwrapper').appendChild(input); | |
| input.onfocus = function (e) {//观察我们新生成的input什么时候获取焦点的，或者它有没有像原文作者说的那样被丢弃了 | |
| console.info('input focus'); | |
| }; | |
| input.focus(); | |
| input.select(); | |
| } | |
| makeBtn.onclick = function (e) { | |
| console.log(e.type); | |
| }; | |
| makeBtn.onmouseup = function (e) { | |
| console.log(e.type); | |
| }; | |
| makeBtn.onfocus = function () {//观察我们生成按钮什么时候获取焦点的 | |
| console.log('makeBtn focus'); | |
| } | |
| //第二个例子：使用setTimeout | |
| var makeBtn2 = get('makeinput2'); | |
| makeBtn2.onmousedown = function (e) { | |
| console.log(e.type); | |
| var input = document.createElement('input'); | |
| input.setAttribute('type', 'text'); | |
| input.setAttribute('value', 'test1'); | |
| get('inpwrapper2').appendChild(input); | |
| input.onfocus = function (e) {//观察我们新生成的input什么时候获取焦点的，或者它有没有像原文作者说的那样被丢弃了 | |
| console.info('input focus'); | |
| }; | |
| //setTimeout | |
| setTimeout(function () { | |
| input.focus(); | |
| input.select(); | |
| }, 0); | |
| } | |
| makeBtn2.onclick = function (e) { | |
| console.log(e.type); | |
| }; | |
| makeBtn2.onmouseup = function (e) { | |
| console.log(e.type); | |
| }; | |
| makeBtn2.onfocus = function () {//观察我们生成按钮什么时候获取焦点的 | |
| console.log('makeBtn2 focus'); | |
| } | |
| //第三个例子，onkeypress输入的时候少了一个值 | |
| get('input').onkeypress = function () { | |
| get('preview').innerHTML = this.value; | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <h1><code>setTimeout</code></h1> | |
| <h2>1、未使用 <code>setTimeout</code></h2> | |
| <button id="makeinput">生成 input</button> | |
| <p id="inpwrapper"></p> | |
| <h2>2、使用 <code>setTimeout</code></h2> | |
| <button id="makeinput2">生成 input</button> | |
| <p id="inpwrapper2"></p> | |
| <h2>3、另一个例子</h2> | |
| <p> | |
| <input type="text" id="input" value="" /><span id="preview"></span> | |
| </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment