jQuery系列05
一、浏览器事件、文档加载事件
1.浏览器事件
(1)error()不推荐使用已过时，当出现错误的时候，触发该事件。
(2)resize()当页面大小发生改变时，触发该事件。通常绑定在window上。
(3)scroll()当元素发生滚动时，触发该事件。可以绑定在任何的元素上。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> <style type="text/css"> div { width: 100px; height: 100px; border:1px solid #ccc; overflow: auto; } </style> </head> <body> <p>hello</p> <div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> </body> <script> $(function(){ $("div").scroll(function(){ console.log("scrolling"); }) }) </script> </html>
将scroll事件绑定在div上，当div产生滚动时，在控制台会打印出相应的消息。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> </head> <body> </body> <script> $(window).resize(function(){ console.log("大小改变"); }) </script> </html>
将事件resize绑定在window对象上，当窗口的大小发生改变时，会触发resize事件，并在控制台窗口打印相应的内容。
2.文档加载事件
(1)ready()ready事件在DOM结构绘制完成之后就会执行，这样能确保在大量的媒体文件（视频，音频）没有加载出来之前，js代码一样可以执行
(2)load()load事件必须等待整个网页的所有内容全部加载完毕之后才会执行， 当一个网页中存在大量的媒体文件时，就会出现一种情况，网页文档已经呈现出来，但是由于网页中的内容内有全部加载完毕，导致load不能够及时被触发。
(3)网页加载的过程
1.解析HTML结构
2.加载外部脚本和样式表文件
3.解析并执行脚本代码
4.构造DOM模型（ready）
5.加载图片等外部文件
6.页面加载完毕（load）
ready事件有三种书写方式
$().ready(function(){})//不推荐使用，默认事件挂在document对象上
$(document).ready(function(){})//可读性比较强
$(function(){})//简写方式，开发中经常使用这种写法
二、绑定事件处理器
1.bind(event,function(),bool)
event：要绑定的事件
function()：事件处理函数
bool：是否支持事件冒泡
2.delegate(element,event,function())
element：选择要绑定的元素
event：绑定的事件
function()：事件处理函数
以上两种方法可以使用，但是已经被on所代替，在开发中尽量使用on()
3.on(event,function())
event：绑定的事件
function：事件处理函数
on(event,element,function())
event：绑定的事件
element：绑定事件的元素
function()：事件处理函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> </head> <body> <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> </ul> </body> <script> $(function () { $("ul").on("click","li", function () { console.log($(this).html()); }) }) </script> </html>
当点击li时，控制台会打印li里面的内容。
4.off(event,function())移除指定的事件。
off(event,element,function())
event：移除的事件名称
element：要移除事件的元素
function()移除事件处理函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js"></script> <style> ul li { float: left; list-style:none; margin-left: 10px; } span { display:block; width: 100px; height: 50px; background: #cccccc; text-align: center; line-height: 50px; color: #ffffff; } .on { background: black; cursor:pointer; } </style> </head> <body> <div> <p>this is p</p> </div> </body> <script> var fn=function(){ console.log("hello"); } $(function () { $("div").on("click mouseover","p",fn); $("div").off("mouseover","p",fn); }) </script> </html>
首先给div添下面的p通过on()添加两个事件，click和mouseover，然后通过off()移除mouseover事件。
5.one(event,data,function())
event：要绑定的事件
function()：事件处理函数
data：可选，规定传递到函数的额外数据。
one()方法也是在指定的元素上添加一个或多个事件，但是不同的是，通过one()添加的事件只能触发一次。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquery-3.2.1.min.js" type="text/javascript"></script> </head> <body> <p>this is p</p> </body> <script> $(function(){ $("p").one("click", function () { console.log($(this).html()); }) }) </script> </html>
第一次点击时，在控制台会打印p中的内容，但是再次点击时不会触发该事件。
6.unbind()移除bind()绑定的事件
7.undelegate()移除delegate()绑定的事件
三、事件对象
1.event.target------------------>触发事件的元素。
2.event.currentTarget-------->事件绑定的元素。
3.event.delegateTarget------>受委托绑定的事件，如果未使用事件委托，则返回值为currentTarget，即事件绑定的元素。
4.event.pageX------------------>相对于文档左边缘的坐标
5.event.pageY------------------>相对于文档上边缘的坐标
6.event.type--------------------->显示触发了那种类型的事件
7.event.preventDefault-------->阻止默认的行为发生（例如点击a标签时会跳转页面）
8.enevt.stopPropagation----->阻止冒泡事件继续向上执行
