jQuery元素绑定事件

2020-04-13 19:00 默默不语阅读(326) 评论(0) 编辑收藏举报

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