<!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>
