1、创建一个 html 的文档 hello.html
2、<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>hello</title>
</head>
<body>
age : <input name="age" type="text" id="age" />
<input type="button" value="获取input的值" id="btnGetvalue">
<script>
window.onload = function(){
function $(id){ // 定义一个 根据 ID 获取元素的方法
var node = document.getElementById(id) ;
if(!window.attachEvent){ // 兼容不同浏览器的的事件添加
node.attachEvent = function(eName, e){
node.addEventListener(eName, e) ;
}
}
return node ;
}
$("btnGetvalue").attachEvent("click", function(e){ // 添加一个 单击事件
alert(e) ;
console.log(e) ;
alert(ageNode.value);
});
$("age").attachEvent("blur", function(e){ // 添加一个焦点事件
console.log(e);
this.style.color = "red" ;
});
$("age").attachEvent("mouseenter", function(e){ // 添加一个鼠标进入事件
console.log(e);
this.style.backgroundColor = "green" ;
});
$("age").attachEvent("mouseout", function(e){ // 添加一个鼠标移出事件
console.log(e);
this.style.backgroundColor = "white" ;
});
}
</script>
</body>
</html>
3、定义一个 根据 ID 获取元素的方法 (兼容不同浏览器的的事件添加)
添加一个 单击事件
添加一个焦点事件
添加一个鼠标进入事件
添加一个鼠标移出事件
4、用浏览器打开，看一下效果。