<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="d1" class="c">嘎嘎</div> <div id="d2" class="c">咕咕</div> 用户名：<input type="text" name="username" id="username" value="" /> <button type="button" id="b1">我是一个按钮</button> <script type="text/javascript" src="../images/jquery-3.4.1.min.js"></script> <script type="text/javascript"> document.getElementById("d1").onclick = function(){ //todo alert("我是js原生绑定点击事件"); } $("#d2").click(function(){ alert("我是jQuery绑定点击事件"); }) /* 失去焦点 */ /* $("#username").blur(function(){ alert("blur事件"); }) */ /* 得到焦点 */ /* $("#username").focus(function(){ alert("focus事件"); }) */ /* 键盘事件 */ /* 键盘按下 */ /* $("#username").keydown(function(event){ alert("keydown事件:"+event.keyCode); }) */ /* 键盘按下 */ /* $("#username").keypress(function(event){ alert("keydown事件:"+event.keyCode); }) */ /* 键盘抬起 */ $("#username").keyup(function(event){ alert("keydown事件:"+event.keyCode); }) /* 鼠标事件 */ /* 鼠标按下 */ /* $("#b1").mousedown(function(){ alert("鼠标按下"); }) */ /* 鼠标抬起 */ /* $("#b1").mouseup(function(){ alert("鼠标抬起"); }) */ /* 鼠标移动 */ /* $("#b1").mousemove(function(){ alert("鼠标移动"); }) */ /* 鼠标移出 */ /* $("#b1").mouseout(function(){ alert("鼠标移出"); }) */ /* 鼠标移入 */ $("#b1").mouseover(function(){ alert("鼠标移入"); }) </script> </body> </html>