（与jQuery靠近乎）04-jQuery中的事件整合one篇

今天，我还是风尚，一个有梦想的咸鱼程序员

今天我们还来和jQuery来靠近乎

---

温馨提醒：好记性不如赖笔头，遇到新知识记得做好笔记哦

---

今日份咱们整点

一.jq中的事件（ready加载事件，on注册事件，off移除事件）

二.jq中的合成事件

---

以前的没看懂的，没了解的快去了解

风尚云网_CSDN博客风尚云网_CSDN博客https://blog.csdn.net/zsx0806?type=blog风尚云网_CSDN博客都会了进行今天的剧情，人生如戏，全看演技

---

 今日份必备单词（必须会背）

propagation 冒泡             prevent 阻止       default 默认           trigger触发

animate动画                    slide滑动                                   fade淡入

---

接下来言归正传

1.jq中的事件

加载文档完成触发事件： 

语法：$(document).ready(function(){})

ready事件可以多次执行。

代码可以简写为：

  $(function(){})

---

另外谨记：

$(function(){})是在window.onload执行前执行的

$(function(){})类似于原生js中的DOMContentLoaded事件，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行！

DOM文档加载步骤： 
1.解析HTML结构 
2.加载外部的脚本和样式文件 
3.解析并执行脚本代码 
4.执行$(function(){})内对应代码 
5.加载图片等二进制资源 
6.页面加载完毕，执行window.onload

---

注册事件

语法：on(events,fn)

                                        注*：events ：事件名称  •fn处理函数

语法：on(events,[selector],fn)

注：events 事件名称   selector 子选择器 fn处理函数

      //给btn注册点击事件
      $("#btn").on("click", function () {
        $("<p>我是新建的p元素</p>").appendTo("div");
      });

      //注册多个事件
      $("p").on("mouseover mouseout", function () {
        $("p").toggleClass("new");
      });

      //给div注册委托事件
      $("div").on("mouseover mouseout", "p", function () {
        $("p").toggleClass("new");
      });

自 jQuery 版本 1.7 起
on() 方法是 bind()和 delegate() 方法的结合体。该方法带来很多方便，简化了 jQuery 代码库。
      注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（由脚本创建的新元素）。
      提示：如需移除事件处理程序，请使用 off() 方法。
      提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

  补充： one语法：(事件名称,fn)   执行一次

几种注册事件方法：

// 一：delegate 代理委托 是给父元素注册委托事件，如果给父元素中追加元素p，就会带有点击事件。1.$("div").delegate("p","click",function(){
  alert("delegate 代理委托注册 ");
});

//二：直接创建

2.$("div").click(function(){
  alert("直接创建");
});

//三：bind元素绑定。和第二中方法效果一样，可以同时注册多个事件
3.$("div").bind("click",function(){
  alert("bind绑定");
});
//四：on注册，上面能的on都能

---

移除事件

在选择元素上移除一个或多个事件的事件处理函数。

语法：off(events,[selector],fn)

off() 方法移除用.on()绑定的事件处理程序。

events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click",                 "keydown.myPlugin", 或者 ".myPlugin".

selector:一个最初传递到.on()事件处理程序附加的选择器。

fn:事件处理程序函数以前附加事件上，或特殊值false.

---

二.jq中的合成事件

•jQuery有两个合成事件:hover()方法 和toggle()方法.

hover()方法：

hover()方法语法： hover(enter,leave)

hover()方法 用于模拟光标悬停事件.当光标移动到元素上时 , 会触发指定的第一个函数 , 当光标移出这个元素时 , 触发指定的第二个函数

toggle()方法：

toggle()方法的语法结构为： toggle(fnl, fn2, ...fnN);

toggle()方法用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数(fn1)；当再次单击同一元素时，则触发指定的第2个函数(fh2)；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

---

本次分享到这里结束了

我还是风尚，一个有梦想的咸鱼程序员！让我们一起努力，共创明天的辉煌！喜欢就给个小关注啊，

关注风尚不迷路！

记得一键三连，禁止白嫖

风尚云网_CSDN博客https://blog.csdn.net/zsx0806?type=blog