jQuery事件

jQuery

jQuery事件

1. jQuery事件注册

1.1 说明

image-20230327235417196

1.2 语法

image-20230327235428619

1.3 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div></div>
    <script>
        $(function() {
            // 1. 单个事件注册
            $("div").click(function() {
                $(this).css("background", "purple");
            });
            $("div").mouseenter(function() {
                $(this).css("background", "skyblue");
            });
        })
    </script>
</body>

2. jQuery事件处理

2.1 说明

image-20230327235534109

2.2 事件处理 on() 绑定事件

2.21 说明

因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法bind() 、 live() 、delegate() 、on()等，其中最好用的是: on()

2.22 语法

image-20230327235604337

2.23 优势

  • 优势一

image-20230327235645113

  • 优势二

image-20230327235654609

  • 优势三

image-20230327235703307

2.24 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            text-align: center;
            line-height: 100px;
        }

        .current {
            font-size: 25px;
            color: white;
        }
    </style>
</head>

<body>
    <div>123</div>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <ol></ol>
    <script>
        $(function () {
            // 1.单个事件注册
            // $('div').click(function () {
            //     $(this).css('background-color', '#000')
            // })
            // $('div').mouseover(function () {
            //     $(this).css('background-color', 'blue')
            // })

            // 2.事件处理on
            // -  on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
            // - 语法：
            // - element.on(events,[selector],fn)
            // - events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
            // - selector: 元素的子元素选择器 。
            // - fn:回调函数 即绑定在元素身上的侦听函数。

            // on() 方法优势：

            // (1) on() 方法可以绑定多个事件，多个处理事件处理程序。
            $('div').on({
                click: function () {
                    $(this).css('background-color', '#000')
                },
                mouseover: function () {
                    $(this).css('background-color', 'blue')
                },
                mouseout: function () {
                    $(this).css('background-color', 'white')
                }
            })

            // 事件处理程序一样
            // events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。
            $('div').on('mouseover mouseout', function () {
                $(this).toggleClass('current');
            })

            // (2) on() 方法可以事件委派操作 。
            // 事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
            $('ul').on('click', 'li', function () {
                alert(11)
            })

            // (3) on() 方法动态创建的元素，click() 没有办法绑定事件，on() 可以给未来动态生成的元素绑定事件
            $('ol').on('click','li',function () {
                alert(12)
            });
            var li=$('<li>创建的li</li>')
            $("ol").append(li);
        })
    </script>
</body>

</html>

2.25 发布评论案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            margin: 200px auto;
            width: 500px;
            border: 1px solid #000;
            padding: 20px;
        }

        .txt {
            width: 300px;
        }

        ul {
            list-style: none;
            padding-left: 70px;
            width: 300px;
        }

        li {
            line-height: 25px;
            border-bottom: 1px dotted red;
            width: 100%;
            height: 25px;
            display: none;
            ;
        }

        li a {
            float: right;
        }
    </style>
</head>

<body>
    <div class="box" id="weibo">
        <span>微博发布</span>
        <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
        <button>发布</button>
        <ul></ul>
    </div>
    <script>
        $(function () {
            $('button').on('click', function () {
                // ① 点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中。
                var text = $('.txt').val() //textarea属于表单，因此用val
                var li = $('<li></li>')
                li.html($('.txt').val() + '<a href="javascript:;">删除</a>')
                text.length <= 0 ? alert('empty') : $('ul').prepend(li)
                li.slideDown()
                $('.txt').val('')
            })

            // (3) on() 方法动态创建的元素，click() 没有办法绑定事件，on() 可以给未来动态生成的元素绑定事件
            // 事件委派操作
            $('ul').on('click', 'a', function () {
                // ② 点击的删除按钮，可以删除当前的微博留言。
                $(this).parent().slideUp(function(){
                    $(this).remove()
                })
            })
        })
    </script>
</body>

</html>

2.3 事件处理 off() 解绑事件

2.31 说明

image-20230327235836734

2.32 语法

image-20230327235846070

2.33 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ul>
    <p>click me once</p>
    <script>
        $(function () {
            $('div').on({
                click: function () {
                    alert('被点击了')
                },
                mouseover: function () {
                    console.log('鼠标经过')
                }
            })

            // off() 方法可以移除通过 on() 方法添加的事件处理程序。
            // $("p").off() // 解绑p元素所有事件处理程序
            // $("p").off( "click") // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名
            // $("ul").off("click", "li"); // 解绑事件委托
            // 如果有的事件只想触发一次， 可以使用 one() 来绑定事件。

            // 1.事件解绑
            // $('div').off()//off()括号里没参数，事件全部解绑全部
            $('div').off('click')//off()括号里有事件参数，解绑对应事件，其余不变

            // 解绑事件委托
            $('ul').on('click','li', function(){
                alert(11)
            })
            $('ul').off('click','li')

            // 2.one() 来绑定事件触发执行一次
            $('p').one('click', function(){
                alert('被点击有且只有一次')
            });

        })
    </script>
</body>

</html>

2.4 事件处理 trigger() 自动触发事件

2.41 说明

image-20230327235925298

2.42 语法

image-20230327235934311

2.43 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <input type="text" name="" id="">
    <script>
        $(function () {
            $('div').on('click', function () {
                alert(11)
            })       
                 
            // 自动触发事件

            // 1.元素.事件()
            // $('div').click()

            // 2.元素.trigger('事件')
            $('div').trigger('click')

            // 3.元素.triggerHandler('事件')，就是不会触发元素发生的默认行为
            // $('div').triggerHandler('click')

            $('input').on('focus', function () {
                $(this).val('hello')
            })
            $('input').triggerHandler('focus') //不会触发元素发生的默认行为
            // $('input').trigger('focus') //默认光标闪烁

        })
    </script>
</body>

</html>

3. jQuery事件对象

3.1 说明

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

3.2 语法

image-20230328000018646

3.3 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $(function () {
            
            // 事件被触发，就会有事件对象的产生。

            // element.on(events,[selector],function(event) {})

            // 阻止默认行为：event.preventDefault() 或者 return false
            // 阻止冒泡： event.stopPropagation()

            $('div').on('click', function (e) {
                alert('点击了div')
                // e.stopPropagation() 
            })

            $(document).on('click', function (e) {
                alert('点击了文档流')
            })
        })
    </script>
</body>

</html>

3.4 注意

jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~