深入浅出 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 相关文章推荐
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
《javascript少儿编程》location术语总结
May 27 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
js css后面所带参数含义介绍
2013/08/18 Javascript
js获取IFRAME当前的URL的方法
2013/11/13 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
详解Python中的join()函数的用法
2015/04/07 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python使用post及get方式提交数据的实例
2019/01/24 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
会计电算化应届生自荐信
2014/02/25 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
内科护士节演讲稿
2014/09/11 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
2014年乡镇安全生产工作总结
2014/12/02 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
水浒传读书笔记
2015/06/25 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技