JQuery3--(jq事件绑定与事件委托)

1. 事件绑定

jq 历史中绑定事件的三种方式

1. on/off
2. bind/unbind
3. live/delegete
   在JQuery1.7之后推出了.on()/.off()，废弃了live()/delegete()方法
   on/off整合了bind/unbind方法
   所以我们使用较多的绑定方法为 on/off

之前使用事件绑定

 $(".btn").click(function () {
        console.log("啊~~~");
 });

.on(参数1，参数2，参数3，参数4)

参数1：必填。事件类型，可同时绑定多个事件，仅限于功能相同时，事件之间空格间隔
   事件功能不相同时，可以采用链式编程，在该方法的后面续写
参数2：可选。具体执行功能的 子元素！
参数3：可选。传递到函数内部的数据（类似实参），通过event.data来获取
参数4：必填。具体功能

$(".box").on("click mouseout",".min_box",{sum:20},function (e) {
        console.log("天气不错");
        //通过参数3 传递进来的参数  我们通过  event.data 来获取
        console.log(e.data.sum);
    });

代码：
显示效果：依次点击第二、第三、第一个div

代码：通过对象的方法添加多个事件

显示效果：

2. 事件的命名空间

有时，我们想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦，这个时候，可以使用事件的命名空间解决
代码：

显示效果：

3. 解除事件绑定

.off(参数1，参数2，参数3)

参数1 ：必需 符合要解除目标的 事件类型 事件命名
参数2 ：可选 指定哪些后代元素可以触发绑定的事件
参数3 ：可选。规定当事件发生时运行的函数。

$('input').off('click.abc'); //移除 命名为abc的click 事件

	// PS：也可以直接使用('.abc')，这样的话，可以移除相同命名空间的不同事件。
    // 对于模拟操作.trigger()和.triggerHandler()，用法也是一样的。
    // 备注： 如果该事件已经删除，则无法模拟使用
    $('input').trigger('click.abc');

代码：

显示效果：

4. 通过on绑定事件和直接通过事件名绑定 的区别

事件名：在页面加载后，获取所有符合条件的元素，然后绑定事件，如果通过其它操作再生成一个新的符合条件的元素，则新元素不会绑定这个事件
.on()：只起到了监听的效果，可以实现动态html元素绑定
比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。

	//1. on() 绑定单个事件 -- 自我完成

    //2. on() 绑定多个事件
    // 事件类型之间 空间 间隔
    $("button").on("click contextmenu",function () {
    alert("我来啦");
    })

5. 读取和使用鼠标状态

event.which
返回1为鼠标左键，返回2为鼠标中键，返回3为鼠标右键。例如：alert(e.which)

return

return true 返回正常的处理结果
return false 返回错误的处理结果；终止处理；阻止提交表单；阻止执行默认的行为
return 把控制权返回给页面

6. 事件委托

6.1 什么是事件委托？

事件委托是利用事件冒泡来实现，只指定一个事件处理程序 来管理某一类型的所有事件

6.2 为什么要用事件委托

 (1)在js中添加到页面的事件处理程序的个数直接关系到页面的整体加载速度
   因为每个事件处理程序都是一个对象，对象会占用内存。对象越多需要加载的内存就越多
 (2)有很多个数据的表格以及很长的列表逐个添加事件，对于开发人员而言，就是噩梦。
   so： 事件委托能极大的提高页面的加载速度 ，减少开发人员的工作量

6.3 事件委托的使用场景/作用

1.操作子元素时，不用一一遍历，可以根据事件触发的对象来进行相应的操作
 *可以为DOM当中的很多元素去绑定 “相同的” 事件
2.将事件委托给父级后，动态创建(删除)的子元素不用重新绑定(解绑)事件，实现了事件和元素的同步更新

6.4 适用性

1.focus() blur()方法本身没有事件冒泡，无法使用事件委托
2.mouseover mouseout这两个事件的触发频率较高，经常需要计算，所以偶尔会出现卡顿，偏差
3.比较适用的有：click mousedown mouseup keydown keyup keypress

代码：
显示效果：

7. 对象的创建和使用

7.1 创建

var obj={ }; 创建一个空对象

7.2 赋值

创建时赋值

创建后赋值
obj.hobby="玩"
如果该对象有这个属性，那么找到这个属性，并赋值；如果没有，

7.3 访问

代码：
显示效果：

8. 插件封装

8.1 释放/更改$的作用

var $s=jQuery.noConflict()

8.2 给jq添加方法的方式

8.2.1 对象级别的添加

1.$.fn.extend({
  函数名:function(){

  },
  函数名:function(){

  },
});
2.$.fn.函数名=function(){}

代码：
显示效果：

8.2.2 类级别的添加

1.$.extend({
  函数名:function(){

  },
  函数名:function(){

  }
})
代码：
显示效果：

2.$.函数名=function(){
}
代码：
显示效果：

直接通过$来调用，不再受到调用者的约束，如果$的所有权被修改了，使用修改后的，或者使用jQuery

9. 使用jquery的好处/为什么使用jquery

1.因为它是轻量级别的框架，大小不超过30kb
2.它有强大的选择器，出色的DOM操作封装
3.有可靠的事件处理机制
4.完善的ajax
5.出色的浏览器兼容性
6.支持链式操作，隐式迭代
7.行为层(功能)和结构层(页面元素)的分离，还支持丰富的插件

10. JQuery库中的$()是什么？

$()是JQuery()的别称；$()函数用于将任何对象包裹成jquery对象，接着你就可以调用定义再jQuery对象上的多个不同方法
将一个选择器字符串传入$()函数,它会返回一个包含所有匹配的DOM元素数组的jQuery对象

11. $(document).ready()是个什么函数？为什么要用它？

ready() 函数用于在文档进入ready状态时执行代码，当HTML被完全解析DOM树构建完成时，jQuery允许你执行代码
它适用于所有浏览器，解决了跨浏览器的难题

12. window.onload和$(document).ready()的不同

1.前者会等DOM创建和包括图片、视频、音频在内所有外部资源都加载完成，如果加载外部资源花费大量时间，用户就会感受到定义在window.onload事件上的代码执行时有明显延迟
后者只需等待DOM树的创建，执行更快
2.前者只能在单一函数里使用
后者可以在网页里多次使用，浏览器会按他们在HTML中出现的顺序执行它们

13. $(this)和this关键字在jQuery中有何不同？

$(this)返回一个jQuery对象，可以对它调用多个jQuery方法
this代表当前元素，它是JavaScript关键词中的一个，表示上下文中的当前DOM元素，不能对它调用jQuery方法

14. jquery中detach()和remove()方法的区别

都用来移除一个DOM元素
detach()会保持对过去被解除元素的跟踪，因此它可以被取消解除
remove()则会保持对过去被移除对象的引用

15. attr()和prop()的区别

相同点：都是获取或设置元素的属性值
不同点：1.prop()是处理元素自带的属性,attr()处理的是自定义的DOM的属性
2.操作固有属性时，prop()会返回正确的值，attr()则会返回undefined

document.getElementById("#box")相较于$("#box")更高效，因为它直接调用了JavaScript引擎

在一个jQuery事件处理程序里返回false，通常用于阻止事件向上冒泡

jQuery方法链是对一个方法返回的结果调用另一个方法，使得代码简洁明了，同时由于只对DOM进行了一轮查找，性能方面更加出色

16. jQuery设置onclick属性

获取：$().attr("onclick")
删除：$().removeattr("onclick")
设置：$().attr("onclick","test()")