深入浅出 jQuery中的事件机制


Posted in Javascript onAugust 23, 2016

首先呢,我们先来看一下,jQuery中的ready事件,它的作用有些类似于window中的onload事件,只不过二者的区别在于,onload事件是要等到网页中的dom节点加载完成,并且css进行样式渲染后,JavaScript中进行了预加载后再执行,而ready事件呢,是在网页中的标签被解析为DOM节点是就执行其中的函数,直白点说,ready执行的比onload早,那么我们在用jQuery的时候,需要做一个ready的执行定义:

//ready的作用,是为具体加载的实现.
$(document).ready(function(){
alert('1234');
});
//第二种,少了一个document,创建一个空的jQuery对象.
$().ready(function(){
alert('abcd');
});
//第三种,简写版的,
$(function (){
alert('23333');
});

那么我们再来看一下onload和ready的第二个区别:

//如果有两个window.onload它只会执行最后一个.如果有多个的话,后边的会将前面的覆盖掉.
window.onload=function(){
alert(1);
}
window.onload = function(){
alert(2);
}
//而window.ready 则可以设置多个函数,都去作用.
$(document).ready(function(){alert(1)})
$(document).ready(function(){alert(3)})
//这里的可以设置多个函数,是指的对于同一个对象设置

那么我们再来看一下jQuery中的事件绑定,这里我们一onclick事件来举例,当我们在js中进行事件绑定的时候,我们分为dom1级事件,dom2级事件,其中还包括对于IE浏览器的兼容性考虑,那么当我们使用jQuery中的事件机制时,就不用去考虑那么多了,jQuery内部已经帮我们做好了兼容性之类的操作,讲真,这真的是很方便了我们了:

//DOM1级事件
var itNode = document.getElementById('id');
itNode.onclick = function(){};
div.onclick = null; DOM1级中解除事件绑定
//DOM2级事件
itNode.addEventListener('click',function(){});
itNode.removeEventListener();
itNode.attachEvent();//IE 6 8 7 兼容性处理
detachEvent(); IE中接触事件绑定
//使用jQuery来操作绑定事件
//$().事件类型(function(){});
//$().事件类型();
$(function(){
$('div').click(function(){//给div绑定了一个onclick事件
$('div').css('color','green');
});
$('div').mouseover(function(){
$(this).css('color','yellow');
});
});

这里的一个主意点就是当绑定事件时,事件名是不用写on的,其实我们还可以用另一种写法$('div').on('click',funciton(){});上面的那种写法就是这种写法的简化,二者的作用还是一样的.那么当我们需要给当前jQuery对象添加多个事件的时候,我们就可以使用bind方法来处理了:

//$().bind(事件类型,事件处理函数(分为有名函数,和匿名函数))
$(function(){
//绑定一个鼠标移动上去处理的事件.
$('div').bind('mouseover',function(){
$('div').css('background-color','blue');
});
$('div').bind('mouseout',function(){
$('div').css('background-color','yellow');
});
//一个函数绑定多个事件 这多个时间之间只需要用空格隔开.
//这个虽然可以绑定多个事件,但是函数比较单一,不灵活.
$('div').bind('mouseover mouseout',function(){
console.log(1234);
});
//使用对象的形式来绑定多个事件,
$('div').bind({
click: function(){console.log(1);},
mouseover: function(){alert(22);},
mouseout : function(){alert(33);}
});
//绑定有名的函数
function fa(){alert("fa");};
function fb(){alert("fb");};
function fc(){alert("fc");};
$('div').bind('click',fb);
$('div').bind('click',fc);
$('div').unbind();//这样直接调用unbind函数会直接将所有绑定的事件都取消掉.
$('div').unbind('click');//这样子就会将div里边所有的click绑定的事件取消掉了
//直接解除指定的函数的绑定,这种方式也只能解除有名函数的绑定,不能解除指定的匿名函数的绑定
$('div').unbind('click',fa);
});

当然,在事件处理中,事件对象无疑是我们经常要使用的一个对象,在js中,我们获取对象时还要考虑到兼容性问题,但是在jquery中,我们根本就不用考虑,只需要直接使用函数中传递的event参数就行了:

function(evt){
var evt = evt || window.event;
evt.preventDefault();//主流浏览器阻止默认事件
evt.returnValue = false;// IE中阻止对象默认事件
evt.stopPropagation();//主流浏览器中阻止浏览器冒泡
evt.cancelBubble();//IE中阻止浏览器冒泡处理
}
$().bind('click',function(evt){
//evt不用做兼容性处理
evt.preventDefault();//阻止浏览器的默认动作.
evt.stopPropagation();//阻止浏览器冒泡,
});

当然了,我们jQuery中的事件也是由键盘事件,鼠标事件,表单事件,甚至还有自定义的事件等等,和js中的基本一样,总结起来呢,使用jQuery使我们不用去考虑兼容性问题,同时代码量也大大的减少了.

以上所述是小编给大家介绍的jQuery中的事件机制,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
JS中toFixed()方法引起的问题如何解决
Nov 20 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
JavaScript中Require调用js的实例分享
Oct 27 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
javascript实现简单的on事件绑定
Aug 23 #Javascript
js实现图片淡入淡出切换简易效果
Aug 22 #Javascript
JS对HTML表格进行增删改操作
Aug 22 #Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 #Javascript
详解AngularJS如何实现跨域请求
Aug 22 #Javascript
深入浅析JS Function()构造函数
Aug 22 #Javascript
深入浅析jQuery对象$.html
Aug 22 #Javascript
You might like
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP入门教程之PHP操作MySQL的方法分析
2016/09/11 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
javascript事件模型代码
2007/07/01 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
js实现登录与注册界面
2017/11/01 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
Python+django实现文件下载
2016/01/17 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python  logging日志打印过程解析
2019/10/22 Python
python3中rank函数的用法
2019/11/27 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
Java基础面试题
2014/07/19 面试题
奶茶专卖店创业计划书
2014/01/18 职场文书
学历公证书范本
2014/04/09 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书