JavaScript-jQuery事件

1 概述JQ事件

JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

2 JQ事件详解

1 事件的添加删除

简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐)

简单事件注册 click(fn) 单击事件 mouseenter(fn) 鼠标进入事件 mouseleave(fn) 鼠标离开事件

缺点：不能同时注册多个事件

bind方式注册事件 // 第一个参数：事件类型 // 第二个参数：事件处理程序 $('p').bind('click', function(){ // 事件响应方法 });

缺点：不支持动态事件绑定

delegate注册委托事件 // 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $('.dv').delegate('p', 'click', function(){ // 为 .dv下面的所有的p标签绑定事件 });

on注册事件

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。 $(selector).on( 'click', function() {});

on注册事件委托

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定 $(selector).on( 'click','span', function() {});

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件） // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。 // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,selector][,data],handler); 通过源码查看 bind click delegate on 注册事件的区别

事件解绑

unbind方式（不用） $(selector).unbind(); // 解绑所有的事件 $(selector).unbind('click'); // 解绑指定的事件 undelegate方式（不用） $( selector ).undelegate(); // 解绑所有的delegate事件 $( selector).undelegate( 'click' ); // 解绑所有的click事件 off方式（推荐） // 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off('click');

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

// screenX和screenY 对应屏幕最左上角的值 // clientX和clientY 距离页面左上角的位置（忽视滚动条） // pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离） // event.keyCode 按下的键盘代码

2 阻止冒泡和默认事件

// event.stopPropagation() 阻止事件冒泡行为 // event.preventDefault() 阻止浏览器默认行为 // return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

3 常见的事件

(一)键盘事件: 1.keydown 键盘按下任意字符 2.keypress 键盘按下字符键，可在屏幕显示的 3.keyup 键盘松开 event.keycode() (二)鼠标事件 1.mouseover() 鼠标滑过 2.mouseout() 鼠标离开 3.mousemove() 鼠标移动 4.mousedown() 鼠标按下 5.mouseup() 鼠标抬起 6.mouseenter() 鼠标穿过 (三)常用事件 1.click 单击 2.dblclick 双击 (四) 表单事件 submit() 提交表单 blur() 失去焦点 focus() 获取焦点 select 选中菜单 change() 改变内容 (五)UI事件 1.resize() 改变窗口大小 2.scroll() 滚动条滚动 3.error() 出错时 4.load() 载入时 5.unload 页面卸载的时候 window.onload 和$(document).ready()

3 JQ事件委托

事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown......）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

事件委托原理

// 事件委托的原理 var ul = document.querySelector('#ul'); ul.onclick = function (e) { // console.log(e.target); }

事件处理的优点：

1.大量减少内存占用，减少事件注册。 2.新增元素实现动态绑定事件