onsubmit表单验证:当表单提交的时候，会触发的事件
<body>
<form action="1.php">
用户名: <input type="text" name="userName" /><br>
<input type="submit" />
</form>
</body>
<script>
window.onload =function () {
var oForm = document.getElementsByTagName('form')[0];
var oInput = document.getElementsByName('userName')[0];
oForm.onsubmit = function () {
if (oInput.value == '') {
alert('请输入用户名');
return false;
}
};
};
</script>
onchange: 一般用于select标签（选中一个列表项，则触发此事件）
<body>
<select id="sel">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="tianjin">天津</option>
</select>
</body>
<script>
window.onload = function (){
var oSel = document.getElementById('sel');
oSel.onchange = function () {
alert(this.value);
}
}
</script>
oninput:
当输入框值改变的时候会触发的事件,实时监听到输入框的改变，
无论用什么方式赋值，都可以监听到值得改变 （IE9以上）
onpropertychange:
当输入框值改变的时候会触发的事件 (会执行几次)（IE9以下）
<script>
window.onload = function () {
var oInput = document.getElementsByTagName('input')[0];
// oInput.oninput = function () {
// alert(this.value);
// }
oInput.onpropertychange = oInput.oninput = function () {
alert(this.value);
}
}
</script>
onfocus: 获取焦点
onblur: 失去焦点
placeholder:属于H5的新属性，低版本的浏览器是不兼容，只能放置文字
<style>
#box {
position: relative;
}
input {
width: 300px;
height: 40px;
outline: none;
padding-left: 3px;
}
#box span {
position: absolute;
color: #ccc;
left: 8px;
top: 12px;
}
</style>
<body>
<div id="box">
<input type="text" />
<!-- 就是提示文字 -->
<!-- 给span添加背景图片就够了 -->
<span>这是提示文字</span>
</div>
</body>
<script>
window.onload = function () {
var oInput = document.getElementsByTagName('input')[0];
var oSpan = document.getElementsByTagName('span')[0];
oInput.oninput = oInput.onpropertychange = function () {
oSpan.style.display = 'none';
}
}
//点击文字获取焦点
oSpan.onclick = function () {
//获取焦点
oInput.focus();
}
//获取
oInput.onfocus = function () {
oSpan.style.display = 'none';
}
//失去
oInput.onblur = function () {
if (this.value == '') {
oSpan.style.display = 'block';
}
}
}
</script>