jQ的DOM事件机制: 概念篇
发布在# 菜鸟解读 jQuery #2014年8月22日view:5149
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

好久不见,小编有段时间没有更新了,表示抱歉,最近工作有点忙,
小编也是不太聪明哈,这部分学习时间长了点,但还是坚持中,进入正题吧。

从本篇开始,将带来未知数量篇的 jQ的DOM事件运行监听机制;
本篇是概念篇,先来说下大致的原理:
之前小编提到过一个叫$.cache的东东,这个是用来给dom元素缓存一些数据使用的
这里也是一样,当给元素绑定一个事件时,jQ会在其关联的缓存对象上设置一些缓存数据
我们来看个栗子:

$(dom).bind('click',function(){
}).bind('mouseover',function(){
});
console.log($.cache);

发现大致是这么个样子的结构:

1:{
    events:{
        click:{
            0:{},
            delegateCount:0,
            length:1
        },
        mouseover:{
            0:{},
            delegateCount:0,
            length:1
        }
    },
    handle:fn
}

稍作解释下,缓存对象上handle属性存放的是一个函数,这是主监听函数,
会实际的绑定到dom元素身上,而我们设置的函数,则已数据形式保存到了events属性上,
当浏览器触发dom事件时,handle函数被执行,
然后会调用jQ的内部逻辑,来触发对应类型的我们设置的函数,
这也就是说: 为什么有些人调试jQ的函数时,发现JQ怎么指向的都是同一个函数.
jQ的这种管理机制,也方便了我们通过js来触发事件【可能不会触发浏览器默认行为】
另外,在我们绑定函数时,第一个参大家都知道是event对象,
其实,这个event是jQ做过处理的,而并非原生的,
这期间,jQ处理了很多兼容性的属性和调用方法,下一篇小编会讲到,
比如 target;
jQ对于手动触发事件也进行了冒泡模拟,

再来看下jQ的api:
$().on(), $().bind(), $().one(), $().delegate()
这些是用来对元素进行事件绑定的,具体用法,请参考手册
$().off(), $().unbind()
用来移除dom事件
$().trigger(), $().triggerHandler()
用来手动触发事件
$().click(), $().focus(), ...
这种类型也是可以进行事件绑定的,这里小编称之为快捷操作

有些事件存在一些特殊的处理形式,在后续章节中再来展现

本篇就介绍到这里,篇幅不长,主要是对概念和流程的文字梳理,
下章起,小编会奉献对这种机制的代码部分的讲解
感谢您的阅读,欢迎留言:斧正,交流,提问

评论
发表评论
4年前
赞了此文章!
4年前
赞了此文章!
WRITTEN BY
前端狮子
JS前端开发工程师 :喜欢研究js,nodejs,html5; 希望结交更多朋友~
TA的新浪微博
PUBLISHED IN
# 菜鸟解读 jQuery #

本栏解读的jQ为1.7.2版本。 本人也是刚开始读起源码,在这里分享下成长的心得。 本人能力有限,也是接触JS不久的初学者,定会有不少解析不全不够明朗【甚至BUG】的地方, 希望各位牛牛多多留言斧正 感谢阅读 ps:由于工作不定时繁忙,本人也无法定期更新,但是会尽量抽时间学习,分享给大家

我的收藏