Jquery 事件

write by 2019-06-11 23:07

1. 介绍¶

CSS是美容师，那么JS是动作师，jQuery 是为事件处理特别设计的。

2. 鼠标事件¶

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

在元素上移动鼠标。
选取单选按钮
双击元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

2.1 鼠标-click¶

当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

语法触发被选元素的 click 事件：

$(selector).click()

添加函数到 click 事件：

$(selector).click(function)

鼠标点击

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>点击这个段落。</p>
</body>
<script>
    $(document).ready(function(){
        $("p").click(function(){
            alert("段落被点击了。");
        });
    });
</script>
</html>

2.2 鼠标-dbclick¶

当双击元素时，触发 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。

提示 dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，则会产生问题。

语法触发被选元素的 dblclick 事件

$(selector).dblclick()

添加函数到 dblclick 事件

$(selector).dblclick(function)

鼠标点击

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>段落被双击了。</p>
</body>
<script>
    $(document).ready(function(){
        $("p").dbclick(function(){
            alert("段落被双击了。");
        });
    });
</script>
</html>

2.3 鼠标-mouseenter¶

当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。

注意：与 mouseover 事件不同，mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发。参见页面底部演示实例。

提示：该事件通常与 mouseleave 事件一起使用。

语法触发被选元素的 mouseenter 事件

$(selector).mouseenter()

添加函数到 mouseenter 事件

$(selector).mouseenter(function)

鼠标进入

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>鼠标移动到该段落。</p>
</body>
<script>
    $(document).ready(function(){
        $("p").mouseenter(function(){
            $("p").css("background-color","yellow");
        });
        $("p").mouseleave(function(){
            $("p").css("background-color","lightgray");
        });
    });
</script>
</html>

2.4 鼠标-mouseleave¶

当鼠标指针离开被选元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。

注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。

区别

mouseout 事件在鼠标离开任意一个子元素及选的元素时触发。
mouseleave 事件只在鼠标离开选取的的元素时触发。

鼠标离开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <p>鼠标移动到该段落。</p>
</body>
<script>
    $(document).ready(function(){
        $("p").mouseenter(function(){
            $("p").css("background-color","yellow");
        });
        $("p").mouseleave(function(){
            $("p").css("background-color","lightgray");
        });
    });
</script>
</html>

2.4 鼠标-hove¶

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter 和 mouseleave 事件。

注意: 如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

语法

$(selector).hover(inFunction,outFunction)

调用

$( selector ).hover( handlerIn, handlerOut )
或者
$( selector ).mouseover( handlerIn ).mouseout( handlerOut );

如果只规定了一个函数，则它将会在 mouseover 和 mouseout 事件上运行。调用:

$(selector).hover(handlerInOut)
或者
$( selector ).on( "mouseover mouseout", handlerInOut );

参数描述 inFunction 必需。规定 mouseover 事件发生时运行的函数。 outFunction 可选。规定 mouseout 事件发生时运行的函数。

鼠标悬浮

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <p>鼠标移动到该段落。</p>
</body>
<script>
    $(document).ready(function(){
        $("p").hover(function(){
            $("p").css("background-color","yellow");
        },function(){
            $("p").css("background-color","pink");
        });
    });
</script>
</html>

3. 键盘事件¶

3.1 键盘-keypress¶

与 keypress 事件相关的事件顺序：

keydown - 键按下的过程
keypress - 键被按下
keyup - 键被松开
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。

keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。

$(selector).keypress(function)

键盘keypress

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    输入你的名字: <input type="text">
    <p>按键的次数: <span>0</span></p>
</body>
<script>
    i = 0;
    $(function(){
        $("input").keypress(function(){
            $("span").text(i+=1);
        });
    });
</script>
</html>

3.2 键盘-keydown¶

与 keydown 事件相关的事件顺序

keydown - 键按下的过程
keypress - 键被按下
keyup - 键被松开
当键盘键被按下时发生 keydown 事件。

keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

提示：请使用 event.which 属性来返回哪个键盘键被按下。
$(selector).keydown(function)

键盘-keydown

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    输入你的名字: <input type="text">
</body>
<script>
    i = 0;
    $(function(){
        $("input").keydown(function(){
            $(this).css("background-color","yellow");
        });
        $("input").keyup(function(){
            $(this).css("background-color","red");
        });
    });
</script>
</html>

3.3 键盘-keyup¶

keyup 事件相关的事件顺序：

keydown - 键按下的过程
keypress - 键被按下
keyup - 键被松开
当键盘键被松开时发生 keyup 事件。

keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。

$(selector).keyup(function)

code 同上

4. 表单事件¶

4.1 表单-submit¶

当提交表单时，会发生 submit 事件。该事件只适用于 <form> 元素。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

$(selector).submit(function)

表单-submit

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<form action="">
    姓名: <input type="text" name="name" value="name"> <br>
    年龄: <input type="text" name="age" value="age"> <br>
    <input type="submit" value="提交">
</form>
</body>
<script>
    $(function () {
        $("form").submit(function () {
            alert("提交表单")
        })
    });
</script>
</html>

4.2 表单-change¶

当元素的值改变时发生 change 事件（仅适用于表单字段）。change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

表单-change

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<p>在输入框写一些东西，然后按下 enter 键或点击输入框外部。</p>
<input type="text" name="" id="">
</body>
<script>
    $(function () {
        $("input").change(function () {
            alert("文本已经被修改");
        })
    });
</script>
</html>

4.3 表单-focus¶

当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 focus 事件。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

表单-focus

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        span {
            display:none;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="">
    <span>输入你的名字</span>
    <p>点击输入框获取焦点</p>

</body>
<script>
    $(function () {
        $("input").focus(function () {
            $("span").css("display","inline").fadeOut(2000);
        })
    });
</script>
</html>

4.4 表单-blur¶

当元素失去焦点时发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。

提示：该方法常与 focus() 方法一起使用。

表单-blur

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        span {
            display:none;
        }
    </style>
</head>

<body>
    <input type="text" name="" id="">
    <span>输入框失去了焦点</span>
    <p>点击输入框获取焦点</p>

</body>
<script>
    $(function () {
        $("input").blur(function () {
            $("span").css("display","inline").fadeOut(2000);
        });
    });
</script>
</html>

5. 文档/窗口事件¶

5.1 事件-load¶

load() 方法在 jQuery 版本 1.8 中已废弃。
load() 方法添加事件处理程序到 load 事件。
当指定的元素已加载时，会发生 load 事件。
该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。
根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。

注意：还存在一个名为 load() 的 jQuery AJAX 方法。根据不同的参数决定调用哪个方法。

事件-load

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("img").load(function(){
                alert("图片已载入");
            });
        });
    </script>
</head>

<body>
    <img src="http://lc-a7isutdu.cn-n1.lcfile.com/21f252311d682f285452/k1.png" alt="图片文字描述" width="304" height="236">
    <p><b>注意:</b> 这个事件在不同浏览器效果有所不同，如果图片已缓存该事件则不会触发。</p>
</body>
<script>
    $(function () {
        $("input").blur(function () {
            $("span").css("display","inline").fadeOut(2000);
        });
    });
</script>
</html>

5.2 事件-resize¶

当调整浏览器窗口大小时，发生 resize 事件。resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

$(selector).resize(function)

事件-resize

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    <p>窗口重置了 <span>0</span> 次大小。</p>
    <p>尝试重置窗口大小。</p>
</body>
<script>
    x=0;
    $(function () {
        $(window).resize(function () {
            $("span").text(x+=1);
        });
    });
</script>
</html>

5.3 事件-scroll¶

当用户滚动指定的元素时，会发生 scroll 事件。

scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

$(selector).scroll(function)

事件-scroll

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<p>尝试滚动 div 中的滚动条</p>
    <div class="cmz" style="border:1px solid black;width:200px;height:100px;overflow:scroll;">
        为了体面的活着。<br>
        为了体面的活着。<br>
        为了体面的活着。<br>
        为了体面的活着。<br>
        为了体面的活着。<br>
        为了体面的活着。<br>
        为了体面的活着。<br>
        生活虽一地鸡毛，但是依然要高歌欢进<br>
        生活虽一地鸡毛，但是依然要高歌欢进<br>
        生活虽一地鸡毛，但是依然要高歌欢进<br>
        生活虽一地鸡毛，但是依然要高歌欢进<br>
    </div>
<p>滚动了 <span>0</span> 次。</p>
</body>
<script>
    x = 0;
    $(function () {
        $(".cmz").scroll(function () {
            $("span").text(x += 1);
        });
    });
</script>
</html>

5.4 事件-unload¶

unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。
Firefox 与 Chrome 会阻止弹窗，所以没办法看到效果。
当用户离开页面时，会发生 unload 事件。
当发生以下情况下，会触发 unload 事件：
点击某个离开页面的链接在地址栏中键入了新的 URL，使用前进或后退按钮，关闭浏览器窗口，重新加载页面
unload() 方法规定当 unload 事件发生时会发生什么。
unload() 方法只应用于 window 对象。