Fork me on GitHub

事件监听

发表于 | 分类于 | 阅读次数:
字数统计: 1,592 字 | 阅读时长 ≈ 7 分钟

事件监听

JQuery中的常用事件

jQuery中事件的名字，一律没有on。

.click() 鼠标单击触发事件，参数可选（data，function）
.dblclick() 双击触发，同上
.mousedown()/up() 鼠标按下/弹起触发事件
.mousemove() 鼠标移动事件
.mouseover()/out() 鼠标移入/移出触发事件
.mouseenter()/leave() 鼠标进入/离开触发事件*
.hover(func1,func2) 鼠标移入调用func1函数，移出调用func2函数
.focusin() 鼠标聚焦到该元素时触发事件
.focusout() 鼠标失去焦点时触发事件
. focus()/.blur() 鼠标聚焦/失去焦点触发事件（不支持冒泡）
.change() 表单元素发生改变时触发事件
.select() 文本元素被选中时触发事件
.submit() 表单提交动作触发*
.keydown()/up() 键盘按键按下/弹起触发
.on() 多事件的绑定
.off() 移除事件的绑定
.trigger(“event”) 触发事件event调用
.triggerHandler() 触发事件，不会冒泡，不会触发默认事件

jQuery添加事件监听

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson3</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 监听事件
     * 语法：jq 对象.事件名（回调函数）
     * 特征：因为jq对象是集合对象，因此添加事件监听也是批量操作的。
     */
    $('div').click(function () {
       $(this).css('background-color','red');
    });
</script>
</body>
</html>

注意：jq中对于事件的绑定还允许链式声明，不必重复获取jq对象。 且链式声明时除最后一个绑定函数末尾加分号表示绑定结束外，其余函数后均不必写任何内容。

1
2
$("div").mouseenter(function(){$(this).css("background-color","red");})
.mouseleave(function(){$(this).css("background-color","orange");});

例子：

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson3</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    // $('div').dblclick(function () {
    //    $(this).css('background-color','red');
    // }).click(function () {
    //     $(this).css('background-color','green');
    // });
    var $div = $('div');
    $div.dblclick(function () {
       $(this).css('background-color','red');
    }).click(function () {
        $(this).css('background-color','green');
    });
</script>
</body>
</html>

事件监听的特点：

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson3</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 事件监听的特点：
     * jq中添加事件监听不会产生覆盖，并且执行顺序按照添加顺序执行。
     */
    $('div').click(function () {
        console.log('这是第一个回调函数！');
    }).click(function () {
        console.log('这是第二个回调函数！');
    });
    $('div').click(function () {
        console.log('这是第三个回调函数！');
    });
</script>
</body>
</html>

mark

添加事件监听的方法

为jq对象添加事件监听除了本身的方法之外，jq还提供了很多添加事件监听的方法

(1)通过on方法来为jq对象添加事件监听、通过off方法来为jq对象取消事件监听。

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>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson3</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 事件监听的其他添加方式
     * (1)on/off方法
     * 描述：on方法用来给jq对象添加事件监听
     *       off方法用来将jq对象上的事件监听取消
     * 语法：jq对象.on('事件名',回调函数,c,d);
     *       jq对象.off('事件名',b,c);
     */
    $('div').on('click',function () {
        console.log('这是第一个回调函数！');
    }).on('click',function () {
        console.log('这是第二个回调函数！');
    }).on('dblclick',function () {
        console.log('这是双击事件！');
    });
    $('div').on('click',function () {
        console.log('这是第三个回调函数！');
    });
    // 取消掉单击事件
    $('div').off('click');
</script>
</body>
</html>

(2)通过bind方法来给jq对象添加事件监听

bind方法的好处的就是能够给一个jq对象添加多个事件监听。事件名用空格隔开。

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson3</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 事件监听的其他添加方式
     * bind()方法
     * 语法：
     * 将多个事件绑定为同一个事件监听，每一个事件触发都会执行这个唯一的回调函数
     * jq对象.bind('事件名1 事件名2 ...', 回调函数);
     */
    $('.div1').bind('mousedown mouseup',function () {
        console.log('状态改变啦！');
    });
</script>
</body>
</html>

bind还可以采用JSON形式的参数来给jq对象添加事件监听。

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson3</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 事件监听的其他添加方式
     * bind()方法
     * 语法：
     * 将多个事件绑定为同一个事件监听，每一个事件触发都会执行这个唯一的回调函数
     * jq对象.bind('事件名1 事件名2 ...', 回调函数);
     * jq对象.bind({
     *     事件名1：回调函数1,
     *     事件名2：回调函数2,
     *     ...
     * });
     */
    $('.div1').bind({
        mousedown:function () {console.log('鼠标按下')},
        mouseup:function () {console.log('鼠标抬起')}
    });
</script>
</body>
</html>

(3)通过one方法来给jq对象添加事件监听。

但是需要注意通过one方法添加的事件监听是’一次性的’，只能执行一次。

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>lesson3</title>
    <style>
        .div1{  width: 100px; height: 100px; background-color: orange;   }
        .div2{  width: 100px; height: 100px; background-color: skyblue;   }
    </style>
</head>
<body>
<div class="div1"></div>
<br/>
<div class="div2"></div>
<script src="js/jquery-1.12.3.min.js"></script>
<!--<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>-->
<script>
    /**
     * 事件监听的其他添加方式
     * 通过one方法来给jq对象添加事件监听
     * 但是需要注意通过one方法添加的事件监听是'一次性的'，只能执行一次。
     */
    $('.div1').one('click',function () {
        console.log('这是 one 添加的事件监听的回调函数！');
    });
</script>
</body>
</html>
坚持原创技术分享，您的支持将鼓励我继续创作！