jQuery事件与事件对象.docxVIP

jQuery 事件与事件对象 jQuery 事件与事件对象 事件是脚本编程的灵魂 ,本篇来 介绍 jQuery中的事件处理及事件对象. 事件与事件对象 首 介绍 jQuery 中的事件处理及事件对象 . 事件与事件对象 首 先,我们来看 经常使用的添加事件的方式 : input type=button id=btn value=click me! onclick=showMsg(); / script type=text/javascript function showMsg() { alert(msg is showing!); script 我们最常用的是为元素添加 onclick 元素属性的方式 来添加事件 . 现在 , 我们来看另一种添加事件的方式 ,通过修改 dom 属性的方式来添加事件 :input type=button id=btn2 value=click me! / script type=text/javascript function showMsg() { alert(msg is showing!); $(function () {document.getElementById(btn2).onclick=showMsg; }); script 添加元素属性和修改 dom 属性这两种方法的效果相 同 ,但不等效 .$(function () { //等效于 input type=button id=btn2 value=click me! onclick=alert(msg is showing!) / document.getElementById(btn2).onclick = showMsg; }); //相当于 : ////document.getElementById(btn).onclick=function(){ // // alert(msg is showing!); // input type=button id=btn value=click me! onclick=showMsg(); / 这两种方式的弊端是 :只能为一个事 件添加一个事件处理函数 .使用赋值符会将前面的函数冲掉 在事件处理函数中,获取事件对象的方式不同 . 在事件处理函数中 ,获取事件对象的方式不同 . 添加多播委 托的函数在不同浏览器中不同 .多播委托 指 : 在 ie 中通过 dom.attachEvent, 在 dom.attachEvent, 在 firefox 中通过 dom.addEventListener 方式来添加事件 .所以 ,我们应该摒弃在通过修改元素属性和 通过对 Dom 属性修改的方式添加事件 ,而应该使用多播事件 的委托方式添加事件处理函数 .jQuery 中的事件使用 jQuery 事件处理函数的好处是 :1. 添加的是多播事件委托我们可以 为 dom 的 click 事件添加一个函数后 , 再次添加一个函数 .2. 统一了事件名称 添加多播委托时 ,ie 在事件名称前加了 on, 而 firefox 则直接使用事件名称 3. 可以将对象行为全部用脚本 控制使用脚本控制元素行为 ,使用 HTML 标签控制元素内容 , 用 CSS 控制元素样式 , 从而达到了元素的行为、内容、样式 分离的状态 .下面是基础的 jQuery 事件处理函数 :函数名说明 例子 bind(type,[data],fn) 为匹配元素的指定事件添加事件处 理函数 data 为可选参数 ,data 为数组 function secondClick() { alert(second click!); $(#dv1).bind(click, secondClick);one(type,[data],fn) 为匹 配元素的指定事件添加一次性事件处理函数 通过 fn 函数的参数的 data 属性可获取值 // 数据通过 fn 的参 数传递过去 // 例如 fn 的参数是 e, 则在 fn 内部可以通过 e.data 获取设 定的参数 $(#dv1).one(click, { name: zzz, age: 20 }, function (e) { alert(e.data.name); });trigger(event,[data]) 在匹配的元素上触发某类事件 此函数会导致浏览器同名的默认行为被执行 data 为可选参数 ,data 为数组见下例 triggerHandler(event,[data]) 触发指定的事件类型上所绑定 的处理函数 不会执行浏览器默认行为见下例unbind(type,fn) 不会执行浏览器默认行为见下例 unbind(type,fn) 为匹配的元 素解除指定事件的处理函数 //如