基础-javascript事件

  直到现在才真正的发现,前端和后台的区别真是太大了....好失落,自己以前所学不光杂还全是皮毛,既然决定要当一名前端大湿,先从基础开始巩固吧,先整理一下冒泡,抓捕,jquery事件模型之间的关系

  • 事件模型

  模型,给我的感觉更像事件对象而非事件的处理方式,事件,并非javascript对象,不会存在程序源码中,这是javascript权威指南,第17章开头的一段内容,理解这些不可言传的词真的好痛苦,如果说是注册事件的方式,对我来说,会好理解些

1.传统模型

2.dom模型

3.ie模型

4.手机模型

5.jquery模型

6.MVVM

  • 传统模型

土著处理的方式非常简单,即属性方式,在属性中直接书写事件的代码,当然,你也可以将他脚本化

<input onclick="console.log(arguments)" type="button" />

等号右测即为方法体,给我一种匿名接口实现的感觉,其内部内容大致为with的方式存在,而且有些还不一样,出于各种你知道的原因,2000年他就已经不流行了
尽管不怎么流行,但这绝对是我非常喜欢的方式,把事件嵌在dom上,即是目的又是源码,不好吗?

  • dom模型

如果又说道冒泡,气泡什么的事件,那说的一定是他了,无法满足需求的传统模型必将被拓展,而后,就会被收编,比如dom事件模型所关注的几个概念,传播和事件流,嗯,我都不好意思加粗了,这里说的事件流,指的是多个事件的意思

传播-->冒泡

<div onclick="console.log('a')">
<div onclick="console.log('b')">
<div onclick="console.log('c')">
<input type="button"  onclick="console.log('d')">
</div>
</div>
</div>

传播的需求更多的来自于优化,我们常说冒泡,也是默认和常用的一种方式,反过来则被称之为捕捉,在例子中,我用的是土著注册方式,向下兼容,还是被允许的,土著写法本身是不支持传播的,所以只能使用默认的方式

事件流-->我是说多个事件

  • ie模型

ie模型其实是在dom模型存在之前的典型解决方案,也就是冒泡方案的原形,而捕捉方案是网景提供的,这里单独拿出来并不是说他比捕捉有多优秀,而是他真的好任性...如果你需要处理ie8以下的兼容性,记得他们使用的还是自家的解决方案,而非dom规范

  • 手机模型

响应式什么的,完全不了解,挖个坑

  • jquery模型

dom事件模型最多只在最新浏览器上得到实现,对于低版本浏览器的兼容性,必须做一套兼容方案(并非厂家不给力,实在是客户太狡猾),而且这套方案必须高度还原dom规范,(所谓兼容大多都是通过低版本已存在的语法去实现高版本的语法)

逗逼时代

event绑定至根节点

经典实现

  • MVVM

想到MVVM,是在写传统语法的时候,我挺喜欢那种源码实现在一起的方式,分层的确能解决很多问题,但通过id的方式,总感觉说不出的别扭

MVVM,可以说是重新封装了整个html,就像对整个html进行了一次全新的设计一样,至此,所有的写法,也就回滚到了传统的方式,很爽,不信你试试

原文地址:https://www.cnblogs.com/liuCy/p/4367033.html