jQuery事件

事件注册

绑定单一事件

//语法 element.event(function(){});

$(this).click(function(){ .... });

*事件基本与原生JS一致

事件处理

绑定多个事件
*jQuery中on()方法可以为匹配的元素绑定上一个或多个事件的时间处理函数
*可给动态创建的元素进行事件绑定

//语法 element.on(events,[selector],fn);
// events: 事件类型 多个事件用空格分隔
// selector: 元素的子元素选择器
// fn: 回调函数 即事件处理函数

// 示例 多个事件多个处理程序
$('div').on({
    mouseenter: function(){ ... },
    click: function(){ ... }
});

// 示例 多个事件统一处理程序
$('div').on('mouseenter mouseleave',function(){ ... });

事件委派

*把原来给子元素的事情绑定在父元素上，将事件委派给父元素

//事件委派绑定
$('ul').on('click','li',function(){ ...  });

解绑事件

*可以通过off()方法进行事件的解绑

//解除this对象上的所有事件
$(this).off();
//解除this对象上的点击事件
$(this).off('click');
//解除事件委托事件
$('ul').off('click','li');

一次性事件绑定
*one()

$(this).one('click',function(){ ... });

自动触发事件
*trigger(),利用定时器自动触发,须实现绑定好事件处理

// ele.event();
$(this).click();

//ele.trigger('event')
$(this).trigger('click');

//ele.triggerHandler('event') *本方法不会触发元素的默认行为
$(this).triggerHandler('click');

*以上3种方式均可以完成自动触发事件

事件对象

与原生的事件对象一致

其他方法

对象的拷贝

//语法 $.extend([deep],target,object1,[objectN]);
//deep : true 深拷贝 false 浅拷贝 默认false
//target : 拷贝的目标对象
//object1 : 待拷贝到第一个对象的对象

//将obj拷贝到targetObj 拷贝过程冲突属性将覆盖原有数据
var targetObj={};
var obj = {id = 1 };
$.extend(target,obj);

多库共存

*jQuery和其他库存在同时占用$标识符时，会引起冲突，多库共存的目的是解决其间的冲突，使其共存

1. 在jQuery中可以使用’jQuery’替代’${}^{\prime }标识符，以避{免}^{\prime }$'标识符所带来的冲突
2. jQuery允许用户自己改变标识符

   //将$符号占用释放 xx将代替$
   var xx = $.noConflict();

jQuery插件

*jQuery插件一般依赖jQuery库

1. jQuery插件库 ： http://www.jq22.com/
2. jQuery支架 ： http://www.htmleaf.com/

• 全屏滚动 fullpage.js
  github： https://github.com/alvarotrigo/fullPage.js