在<script></script>中 1.定义函数然后在标签中onclick="函数名"进行绑定 2.通过js给标签绑定事件 var b2Ele = doucment.getElementById("b2") b2Ele.onclick=function(){} 常用事件： 1.onclick 2.onfocus：元素获得焦点（典型例子：输入框默认是某一个数据，当光标移动单击到输入框中的时候，做出相应的事件，比如说默认值清空） onblur：与onfocus相反，（典型例子：当光标移出输入框的时候，做出相应的动作，比如输入框默认值的恢复） 简单的例子： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <input type="text" id="i1" value="对子哈特"> <script> // 找到要绑定事件的标签 var i1Ele = document.getElementById("i1"); // 1. 先绑定获取焦点的事件 i1Ele.onfocus = function (ev) { // 当输入框获取焦点之后要做的事儿 this.value = ""; }; // 2. 绑定失去焦点的事件 i1Ele.onblur = function (ev) { this.value = "对子哈特"; } </script> </body> </html> 3.onchange：当某标签的值发生变化时所要进行的行为 简单示例： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <label for="s1">省</label> <select id="s1"> <option value="">-请选择省-</option> </select> <label for="s2">市</label> <select id="s2"> </select> <script> var data = { "北京": ["昌平区", "海淀区", "朝阳区"], "上海": ["浦东区", "徐汇区", "浦东新区"], "山东": ["烟台", "青岛", "威海"] }; var s1Ele = document.getElementById("s1"); var s2Ele = document.getElementById("s2"); // 1. 拿到所有的省，在s1中生成对应的option选项 for (var i in data){ console.log(i); // 1.1 创建option标签 var tmp = document.createElement("option"); // 1.2 把省信息添加到option标签中 tmp.innerText = i; // 1.3 把创建好的option标签插入到第一个select标签中 s1Ele.appendChild(tmp); } // 当用户选中某个省之后才做的事儿 // 当第一个select框的值发生变化的时候触发的动作 s1Ele.onchange = function (ev) { // 0. 先清空第二个select框的option s2Ele.innerHTML = ""; // 1. 获取用户选中的省 console.log(this.value); var p = this.value; // 2. 根据用户选择的省，去data中找省对应的城市数据 var cityArray = data[p]; // 3. 遍历所有的城市数据，给第二个select框添加option选项 for (var j in cityArray){ console.log(cityArray[j]); // 3.1 生成空的option var tmp = document.createElement("option"); // 3.2 给option添加文本 tmp.innerText = cityArray[j]; // 3.3 把生成的option追加到第二个select标签中 s2Ele.appendChild(tmp); } } </script> </body> </html>