小白自学 —— jQuery事件

事件

三个阶段： 捕获，触发，冒泡

页面加载

DOM 提供的 load 事件，jQuery 提供的ready() 方法

以上两种方法的区别：

• DOM 中的 load 事件：

  1. 没有简写形式
  2. HTML 页面加载完后才会触发 load 事件
  3. 一个页面只允许存在一个 load 事件

• jQuery 中的ready()方法：比 DOM 执行速度快

  1. 有简写形式

     $(document).ready(function(){});
     $().ready(function(){});
     $(function(){});	// 容易和自调函数混淆  -  最常用
     

  2. DOM节点树加载完毕之后调用ready()方法

  3. 一个页面允许存在多个ready()事件

事件绑定

单事件绑定

提供了bind()方法完成事件绑定功能

语法：

$element.bind(type,data,callback);

• type : （绑定的事件名称）
• data：作为event.data属性值传递给事件对象的额外数据对象，一定跟事件对象有关（没什么实质性意义）
• callback：（事件所对应的处理函数）

单事件解绑

$element.unbind(type[,data,callback]);

• type：删除含有一个事件类型的字符串（解绑的必须和绑定的函数是同一个）

• data：利用event事件对象的data`属性进行接收

  ​ 特点 - 该参数的数据内容只能在事件处理函数中被使用

• callback：绑定到每个匹配元素的事件上面的处理函数

多事件绑定，多事件解绑

可以利用 jQuery 的链式操作

多事件绑定时，名称之间使用空格隔开

最常规的
 $('#cd').bind('mouseover',function(){
      $('ul').css('display','block');
  });
  $('#cd').bind('mouseout',function(){
      $('ul').css('display','none');
  });

bind() 方法 - 多事件绑定时，名称之间使用空格隔开

4. unbind() 方法
   1. 没有指定任何事件时 - 将指定元素的所有事件全部解绑定
   2. 指定一个事件名称时 - 将指定元素的指定件全部解绑定
   3. 指定一个事件名称时 - 将指定元素的指定件全部解绑定