JQuery 事件操作-组团学

一、页面加载响应事件

$(document).ready()方法代替传统的window.onload()方法，不过两者之间还是有些细微的区别的

在一个页面上可以无限制地使用$(document).ready()方法，各个方法间并不冲突，会按照在代码中的顺序依次执行，而window.onload()方法在一个页面中只能使用一次

在一个文档完全下载到浏览器时（包括所有关联的文件，例如图片、横幅等）就会响应window.onload()方法。而$(document).ready()方法是在所有的DOM元素完全就绪以后就可以调用，不包括关联的文件。例如在页面上还有图片没有加载完毕但是DOM元素已经完全就绪，这样就会执行$(document).ready()方法，在相同条件下window.onload()方法是不会执行的，它会继续等待图片加载，直到图片及其他的关联文件都下载完毕时才执行。显然，把网页解析为DOM元素的速度要比把页面中的所有关联文件加载完毕的速度快得多

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <script type="text/javascript">
            // 事件模块中最重要的一个函数，它极大地提高了web响应速度
            // $(document).ready(function(){});
            
            // 可以简写，当$()不带参数时默认就是document
            // $().ready(function(){})
            
            // 进一步简写
            $(function(){
              
            });
        </script>
	</body>
</html>

注意：如果需要在界面完全加载后在执行的情况下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <script type="text/javascript">
            // window.onload = function(){
            
            // };
            
            //等价上面代码
            $(window).on("load", function(){
                console.log("页面加载完毕");
            });
        </script>
	</body>
</html>

二、事件类型与事件对象

事件	事件处理程序	说明
`load`	`load(fn)`	1、当页面完全加载后在window上触发 2、当图像加载完毕后在`<img>`上触发
`unload`	`unload(fn)`	与`load`相对，当页面完全卸载在window上触发
`scroll`	`scroll(fn)`	当页面滚动的时候在window上触发
`resize`	`resize(fn)`	当页面进行缩放的时候在window上触发
`focus`	`focus(fn)`	在元素获得焦点时触发
`blur`	`blur(fn)`	在元素失去焦点时触发
`click`	`click(fn)`	用户按下鼠标时触发
`dblclick`	`dblclick(fn)`	用户双击鼠标时触发
`mouseover`	`mouseover(fn)`	当鼠标从元素外部进入元素内部时触发
`mouseout`	`mouseout(fn)`	当鼠标离开元素时触发
`mousedown`	`mousedown(fn)`	当鼠标在元素内部按下时触发
`mouseup`	`mouseup(fn)`	当鼠标在元素内部抬起时触发
`mousemove`	`mousemove(fn)`	当鼠标在元素内移动时触发(连续调用)
`keydown`	`keydown(fn)`	按下键盘上的任意键时触发(连续调用)
`keyup`	`keyup(fn)`	抬起键盘上的任意键时触发(连续调用)
`keypress`	`keypress(fn)`	按下键盘的非ctrl/shift/alt/capsLock/ NumLock键(非键盘功能键)(连续调用)
`change`	`change(fn)`	当元素的值发生改变时触发，该事件仅适用于文本域（text field），以及 textarea 和 select 元素
`select`	`select(fn)`	当 textarea 或文本类型的 input 元素中的文本被选择时触发
`submit`	`submit(fn)`	当提交表单时触发，该事件只适用于表单元素

说明：通常情况下在不同浏览器中获取事件对象是比较困难的。针对这个问题，jQuery进行了必要的处理，使得在任何浏览器中都能轻松的获取事件对象以及事件对象的一些属性

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <script type="text/javascript">
            $(function(){
                var $box = $("#box");
                
                // 添加事件
                // 当单击“box”元素时，事件对象就被创建，该事件对象只有事件处理函数才可以访问到。事件处理函数执行完毕后，事件对象就被销毁了
                $box.click(function(event){
                    console.log("sunck is a good man");
                    console.log(event);
                    //获取事件的类型
                    console.log(event.type);
                    
                    //获取到触发事件的元素
                    console.log(event.target);
                    
                    //相对于元素边界
                    console.log(event.offsetX, event.offsetY);
                    
                    //相对于浏览器边界
                    console.log(event.pageX, event.pageY);
                    
                    //相对于屏幕边界
                    console.log(event.screenX, event.screenY);
                    
                    // 返回与事件的目标节点相关的节点
                    // 对于mouseover事件来说，该属性是鼠标指针移到目标节点上时所离开的那个节点
                    // 对于mouseout事件来说，该属性是离开目标时，鼠标指针进入的节点
                    // 对于其他类型的事件来说，这个属性是没有用的
                    console.log(event.relatedTarget);
                });
            });
        </script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <form action="#" method="get">
            <input type="text" name="account" id="account" class="filed" placeholder="账号" /><br />
            <input type="password" name="passwd" id="passwd" placeholder="密码" class="filed" /><br />
            <select name="city" class="filed">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="gz">广州</option>
                <option value="sz">深圳</option>
            </select>
            <input type="submit" value="登陆"/>
        </form>
        <script type="text/javascript">
            $(function(){
                $(".filed").change(function(event){
                    $(this).css("background-color", "red");
                });
                
                $("input").select(function(event){
                    $(this).after(" Text marked!");
                });
                
                $("form").submit(function(event){
                    var flag = confirm("确认提交?");
                    console.log(flag);
                });
            });
        </script>
	</body>
</html>

三、事件的绑定与移除

bind->live->delegate->on

绑定事件

bind(type[, data], fn)

参数	说明
type	事件类型，字符串类型
data	可选参数，作为event.data属性值传递给事件对象的额外数据对象。大多数的情况下不使用该参数
fn	绑定的事件处理程序

问题：

这里用了隐式迭代的方法，如果匹配到的元素特别多的时候，比如如果我在div里放了50个p元素，就得执行绑定50次，对于大量元素来说，影响到了性能

对于尚未存在的元素，无法绑定。点击页面上的按钮，将动态添加一个p元素，点击这个p元素，会发现没有动作响应

live(type[, data], fn)

live的参数和bind一样，live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。一般情况下认为这个context通常就是document了，即live方法把监听器绑定到了document上了，live也正是利用了事件委托机制来完成事件的监听处理。如此的话document负担很重，可不可以别把监听器绑定在document上呢，绑定在就近的父级元素上不就好了。顺应正常逻辑，delegate诞生了

注意：在Jquery1.7中已经移除，相应die()也移除了

delegate(selector, type[, data],fn)

参数	说明
selector	父元素选择器
type	事件类型，字符串类型
data	可选参数，作为event.data属性值传递给事件对象的额外数据对象。大多数的情况下不使用该参数
fn	绑定的事件处理程序

说明：可以解决bind产生的两个问题

原理：这种方式采用了事件委托的概念。不是直接为元素绑定事件，而是为其父元素（或祖先元素也可）绑定事件，当在父元素内任意子元素上点击时，事件会一层层从event target向上冒泡，直至到达你为其绑定事件的元素

事件委托，也叫事件代理。利用事件冒泡给父元素添加事件处理程序，从而使所有子元素都可以处理该事件

优点：

减少DOM操作，提高交互效率

新添加的子元素同样可以响应事件

适用场景：如果所有的子元素都要求实现同样的效果，这个时候可以考虑把事件添加到父元素，让父元素代理子元素去响应事件

适用的事件(必须是冒泡的事件)： click、mousedown、mouseup、keydown、keypress、keymove

注意：绑定是容易了，但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置，这样一层层冒泡上来查找与选择器匹配的元素，又影响到性能了

on(type[, selector][, data], fn)

参数	说明
type	事件类型，字符串类型
selector	可选参数，父元素选择器
data	可选参数，作为event.data属性值传递给事件对象的额外数据对象。大多数的情况下不使用该参数
fn	绑定的事件处理程序

其实是将以前的绑定事件方法作了统一，可以发现无论bind()还是delegate()其实都是通过on()方法实现的，只是参数不同罢了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <button id="button">添加一个p标签</button>
        <div>
        	<p>第一个p标签</p>
        	<p>第二个p标签</p>
        	<p id="p3">第三个p标签</p>
        	<p>第四个p标签</p>
        	<p>第五个p标签</p>
            <span>我是span</span>
        </div>
        <script type="text/javascript">
            $(function(){
                $("#button").click(function(event) {
                	$("div").append("<p>这是一个新的p标签</p>");
                });
                
                // bind()
                // $("div p").bind("click", {x:1, y:2},function(event){
                //     console.log(event);
                // });
                // $("div p").bind("click", function(event){
                //     console.log($(this).text());
                // });
                
                // delegete()
                // $("div").delegate("p", "click", {x:1,y:2},function(event){
                //     console.log(event);
                // });
                // $("div").delegate("p", "click", {x:1,y:2},function(event){
                //     console.log($(this).text());
                // });
                
                // on()
                // $("div").on("click", function(){
                //     console.log($(this).text());
                // });
                $("div").on("click", "p", function(){
                    console.log($(this).text());
                });
            });
        </script>
	</body>
</html>

使用总结
1. 选择器匹配到的元素比较多时，不要用bind()迭代绑定
2. 用id选择器时，可以用bind()
3. 需要给动态添加的元素绑定时，用delegate()或者on()
4. 用delegate()和on()方法，dom树不要太深
5. 尽量使用on()

移除事件

unbind([type][, data])

参数	说明
type	可选参数，规定删除元素的一个或多个事件，由空格分隔多个事件值，如果只规定了该参数，则会删除绑定到指定事件的所有函数
function	可选。规定从元素的指定事件取消绑定的函数名

说明：在unbind()方法中，两个参数都是可选的，如果不填参数，将会删除匹配元素上所有绑定的事件

off(type[, selector][, fn][, map])

常用于移除通过 on() 方法添加的事件处理程序，自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库

参数	说明
type	规定要从被选元素移除的一个或多个事件或命名空间，由空格分隔多个事件值，必须是有效的事件
selector	可选。规定添加事件处理程序时最初传递给 `on()` 方法的选择器
fn	可选。规定从元素的指定事件取消绑定的函数名
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <button id="button">添加一个p标签</button>
        <div>
        	<p>第一个p标签</p>
        	<p>第二个p标签</p>
        	<p id="p3">第三个p标签</p>
        	<p>第四个p标签</p>
        	<p>第五个p标签</p>
            <span>我是span</span>
        </div>
        <script type="text/javascript">
            $(function(){
                $("#button").click(function(event) {
                	$("div").append("<p>这是一个新的p标签</p>");
                });
                
                // $("div p").bind("click", function(event){
                //     console.log($(this).text());
                // });
                // $("div p").unbind("click")
                
                
                // on()
                $("div").on("click", "p", function(){
                    console.log($(this).text());
                });
                $("div").off("click", "p");
            });
        </script>
	</body>
</html>

四、绑定一次性事件处理

one(type[, data], fn)

参数	说明
type	事件类型，字符串类型
data	可选参数，作为event.data属性值传递给事件对象的额外数据对象。大多数的情况下不使用该参数
fn	绑定的事件处理程序

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <script type="text/javascript">
            $(function(){
                $("#box").one("click", function(event){
                    alert("sunck is a good man");
                })
            });
        </script>
	</body>
</html>

五、模拟用户的操作触发事件

triggerHandler(type, dataArr)和trigger(type, dataArr)

作用：方法可以触发bind的自定义事件，并且还可以为事件传递参数

区别：triggerHandle()不会导致浏览器同名的默认行为被执行，但trigger()会导致浏览器同名的默认行为的执行(可以通过返回false阻止默认行为)

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <script type="text/javascript">
            $(function(){
                $("#box").bind("click", function(event, msg1, msg2){
                    alert(msg1+" "+msg2);
                })
                $("#box").trigger("click", ["sunck", "good"]);
            });
        </script>
	</body>
</html>

六、模仿悬停事件

指模仿鼠标移动到一个对象上面又从该对象上面移出的事件，可以通过jQuery提供的hover(over, out)方法实现

参数	说明
over	用于指定当鼠标在移动到匹配元素上时触发的函数
out	用于指定当鼠标在移出匹配元素上时触发的函数

原理：当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件

<!DOCTYPE html>
<html>
	<head>
		    <meta charset="utf-8">
		    <title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <script type="text/javascript">
            $(function(){
                $("div").hover(function(){
                    console.log("鼠标移入");
                }, function(){
                    console.log("鼠标移除");
                });
            });
        </script>
	</body>
</html>

七、阻止事件冒泡与默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style type="text/css">
            #box{
                width: 100px;
                height: 100px;
                background-color: red;
            }
        </style>
        <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        <div id="box"></div>
        <a href="red.html" id="link">点我跳转</a>
        <hr />
        <form action="#" method="get">
            <input type="text" name="account" id="account" class="filed" placeholder="账号" /><br />
            <input type="password" name="passwd" id="passwd" placeholder="密码" class="filed" /><br />
            <input type="submit" value="登陆"/>
        </form>
        <script type="text/javascript">
            $(function(){
                $("body").click(function(event) {
                	$(this).css("background-color", "yellow");
                });
                
                $("#box, input").click(function(event) {
                	$(this).css("background-color", "blue");
                	//阻止冒泡
                	event.stopPropagation();
                });
                
                $("#link").click(function(event){
                    var flag = confirm("您访问的网站存在非法内容，确认访问?");
                    if (flag === false){
                        // //阻止冒泡
                        // event.stopPropagation();
                        // //阻止默认行为
                        // event.preventDefault();
                        
                        // 如果想同时停止事件冒泡和浏览器默认行为，可以在事件处理程序中返回false
                        //这是同时调用stopPropagation()和preventDefault()方法的一种简要写法
                        return false;
                    }
                });
                
                $("form").submit(function(event){
                    var flag = confirm("确认提交?");
                    if (flag === false){
                        return false;
                    } 
                });
            });
        </script>
	</body>
</html>