setTimeout面试题,事件相关
<!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>