1. 页面加载完成之后事件：Dom和jQuery对比
$( function(){ } ); 和 window.onload = function(){} 的区别？
它们分别是在什么时候触发？
- jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签，并创建好 DOM 对象之后就会马上执行。
- 原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成。
它们触发的顺序？
- jQuery 的页面加载完成之后先执行
- 原生 js 的页面加载完成之后后执行
它们执行的次数？
- 原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
- jQuery 的页面加载完成之后，是全部把注册的 function 函数，依次顺序全部执行。
window.onload = function(){}只会执行最后定义的那一个；
$( function(){ } );会从上到下依次执行。
2. jQuery中其它的事件处理方法
- click() 它可以绑定单击事件，以及触发单击事件
- mouseover() 鼠标移入事件
- mousemove() 鼠标移动事件 （在绑定区域内移动，一般和鼠标移入事件相联系）
- mouseout() 鼠标移出事件
- bind() 可以给元素一次性绑定一个或多个事件。
- unbind() 跟 bind 方法相反的操作，解除事件的绑定。
- one() 使用上跟 bind 一样。但是 one 方法绑定的事件每个只会响应一次。
- live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#panel {
width: 300px;
border: 1px solid #0050D0;
}
.head {
padding: 5px;
background: #96E555;
cursor: pointer; cursor允许鼠标点击
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
------------------------测试-------------------------------
</script>
</head>
<body>
<div id="panel">
<h5 class="head">我是陆亿行-2021-02-01</h5>
<button>按 钮</button>
</div>
</body>
</html>
1、click() 事件
blur change事件同理，和Dom相比省去了on。
<script type="text/javascript">
$(function () {
$("h5").click(function () {
这是绑定单击事件
alert("h5单击事件 == click方法绑定");
});
$("button").click(function () {
$("h5").click(); 不传function,只调用click函数是触发事件；
}) 触发单击事件的前提是要有绑定单击事件
});
</script>
2、鼠标事件：mouseover() 、mousemove() 、mouseout()
<script type="text/javascript">
$(function () {
//鼠标移入
$("h5").mouseover(function () {
alert("我进来了");
});
//鼠标移动
$("h5").mousemove(function () {
alert("我正在动");
});
//鼠标移出
$("h5").mouseout(function () {
alert("我出去了");
});
});
</script>
5、bind事件、unbind事件、one事件
<script type="text/javascript">
$(function () {
//bind绑定一个事件
$("h5").bind("click", function () {
alert("bind绑定的单击事件："+$(this).text());
});
//bind绑定同时绑定多个事件，空格隔开
$("h5").bind("click mouseover mouseout", function () {
alert("bind绑定的多个事件："+$(this).text());
});
//同时绑定多个事件类型/处理程序
$("h5").bind( {
click:function () {
alert("bind绑定的click事件："+$(this).text()); },
mouseover:function (){
alert("bind绑定的mouseover事件："+$(this).text());},
mouseout:function (){
alert("bind绑定的mouseout事件："+$(this).text());}
} );
$("h5").unbind("click"); //移除一个
$("h5").unbind("click mouseover"); //移除多个，空格隔开
$("h5").unbind(); //无参，全部移除
});
</script>
在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
8.live事件
<script type="text/javascript">
$(function () {
$("h5").click(function () {
alert('h5单击事件 == click方法绑定');
});
$('<h5 class="head">我才是陆亿行-2021-02-01</h5>').appendTo( $("#panel") );
});
</script>
用click绑定的单击事件，只会给本来存在的h5标签绑定单击事件，当再次创建一个h5标签时，不再具有单击事件，如果想让新创建的h5标签也具有单击事件，此时需要用live事件进行绑定。
<script type="text/javascript">
$(function () {
$("h5").live("click",function () {
alert('h5单击事件 == live方法绑定');
});
$('<h5 class="head">我才是陆亿行-2021-02-01</h5>').appendTo( $("#panel") );
});
</script>
3. 事件的冒泡
什么是事件的冒泡？
事件的冒泡是指：父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。 因此，会被响应两次，但事实上，我们只希望响应一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
--------------------填入内容-------------------------------------------
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
</body>
</html>
父元素为div元素，子元素为span元素。
如果这么写的话：
<script type="text/javascript">
$(function () {
$("#content").click(function () {
alert('我是div');
});
$("span").click(function () {
alert('我是span');
});
})
</script>
触发span绑定的click事件的同时也会触发div绑定事件，那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
<script type="text/javascript">
$(function () {
$("#content").click(function () {
alert('我是div');
});
$("span").click(function () {
alert('我是span');
return false; 仅此行有区别！
});
})
</script>
4. JavaScript 事件对象
事件对象，是封装有触发的事件信息的一个 javascript 对象，存储着与事件相关的所有信息。
我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
如何获取 javascript 事件对象呢？
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中传入一个参数即可，这个参数名，我们习惯取名为 event。
这个 event 就是 javascript 传递参事件处理函数的事件对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-2021-02-01</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
------------------------填入代码-------------------------------
</script>
</head>
<body>
<div id="areaDiv">aabb</div>
<div id="showMsg">ccdd</div>
</body>
</html>
方式一：Dom方式
<script type="text/javascript">
1.原生javascript获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
} 在控制台输出event的信息。
}
</script>
在存储的所有信息中，有个type属性的信息，记录着绑定事件触发的方式。
方式二：jQuery方式
<script type="text/javascript">
2.jQuery获取事件对象
$(function () {
$("#showMsg").click(function (event) {
console.log(event);
alert(event.type);
});
});
</script>
应用
使用 bind 同时对多个事件绑定同一个函数时，除了像上面bind中提到的方式3，给每个事件都定义一个函数之外，还可以通过event的type属性进行判断。
<script type="text/javascript">
3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$(function () {
$("#showMsg,#areaDiv").bind("mouseover mouseout click",function (event) {
if (event.type=="mouseover"){
alert("鼠标移入");
}else if(event.type=="mouseout") {
alert("鼠标移出");
} else {
alert("单击事件");
}
});
});
</script>