jQuery：事件

1、鼠标事件

1、鼠标事件

方法	描述	说明
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时，鼠标在其被选元素的子元素时触发
mouseout( )	触发或将函数绑定到指定元素的mouseout事件	鼠标指针移出时，鼠标在其被选元素的子元素时触发
mouseenter( )	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时，鼠标在其被选元素的子元素时不触发
mouseleave( )	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时，鼠标在其被选元素的子元素时不触发

2、键盘事件

方法	描述	说明
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

3、单个事件

语法：

element.事件(function () {})

$ ( "div" ).click (function () {事件处理程序})

其他事件和原生基本一致。

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等

4、绑定事件

1、bind()

语法：

bind(type,[data],fn);

type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外还可以是自定义事件

[data]：可选函数

fn：处理函数

2、on()

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法∶

element.on (events, [selector] ,fn)

1.events：一个或多个用空格分隔的事件类型，如”click”或”keydown”。

2. selector：元素的子元素选择器

3. fn：回调函数即绑定在元素身上的侦听函数。

示例：

<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
			.current{
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
			$(function(){
				//单个事件
				/* $("div").click(function(){
					$(this).css("background-color","blue");
				});
				$("div").mouseenter(function(){
					$(this).css("background-color","gray");
				}); */
				//多个事件处理on
				/* $("div").on({
					mouseenter: function(){
						$(this).css("background-color","blue");
					},
					mouseleave: function(){
						$(this).css("background-color","red");
					}
				}); */
				//处理相同事件
				$("div").on("mouseenter mouseleave",function(){
					$(this).toggleClass("current");
				});
			});
		</script>
	</body>

on()方法优势∶

1、可以绑定多个事件，多个处理事件处理程序。

2、可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，

就是把事件委派给父元素。

示例：

<body>
		<ul>
			<li>123</li>
			<li>123</li>
			<li>123</li>
		</ul>
		<script>
			//click是绑定在ul身上的，但是触发对象是li
			$("ul").on("click","li",function(){
				alert(1);
			});
		</script>
</body>

5、复合事件

1、hover()

hover()方法相当于mouseover与mouseout事件的组合

语法：

hover(enter,leave);

示例：

<body>
		<p>123</p>
		<script>
			//click是绑定在ul身上的，但是触发对象是li
			$("p").hover(function(){
				alert(11)
			})
		</script>
</body>

2、toggle()

toggle(fn1,fn2,…,fnN)方法用于模拟鼠标连续click事件

语法：

toggle(fn1,fn2,...,fnN);

3、toggleClass()

toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换。

语法：

toggleClass(className);

6、解绑事件

off()方法可以移除通过on()方法添加的事件处理程序。

$ ("p").off()//解绑p元素所有事件处理程序

$ ("p").off("click")//解绑p元素上面的点击事件后面的foo是侦听函数名

$ ("ul") .off("click","li");//解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件。

示例：

<body>
		<div>123</div>
		<ul>
			<li>123</li>
			<li>123</li>
			<li>123</li>
		</ul>
		<p>123</p>
		<script>
			//添加事件
			$(function(){
				$("div").on({
					click: function(){
						console.log("点击");
					},
					mouseenter: function(){
						console.log("鼠标经过");
					}
				});
				$("ul").on("click","li",function(){
					console.log("123");
				});
				//事件解绑
				//解除所有事件
				//$("div").off();
				//解除一个事件
				$("div").off("click");
				$("ul").off("click","li");
				//one()只能触发事件一次
				$("p").one("click",function(){
					console.log("123");
				})
			})
		</script>
</body>

7、自动触发事件

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

语法：

第一种简写形式

element.click ()

第二种自动触发模式

element.trigger("type")

$("p").on("click", function() {
    alert ("hi~");
    });
$("p").trigger("click"); //此时自动触发点击事件，不需要鼠标点击

第三种自动触发模式

element.triggerHandler(type)

示例：

<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<div></div>
		<input type="text">
		<script>
			$(function(){
				$("div").on("click",function(){
					alert(11)
				})
				//自动触发事件
				// 1．元素.事件()
				//$("div").click();//会触发元素的默认行为
				// 2．元素.trigger("事件")
				 //$("div").trigger("click");//会触发元素的默认行为
				//$("input").trigger( "focus");
				//3．元素.triggerHandler("事件")就是不会触发元素的默认行为
				$("div").triggerHandler("click");
				$("input").on("focus", function(){
					$(this).val("你好吗");
				});
				$("input").triggerHandler( "focus");
			});
		</script>
	</body>

事件被触发，就会有事件对象的产生。

element.on(events, [selector] ,function (event) { })

阻止默认行为：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

示例：

<style>
			div{
				width: 100px;
				height: 100px;
				background-color: aquamarine;
			}
</style>
	</head>
	<body>
		<div></div>
		<script>
			$(document).on("click",function(){
				console.log("点击了document");
			});
			$(function(){
				$("div").on("click",function(event){
					//console.log(event);
					console.log("点击了div");
					//阻止冒泡
					event.stopPropagation();
				});
			});
		</script>
</body>

8、jQuery 对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法

语法∶

$.extend ([deep],target,object1,[objectN])

1.deep:如果设为true为深拷贝，默认为false 浅拷贝

2.target:要拷贝的目标对象

3. object1:待拷贝到第一个对象的对象。

4.objectN:待拷贝到第N个对象的对象。

5.浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。

示例：

<body>
		<script>
			//拷贝对象
			$(function(){
				//原来的数组没有对象进行拷贝
				/* var targetObj = {};
				var obj = {
					id:1,
					name:"asd"
				};
				$.extend(targetObj,obj);
				console.log(targetObj); */

				//原来的数组有对象，相同的信息会进行覆盖
				/* var targetObj = {
					id:1
				};
				var obj = {
					id:1,
					name:"asd"
				};
				$.extend(targetObj,obj);
				console.log(targetObj); */
				
				var targetObj = {
					id:1,
					arr:{
						sex:'男'
					}
				};
				var obj = {
					id:1,
					name:"asd",
					arr: {
						age: 20
					}
				};
				//$.extend(targetObj,obj);
				//console.log(targetObj);
				//1．浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
				//targetObj.msg.age = 20;
				// console.log(targetObj);
				// console.log(obj);
			  //2．深拷贝把里面的数据完全复制一份给目标对象如果里面有不冲突的属性,会合并到一起
				 $.extend(true,targetObj,obj);
				 // console.log(targetObj);//会覆盖targetObj里面原来的数据
				 targetObj.arr.age = 20;
				 console.log(targetObj); // arr :{sex:“男", age: 20}
				 console.log(obj);
			})
		</script>
	</body>