1、创建一个 html 的文档 hello.html
2、<!doctype html><html><head><m髫潋啜缅eta 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、用浏览器打开，看一下效果。