  * 事件触发的方法:
  * 1.对象.事件名字()
  * 2.对象.trigger("事件名字")
  * 3.对象.triggerHandle("事件名字"),该方式不能触发浏览器的默认行为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            //文本框获取焦点事件
            $("#txt").focus(function () {
    
    
                console.log("焦点已经获取");
                //显示提示信息
                $("#sp").text("焦点已经获取");
            });

            //按钮的点击事件，触发文本框的焦点事件
            $("#btn").click(function () {
    
    
                //$("#txt").focus();
                //$("#txt").trigger("focus");
                $("#txt").triggerHandler("focus");
            });
        });
    </script>
</head>
<body>
<input type="button" value="获取焦点" id="btn"/>
<input type="text" value="" id="txt"/>
<span id="sp"></span>
</body>
</html>

Event parameter object

       $(function () {
    
    
            $("#dv").mousedown(function (e) {
    
    
                //获取鼠标按下的键值,左键0,中键1,右键2
                // console.log(e.button);
                console.log(e);
            });
        });

Insert picture description here

The case gets the key value that the user pressed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
    
    
            width: 200px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            $("#dv").mousedown(function (e) {
    
    
                //console.log(e.altKey);
                //判断用户按下鼠标的时候，有没有按其他键
                if(e.altKey){
    
    
                    console.log("用户按下了alt键和鼠标");
                }else if(e.shiftKey){
    
    
                    console.log("用户按下了shift键和鼠标");
                }else if(e.ctrlKey){
    
    
                    console.log("用户按下了ctrl键和鼠标");
                }else {
    
    
                    console.log("用户只按下了鼠标");
                }
            });
        });
    </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

Case button to change background color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
    
    
            width: 800px;
            height: 600px;
            background-color: forestgreen;
        }
    </style>
    <script src="../jquery-1.12.1.js"></script>
    <script>
        $(function () {
    
    
            $(document).keydown(function (e) {
    
    
                //获取键值
                //console.log(e.keyCode);
                switch (e.keyCode) {
    
    
                    case 65:
                        $("#dv").css("backgroundColor", "red");
                        break;
                    case 66:
                        $("#dv").css("backgroundColor", "blue");
                        break;
                    case 67:
                        $("#dv").css("backgroundColor", "yellow");
                        break;
                    case 68:
                        $("#dv").css("backgroundColor", "pink");
                        break;
                    case 69:
                        $("#dv").css("backgroundColor", "black");
                        break;
                }
            });
        });
    </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

Event triggering and event parameter objects in jQuery

Event parameter object

The case gets the key value that the user pressed

Case button to change background color

Guess you like