JavaScript之jQuery-4 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)
2016-04-03 12:53
1016 查看
一、jQuery 页面加载后执行 代码执行的时机选择 - $(document).ready()方法和 window.onload事件具有相似的功能，但是在执行时机方面是有区别的 - window.onload 事件是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行 - $(document).ready()方法注册的事件处理程序，在DOM完全加载后就可以调用 - 一般来讲, $(document).ready()的执行要优于window.onload事件 - 需要注意的是，$(document).ready()方法操作页面中的元素时，可能关联文件未加载完毕
基于一个页面执行多个脚本 - 通过JavaScript注册事件处理程序的传统机制，是把一个函数指定给 DOM 元素的对应属性 <body onload="start();"> 或 window.onload = start; 但如果指定第二个函数的话，那么就会取代第一个函数
- 通过$(document).ready()每次都会向内部的行为队咧中添加一个新的函数，当页面加载完成后，所有函数都将得到执行
简写代码 - $(document).ready()实际上是在基于 document这个元素构建而成的jQuery对象，调用了ready()方法 - $()工厂函数为我们提供了一种简写方式，即调用这个函数而不用传递参数，该函数的行为就是传递了document参数 - 也可以直接向工厂函数$()中传递一个函数，此时，jQuery会在内部执行对ready()隐式调用
与其他库共存 - 在一些情况下，可能会在一个页面中使用多个JS库，由于多个库可能都使用$，因此需要一种方式来避免名称冲突 - jQuery 提供了一个.noConflict()方法，没用该方法可以将$标识符的控制权交给其他的库 - 如果将$让给其他库的话，那么$就不再表示jQuery了，在jQuery中也不能使用$。 - 如果还想使用$的话，有一个在$().ready()中的使用技巧，传递回调函数的时候可以传递一个参数----jQuery对象本身，可重新命名jQuery为$
二、jQuery 事件处理
事件绑定 - 语法: - $obj.bind(事件类型,事件处理函数) - 如: $obj.bind('click',fn); - 通过 this 引用处理事件的 DOM 元素 - 简写xingshi $obj.click(fn); - 注: $obj.click()则代表触发了click事件
简化事件绑定 - jQuery提供了一种简化事件操作的方式---简写事件方法，其原理与bind()相同，但可以减少代码编写量，如通过$(obj).click(fn)取代$(obj).bind('click',fn);
三、jQuery 事件冒泡
事件冒泡简介 - 子节点产生的事件会依次向上抛给父节点
如何取消事件冒泡 - e.stopPropagation() 可以取消事件冒泡 - 如: - $('div').click(function(e){ alert("点击了div"); }); - $('a').click(function(e){ alert("点击了一个链接"); e.stopPropagation(); });
四、jQuery 事件对象
事件对象概述 - 事件是一种 JavaScript结构，它会在元素获得处理事件的机会时被传递给被调用的事件处理程序，这个对象中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法 - 在处理程序中使用事件对象，需要为函数增加一个参数$(obj).click(function(event){});
事件对象 - 事件对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息，事件对象的常用属性
五、jQuery 模拟操作
模拟操作的语法 - $obj.trigger(事件类型) - 如: $obj.trigger("focus"); - 简写形式 $obj.focus();
总结：本章内容主要介绍了 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)
基于一个页面执行多个脚本 - 通过JavaScript注册事件处理程序的传统机制，是把一个函数指定给 DOM 元素的对应属性 <body onload="start();"> 或 window.onload = start; 但如果指定第二个函数的话，那么就会取代第一个函数
- 通过$(document).ready()每次都会向内部的行为队咧中添加一个新的函数，当页面加载完成后，所有函数都将得到执行
简写代码 - $(document).ready()实际上是在基于 document这个元素构建而成的jQuery对象，调用了ready()方法 - $()工厂函数为我们提供了一种简写方式，即调用这个函数而不用传递参数，该函数的行为就是传递了document参数 - 也可以直接向工厂函数$()中传递一个函数，此时，jQuery会在内部执行对ready()隐式调用
与其他库共存 - 在一些情况下，可能会在一个页面中使用多个JS库，由于多个库可能都使用$，因此需要一种方式来避免名称冲突 - jQuery 提供了一个.noConflict()方法，没用该方法可以将$标识符的控制权交给其他的库 - 如果将$让给其他库的话，那么$就不再表示jQuery了，在jQuery中也不能使用$。 - 如果还想使用$的话，有一个在$().ready()中的使用技巧，传递回调函数的时候可以传递一个参数----jQuery对象本身，可重新命名jQuery为$
二、jQuery 事件处理
事件绑定 - 语法: - $obj.bind(事件类型,事件处理函数) - 如: $obj.bind('click',fn); - 通过 this 引用处理事件的 DOM 元素 - 简写xingshi $obj.click(fn); - 注: $obj.click()则代表触发了click事件
简化事件绑定 - jQuery提供了一种简化事件操作的方式---简写事件方法，其原理与bind()相同，但可以减少代码编写量，如通过$(obj).click(fn)取代$(obj).bind('click',fn);
三、jQuery 事件冒泡
事件冒泡简介 - 子节点产生的事件会依次向上抛给父节点
如何取消事件冒泡 - e.stopPropagation() 可以取消事件冒泡 - 如: - $('div').click(function(e){ alert("点击了div"); }); - $('a').click(function(e){ alert("点击了一个链接"); e.stopPropagation(); });
四、jQuery 事件对象
事件对象概述 - 事件是一种 JavaScript结构，它会在元素获得处理事件的机会时被传递给被调用的事件处理程序，这个对象中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法 - 在处理程序中使用事件对象，需要为函数增加一个参数$(obj).click(function(event){});
事件对象 - 事件对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息，事件对象的常用属性
五、jQuery 模拟操作
模拟操作的语法 - $obj.trigger(事件类型) - 如: $obj.trigger("focus"); - 简写形式 $obj.focus();
总结：本章内容主要介绍了 jQuery事件(页面加载后执行、事件处理、事件冒泡、事件对象、模拟操作)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Android Manifest 用法
- Android学习笔记（二九）：嵌入浏览器
- 峰回路转，Firefox 浏览器即将重返 iOS 平台
- 峰回路转，Firefox 浏览器即将重返 iOS 平台
- 小白观察：微软释放出其基于 Chromium 的 Edge 浏览器
- 浏览器 cookie 限制
- 玩转浏览器IE7的5个顶级使用技巧
- 字符集导致的浏览器跨站脚本攻击分析
- 更改IE浏览器的图标
- 如何创建ajax对象并兼容多个浏览器
- css ie6 ie7 ff的CSS hack使用技巧
- CSS 浏览器的等宽空格问题解决
- 区分IE6，IE7，firefox的CSS hack
- PHP检测用户是否关闭浏览器的方法
- PHP限制页面只能在微信自带浏览器访问的代码
- asp.net实现获取客户端详细信息
- ASP.NET实现推送文件到浏览器的方法
- 多种浏览器清除缓存的方法小结
- Dom与浏览器兼容性说明
- firefox(火狐)和ie浏览器禁止右键和禁止复制的代码