jQuery(尚硅谷)笔记--------11

事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的时间的时候，同一个事件也传递到了父元素的事件里去响应。

我们建一个html页面：

css:

body:

 

 页面效果：

事件的冒泡：

 

运行结果：

 

点击子元素span

 

自动触发父元素的click方法。

 那么如何阻止事件冒泡呢？

在子元素事件函数内，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("鼠标移出");
            }
        });

        练习：图片跟随

css:

 body:

jQ:

 

 

 当我们将鼠标移入和移出时：

鼠标放上去后：

 

 最后我们来做鼠标移动：