jQuery——入门（四）JQuery 事件
一、事件初探
加载文档完成触发：
window.onload = function(){} //js
$(window).load(function(){}) //jquery
$(document).ready(function(){})
事件可以多次执行
代码可以简写：$(function(){})
二、JQuery中常见的事件
在网页浏览过程中，会触发各种各样的事件，这些事件的处理能很大程度的提升用户使用的体验，对于常见事件的了解是JS程序开发必不可少的一部分。
| 方法 | 描述 |
|---|---|
| bind() | 向匹配元素附加一个或更多事件处理器 |
| blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
| change() | 触发、或将函数绑定到指定元素的 change 事件 |
| click() | 触发、或将函数绑定到指定元素的 click 事件 |
| dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
| delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
| die() | 移除所有通过 live() 函数添加的事件处理程序。 |
| error() | 触发、或将函数绑定到指定元素的 error 事件 |
| event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
| event.pageX | 相对于文档左边缘的鼠标位置。 |
| event.pageY | 相对于文档上边缘的鼠标位置。 |
| event.preventDefault() | 阻止事件的默认动作。 |
| event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
| event.target | 触发该事件的 DOM 元素。 |
| event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
| event.type | 描述事件的类型。 |
| event.which | 指示按了哪个键或按钮。 |
| focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
| keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
| keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
| keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
| live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
| load() | 触发、或将函数绑定到指定元素的 load 事件 |
| mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
| mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
| mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
| mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
| mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
| mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
| mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
| one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
| ready() | 文档就绪事件（当 HTML 文档就绪可用时） |
| resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
| scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
| select() | 触发、或将函数绑定到指定元素的 select 事件 |
| submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
| toggle() | 绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。 |
| trigger() | 所有匹配元素的指定事件 |
| triggerHandler() | 第一个被匹配元素的指定事件 |
| unbind() | 从匹配元素移除一个被添加的事件处理器 |
| undelegate() | 从匹配元素移除一个被添加的事件处理器，现在或将来 |
| unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
1、事件快捷键绑定方式
语法：$(selector).eventType(fn);
案例：$(".box").click(function(){... ...})；给box选中的元素增加一个鼠标单击事件
问题：不适用于未来元素/新增元素；比较消耗系统资源
代码案例：
<body>
<button>按钮</button>
<p>我是一个p标签内容</p>
<div class="box"></div>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$("p").toggle(500);
});
var newEle = $("<button></button>");
newEle.text("新增按钮");
newEle.prependTo($(".box"));
});
</script>
</body>2、JQuery在快捷事件处理方式之外提供了四种绑定事件的方式
(1)、bind（遗留项目中比较多出现的绑定方式 | 不支持未来元素）
(2)、live（遗忘 | 支持未来元素，但是新版本已经删除）
(3)、delegate（处理遗留项目时选择的兼容模式绑定项目 | 支持未来元素）
(4)、on（官方及项目组规范 | 不支持 / 支持未来元素）
同时对应了四种解除事件监听的四种方式：
unbind 、die 、undelegate 、off
3、绑定事件
语法：bind（type、[data]、function）
type为事件类型，包括 blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseout、mouseenter、mouseleave、change、select、submit、keyup等。
data为方法传递的参数，可以忽略
function是用来绑定的处理函数
例如：为id为box的div元素绑定单击事件
$("#box").bind("click",function(){alert（“box被点击”）;})
(1)、绑定单个事件
bind（“事件名”，function(){}）
注：当页面元素加载时，bind查询到对应的DOM节点，一个一个绑定对应的事件
当页面元素是后续动态添加进去的，bind绑定事件在新元素上是没有效果的
不适用于未来元素 / 新增元素
on（“事件名”，function(){}）
注：官方推荐的事件绑定的方式，也是项目中用的最多的方式
不适用于未来元素 / 新增元素
(2)、绑定多个事件
一个jquery对象可以绑定多个事件，对应一个函数 jquery对象.bind（“事件名1 事件名2 ...”，function(){}）
还可以绑定多个事件各个事件各对应一个方法
jquery对象.bind（{“事件名1”：function(){},"事件名2"：function(){},...}）
on（{“事件名1”：function(){},"事件名2"：function(){},...}） 适用于未来元素 / 新增元素
代码案例：
<body>
<button>hello</button>
<script>
$(function(){
// $("button").click(function(){
// alert("hello world");
// });
// $("button").click(function(){
// alert("hello world2");
// });
$("button").bind("click mouseover",function(){
alert("hello world");
});
$("button").bind({
"mouseover":function(){alert("hello world");},
"mouseout":function(){alert("你好世界");}
});
});
</script>
</body>(3)、一次性绑定事件 —— on 官方推荐
on（“事件名”，function(){}）
代码案例：
<body>
<button>点击</button>
<div></div>
</body>
<script type="text/javascript">
$(function(){
var i=0;
// $("button").on("click",function(){
// i++;
// $("div").html(i);
// });
//jquery对象.one("事件名",function(){}) 一次性事件
$("button").one("click",function(){
i++;
$("div").html(i);
});
});
</script>(4)、live && die
live方法：可以对动态新增的元素添加绑定事件，解决了bind（）不能给动态新增元素绑定事件的问题
注意：新版本中已经删除了live（）绑定事件，通常使用delegate（...）、on（...）进行替代
适用于未来元素 / 新增元素 ，测试时请使用jquery1.9以下版本
例如：$("button").live("click",function(){
$("p").toggle(500);
})
die方法：解除指定元素上的所有事件
注意：die方法不再建议使用，旧版本替换可以使用$(selector).off()函数进行解除
(5)、解除绑定 / 事件移除 —— unbind、off
unbind("事件名") 可以解除多个事件
off("事件名") 官方推荐的解除事件绑定的方式，项目中用的最多的解除方式
注：解除绑定事件 jquery对象.unbind(参数) 参数是可选的，如果里面没有参数的时候 解除jquery对象上所有的事件绑定
如果有参数， 代表可以指定去解除单个或多个事件
代码案例：
<body>
<button>按钮</button>
<script type="text/javascript">
$(function(){
$("button").bind("click mouseover mouseout",function(){
alert("hello world");
});
// $("button").unbind("click mouseover"); //只有在鼠标离开按钮时出现hello world，鼠标点击和鼠标放上去均无效
// $("button").unbind(); //解除所有事件
$("button").off("click mouseover"); //和$("button").unbind("click mouseover")实现效果一样
});
</script>
</body>4、事件合成
JQuery有两个合成事件：hover（）方法和toggle（）方法
hover(enter,leave)
jquery对象.hover(函数1,函数2) 鼠标放上去时 调用函数1 鼠标离开时 调用函数2
用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,触发指定的第二个函数.
toggle(fn1,fn2,…fnN)
模拟光标连续点击事件.第一次单击元素触发fn1,第二次点击时触发fn2,依次类推.随后的单击都会重复对这几个函数的轮番调用.
jquery9版本已经删除了此种应用
代码案例：
<body>
<div>hello world</div>
</body>
<script type="text/javascript">
$(function(){
$("div").hover(function(){
$(this).css("background-color","red"); //鼠标放上去显示红色背景
},function(){
$(this).css("background-color",""); //鼠标离开时没有背景
});
$("div").toggle(function(){ //点击三次hello world时依次显示红色、蓝色、绿色
$(this).css("background-color","red");
},
function(){
$(this).css("background-color","blue");
},
function(){
$(this).css("background-color","green");
});
})
</script>5、 事件冒泡 && 默认行为
(1)、阻止事件冒泡的方法：
在绑定的事件中加入event参数，并在函数中增加event.stopPropagation()调用就可以阻止事件冒泡，也可以使用return false阻止冒泡
案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#parent{width:400px;height:400px;background:red}
#child{width:200px;height:200px;background:yellow}
</style>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
<script type="text/javascript">
$(function(){
$("#parent").click(function(e){
alert("hello,parent被点击");
});
$("#child").click(function(ev){
alert("hi，child被点击");
ev.stopPropagation(); //阻止冒泡 ，点击child时，只会显示“hi，child被点击”
})
});
</script>
</html>(2)、阻止事件默认行为：
event中还有一个方法：event.preventDefault()；作用是阻止默认行为，如表单提交！
代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止默认行为</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="#">我是超链接</a>
<div>我是超链接</div>
</body>
<script type="text/javascript">
$(function(){ //第一种
// $("a").click(function(e){
// e.preventDefault();
// });
$("a").on("click",function(e){ //第二种
e.preventDefault();
});
});
</script>
</html>
(1)、模拟操作可以使用trigger（）方法来完成
例如：$("#box").click(function(){
$("#btn").trigger("click"); //模拟操作触发的#btn的click事件
})
代码案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button>点击我，有惊喜</button>
<input type="text" />
<div>hello,需要点击我模拟</div>
<script type="text/javascript">
$(function(){
$("button").click(function(){
alert("果然有惊喜"); //2.点击button，再次弹出“果然有惊喜”
});
$("button").trigger("click"); //1.开始弹出“果然有惊喜”
$("div").click(function(){
$("button").trigger("click"); //3.点击div时，弹出“果然有惊喜”
})
$("input").focus(function(){ //4.input边框变为红色
$(this).css("border","1px solid red");
});
$("input").trigger("focus");
$("input").triggerHandler("focus");//triggerHandler()不会触发默认行为,而只执行事件代码.
});
</script>
</body>
</html>
(2)、模拟操作 —— 传递数据
trigger（type，[data]）方法有两个参数，第一个参数是要触发的事件类型，第二个参数是传递给事件处理函数的附加数据，以数组的形式传递
#（“#btn”）.bind("click",function(event,mes,mes2){alert(mes+","+mes2);
})
$("#btn").trigger("click",["hello","world!"]);
注意：在事件绑定时的event参数是不可以省略的，但在调用时可以不指定