《JQuery-第04章 事件》由会员分享，可在线阅读，更多相关《JQuery-第04章 事件（17页珍藏版）》请在金锄头文库上搜索。
1、1jQuery基础教程2第四章 jQuery中的事件加载DOM事件绑定合成事件事件冒泡事件对象的属性移除事件模拟操作其他用法31、加载DOMready()方法执行时机DOM就绪就会被执行如需图片的高度宽度等可使用load()多次使用可以存在多个ready()方法简写方式$(function() );$().ready(function() );42、事件绑定在文档加载完成后，如果打算为元素绑定事件来完成某些操作，则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法调用格式如下:bind(type,data,fn);第1个参数:事件类型,包括:blur,focus,load
2、,resize,scroll,unload,click,dbclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup和error等第2个参数:可选参数,作为event.data属性值传递给事件对象的额外数据对象第3个参数:用来绑定的处理函数5$(#panel h5.head).bind(click,function()$(this).next().show(););基本效果6加强效果$(#panel h5.head)
3、.bind(click,function() var $content = $(this).next(); if($content.is(:visible)$content.hide();else$content.show();)7改变绑定事件的类型$(#panel h5.head).bind(mouseover,function()$(this).next().show();).bind(mouseout,function()$(this).next().hide(););8简写绑定事件$(#panel h5.head).mouseover(function()$(this).next().
4、show();).mouseout(function()$(this).next().hide(););93、合成事件hover()当光标移动到元素上时触发第1个函数,当光标移出元素时触发第2个函数toggle()原型:toggle(fn1,fn2,fn3,.fnN)连续模拟鼠标点击事件,第1次单击触发fn1,第2次点击触发fn2,.依次触发,直到最后一个,随后每次点击都重复对这几个函数的轮番调用$(#panel h5.head).hover(function()$(this).next().show();,function()$(this).next().hide(); );$(#panel
5、 h5.head).toggle(function()$(this).next().show();,function()$(this).next().hide(););10再次加强效果单击标题后不仅显示内容,并且高亮显示标题$(#panel h5.head).toggle(function()$(this).addClass(highlight);$(this).next().show();,function()$(this).removeClass(highlight);$(this).next().hide(););114、事件冒泡什么是冒泡多个事件可以绑定到一个元素,多个元素也可以响应同
6、以个事件一个元素嵌套在另一个元素里,当里层的元素被绑定事件时,外层元素也将被绑定同一事件函数,当触发里层元素的事件时,外层元素的事件也将被触发因为事件会按照DOM的层次结构像水泡一样不断向上直至顶端,所以称为冒泡12引发的问题事件对象由于IE-DOM和标准的DOM实现事件对象的方法个不相同，导致在不同浏览器中获取事件对象变得比较困难。jQuery中只需为函数添加一个参数event事件对象在函数被触发时建立,执行完毕后销毁停止事件冒泡event.stopPropagation()=returne false;阻止默认行为网页元素有自己的默认行为(如:点击超链接后会跳转)event.prevent
7、Default()=return false;事件捕获事件捕获与事件冒泡是相反的两个过程,事件捕获是从顶端往下触发的,并非所有主流浏览器都支持事件捕获jQuery不支持事件捕获135、事件对象的属性event.type 获取事件的类型event.preventDefault()event.stopPropagation()event.target 获取触发事件的元素event.relatedTarget 在事件中涉及的其他任何DOM元素event.pageX和event.pageY 光标相对与页面的xy坐标event.which 获取单击事件中鼠标的左(1),中(2),右(3)键event.m
8、etaKey 为键盘事件中获取键146、移除事件unbind(type,data)如果没有参数,则删除所有绑定的事件如果提供了事件类型作为参数,则只删除该类型的绑定事件如果提供了类型和绑定的函数作为参数时,则只有这个特定事件处理函数会被删除one(type,data,fn) 绑定的元素只触发一次,随后立即解除绑定157、模拟操作常用模拟(触发事件)可以使用trigger(type,data)$(#bt).trigger(click)=$(#bt).click();触发自定义事件trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件传递数据type:触发的事件
9、类型data:附加给事件处理函数的数据执行默认操作trigger()方法触发事件后,会执行浏览器的默认操作如:$(input).trigger(focus);/不仅触发focus事件且本事会得到焦点triggerHandler(type,data)/触发事件但不执行默认操作168、其他用法绑定多个事件类型为元素一次性绑定多个事件类型$(div).bind(mouseover mouseout,function()$(this).toggleClass(over););添加事件命名空间(便于管理)在所绑定的事件类型后面添加命名空间可根据命名空间事件相同事件名称,不同命名空间执行方法trigger(type!) 只执行不包含在命名空间的方法trigger(type) 触发所有匹配的方法17结 束
