JavaWeb学习笔记5 jQuery8 jQuery 事件操作

$( function(){} );

和
window.onload = function(){}
的区别？
他们分别是在什么时候触发？
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
2、原生 js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载
完成。

• 他们触发的顺序？
  1、jQuery 页面加载完成之后先执行
  2、原生 js 的页面加载完成之后
• 他们执行的次数？
  1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
  2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。

jQuery 中其他的事件处理方法：

click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件。
one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。
unbind() 跟 bind 方法相反的操作，解除事件的绑定
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出
来的也有效

事件的冒泡

• 什么是事件的冒泡？
  事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去
  响应。
• 那么如何阻止事件冒泡呢？
  在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
  javaScript 事件对象
  事件对象，是封装有触发的事件信息的一个 javascript 对象。
  我们重点关心的是怎么拿到这个 javascript 的事件对象。以及使用。
• 如何获取呢 javascript 事件对象呢？
  在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。
  这个 event 就是 javascript 传递参事件处理函数的事件对象。
  比如：

//1.原生 javascript 获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}

//2.jQuery 代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});

//3.使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});