leohxj
3/18/2015 - 2:12 AM

setTimeout面试题，事件相关

setTimeout面试题，事件相关

interview-setTimeout.html
content_copyfile_download
<!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>