jquery--jquery事件（元素、鼠标、键盘等）/绑定事件/自定义事件

jquery事件

事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数，依次运行多个函数
unload() 用户离开页面

绑定事件的其他方式

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

取消绑定事件

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

stop()用法

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>鼠标移入移出</title>
 9 
10     <style type="text/css">
11         .box{
12             width:200px;
13             height:200px;
14             margin:100px auto 0;
15             background-color:gold;
16         }
17 
18         .son{
19             width:100px;
20             height:100px;
21             background-color:red;
22         }
23     </style>
24 
25     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
26     <script type="text/javascript">
27         $(function(){
28             /* 进入子元素时会触发
29             $('#div1').mouseover(function(){
30                 $(this).stop().animate({marginTop:50});   //这里加入stop()，鼠标多次移动不会统计多次，只记录第一和最后一次
31             })
32             $('#div1').mouseout(function(){
33                 $(this).stop().animate({marginTop:100});
34             })
35             */
36 
37             //进入子元素时不会触发
38             /*
39             $('#div1').mouseenter(function(){
40                 $(this).animate({marginTop:50});
41             })
42             $('#div1').mouseleave(function(){
43                 $(this).animate({marginTop:100});
44             })
45             */
46 
47             //hover()同时为mouseenter和mouseleave事件指定处理函数
48             $('#div1').hover(function(){
49                 $(this).stop().animate({marginTop:50});
50             },function(){
51                 $(this).stop().animate({marginTop:100});
52             })
53         })
54     </script>
55 </head>
56 <body>
57 
58     <div class="box" id="div1">
59         <div class="son"></div>
60     </div>
61 
62 </body>
63 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>input框事件</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             //$('#text01').focus(); //元素获得焦点
14 
15             // 获取焦点的时候-有光标的时候
16             $('#text01').focus(function(){
17                 //alert('focus');
18             })
19 
20             // 失去焦点-光标离开的时候
21             $('#text01').blur(function(){
22                 //alert('blur')
23             })
24 
25             //输入框内的内容发生变化，失去焦点后触发
26             $('#text01').change(function(){
27                 //alert('change')
28             })
29 
30             ////按键松开后就触发
31             $('#text01').keyup(function(){
32                 alert('keyup')
33             })
34 
35         })
36     </script>
37 </head>
38 <body>
39 
40 <input type="text" name="" id="text01">
41 
42 </body>
43 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>juqery其他事件</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         window.onload=function(){}
13         $(window).load=function(){}  //等同于上面的写法
14         $(document).ready=function(){}  //ready的写法
15         $(function(){})  //ready的简写
16 
17         $(window).resize(function(){  //浏览器窗口的大小发生改变
18             console.log('2');
19         })
20 
21     </script>
22 </head>
23 <body>
24 
25 </body>
26 </html>

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>juqery绑定事件</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             $('#btn').bind('click mouseover',function(){
14                 alert('hello!');
15 
16                 $(this).unbind('mouseover');
17             })
18         })
19 
20     </script>
21 </head>
22 <body>
23 
24     <input type="button" name="" value="按钮" id="btn">
25 
26 </body>
27 </html>

主动触发与自定义事件

主动触发
可使用jquery对象上的trigger方法来触发对象上绑定的事件。

自定义事件
除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。

//给element绑定hello事件
element.bind("hello",function(){
    alert("hello world!");
});

//触发hello事件
element.trigger("hello");

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquery自定义事件</title>    <!--除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。-->
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             $('#btn').bind('a',function(){
14                 alert('hello!');
15             })
16             $('#btn').bind('click',function(){
17                 alert('click')
18             })
19 
20             $('#btn2').click(function(){
21                 $('#btn').trigger('a');
22                 $('#btn').trigger('click');
23             })
24         })
25 
26     </script>
27 </head>
28 <body>
29 
30     <input type="button" name="" value="按钮" id="btn">
31     <input type="button" name="" value="按钮2" id="btn2">
32 
33 </body>
34 </html>

posted on 2019-12-24 20:47 cherry_ning 阅读(508) 评论(0) 收藏举报

刷新页面返回顶部

cherry_ning

jquery--jquery事件（元素、鼠标、键盘等）/绑定事件/自定义事件

jquery事件

主动触发与自定义事件

导航

公告