下边的这个是html和css代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*.div1{*/ /* margin-top: 10px;*/ /* margin-bottom: 20px;*/ /*}*/ div{ margin-bottom: 10px; } button{ margin-right: 20px; margin-bottom: 20px; } </style> </head> <body> <div class="div1"> datatime:<input type="date"> </div> <div class="div2"> username:<input type="text" id="username"> </div> <div class="div3"> password:<input type="password"> </div> <button οnclick="on_click()" style="display: block">点一下</button>//style="display: block"这个是给button变成块级元素,块级元素,自动换行 <button οndblclick="db_click()" style="display: block">点两下</button> <div> on-change:<input type="text" οnchange="on_change()">//这个是当有修改的时候触发 </div> <div> on-blur:<input type="text" οnblur="on_blur()">//这个是当光标离开的时候触发 </div> <div> on-input:<input type="text" οninput="on_input()">//这个是当输入的时候触发这个事件 </div> <div class="miao"> <select οnchange="on_change()" style="margin-right: 30px"> <option>1</option> <option>2</option> <option>3</option> </select> <select οnchange="on_change()" style="margin-right: 30px"> <option>4</option> <option>5</option> <option>6</option> </select> <select οnchange="on_change()" style="margin-right: 30px"> <option>4</option> <option>5</option> <option>6</option> </select> </div> </body> <script src="监听.js"></script> </html>
这下边是调用的js代码:
js代码写的是一些监控事件,如下:
function on_click(){ console.log("你是不是点我了") alert("这个 是干啥的") } function db_click(){ console.log('你是不是点我两下') } function on_change(){ console.log('你是不是改我东西了,小老弟 ') alert("你是不是改我东西了,小老弟") } function on_blur(){ console.log('你是不是移动我鼠标了') } function on_input(){ console.log('你是不是输入新内容了小老弟') }