jquery——事件

绑定事件的其他方法以及取消绑定事件：：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
           $(function () {
               $('#btn').bind('click mouseover',function () {
                   alert('hello!');

                   $(this).unbind('mouseover');
               })
           })
    </script>
</head>
<body>
    <input type="button" name="" value="press me" id="btn">
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">

           $(function () {
               //给#btn绑定hello事件
               $('#btn').bind('hello',function () {
                   alert('hello!');
               });

               $('#btn').bind('click',function () {
                   alert('click');
               });
               //触发hello事件
               $('#btn2').click(function () {
                   $('#btn').trigger('hello');
                   $('#btn').trigger('click');
               });
           });
    </script>
</head>
<body>
    <input type="button" name="" value="press me" id="btn">
    <input type="button" name="" value="press me2" id="btn2">
</body>
</html>

1.click事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>click事件</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {

            $('#btn').click(function () {
                //重复切换sty样式
                $('.box').toggleClass('sty');
            });
        })
        
    </script>
    <style type="text/css">
        .box{
            200px;
            height:200px;
            background-color: hotpink;
        }

        .sty{
            background-color: chartreuse;
        }
        
    </style>
</head>
<body>
    <input type="button" name="" value="切换" id="btn">
    <div class="box"></div>
</body>
</html>

2.mouseover（）：鼠标进入；mouseout（）：鼠标离开；（进入/离开子元素也触发）

moseenter() : 鼠标进入；mouseleave()：鼠标离开。（进入/离开子元素不触发）

3. 页面滚动事件：

$(window).scroll(function){
    ......
}

4. blur() 元素失去焦点、focus() 元素获得焦点、change() 表单元素的值发生变化

5. mouseup()松开鼠标、mousedown() 按下鼠标、mousemove() 鼠标在元素内部移动

6. keydown() 按下键盘、keypress()按下键盘、keyup() 松开键盘

7. resize() 浏览器窗口大小发生改变

8. submit() 用户提交表单

9.toggle() 根据鼠标点击的次数，依次运行多个函数

10. unload() 用户离开页面的事件