<small id='GDL1kVW3p'></small> <noframes id='0jafxvC9'>

  • <tfoot id='9MCbk'></tfoot>

      <legend id='5nJMEcbUQ'><style id='3F6uaxK'><dir id='zqUDYk8Zi'><q id='mIUfLky92'></q></dir></style></legend>
      <i id='sM019'><tr id='BfDwQh4dNS'><dt id='sjkdTinYfa'><q id='o1zm3x'><span id='idIo'><b id='6xsNLyk2UG'><form id='JpGRU4t7X3'><ins id='hIZW'></ins><ul id='pQEz'></ul><sub id='6Uqi5R'></sub></form><legend id='An9RBjaYE'></legend><bdo id='vQLzOUgKwR'><pre id='eVUhzBa6'><center id='TWjoGt1'></center></pre></bdo></b><th id='oPfxS9QTi'></th></span></q></dt></tr></i><div id='1pTgJ7ZVQ'><tfoot id='2ouBX'></tfoot><dl id='pSb4BTNK0'><fieldset id='ajTyqA1ne'></fieldset></dl></div>

          <bdo id='ReJIk2FY'></bdo><ul id='3avFXz'></ul>

          1. <li id='GfS0k'></li>
            登陆

            章鱼彩票网-JavaScript 浏览器事情解析

            admin 2019-05-14 224人围观 ,发现0个评论

            JavaScript、浏览器、工作之间的联系

            JavaScript 程序采用了异步工作驱动编程(Event-driven programming)模型,维基百科对它的解说是:

            工作驱动程序规划(英语:Event-driven programming)是一种电脑程序规划模型。这种模型的程序运转流程是由用户的动作(如鼠标的按键,键盘的按键动章鱼彩票网-JavaScript 浏览器事情解析作)或者是由其他程序的音讯来决议的。相对于批处理程序规划(batch programming)而言,程序运转的流程是由程序员来决议。批量的程序规划在初级程序规划教育课程上是一种办法。可是,工作驱动程序规划这种规划模型是在交arcteryx互程序(Interactive program)的状况下孕育而生的

            简页言之,在 web 前端编程里边 JavaScript 经过浏览器供给的工作模型 API 和用户交互,接纳用户的输入

            由于用户的行为是不确定的,也便是说不知道用户什么时分发作点击、翻滚这些动作。这种场景是传统的同步编程模型无法处理的,由于你不或许等用户操作完了才履行后边的代码

            比方咱们在 Python 里边调用接纳用户输入的办法 raw_input() 后终端就会一向等候用户的输入,直到输入完结才会履行后边的代码逻辑。可是在下面这段 NodeJS 代码中,接纳用户输入的办法 process.stdin.read 是在一个工作中调用的。后边的代码不会被堵塞(blocked)

            工作驱动程序模型根本的完成原理根本上都是运用 工作循环(Event Loop),这部分内容触及浏览器工作模型、回调原理,有爱好的去看链接里边的视频学习下

            需求阐明的是在客户端 JavaScript 中像 setTimeout, XMLHTTPRequest 这类 API 并不是JavaScript 言语自身就有的。而是 JavaScript 的宿主环境(在客户端 JavaScript 中便是浏览器),相同像 DOM、BOM、Event API 都是浏览器供给的


            工作绑定的办法

            DOM 元素行内绑定

            直接在 DOM 元素上经过设置 on + eventType 来绑定工作处理程序

            点击我

            这种绑定办法是最原始的,有两个缺陷:

            1 工作处理程序和 HTML 结构稠浊在一同

            前期在结构、款式、体现别离的年代很忌讳这一点。现在看来在许多 MVX 结构中将工作绑定和 DOM 结构放在一同处理,这样好像更便利保护(不必来回切换 HTML,JavaScript 文件),而且也契合可预见(predictable)性的规矩

            2 命名空间抵触

            由于 onclick 中的 JavaScript 代码片段履行环境是大局作章鱼彩票网-JavaScript 浏览器事情解析用域。可是在 JavaScript 言语中并没有相关的命名空间特性。所以就很简略形成命名空间的抵触,非要用这种办法绑定工作的话只能用方针来做一些封装

            陈旧的绑定办法

            运用 DOM Element 上面的 on + eventType 特点 API

            这种办法也有一个缺陷,由于特点赋值会掩盖原值的。所以无法绑定 多个 工作处理函数,假设咱们要注册多个 onload 工作处理程序的话就得自己封装一个办法来避免这种工作发作,下面这个比方能够处理这个问题

            留意这仅仅个示例,出产环境很少会用到。一般用 DOM Ready 就能够了,由于 JavaScript 的履行一般不必比及页面资源悉数加载完,DOM 加载完就能够了

            现代/规范的绑定办法

            规范的绑定办法有两种,addEventListener 和 attachEvent 前者是规范浏览器支撑的 API,后者是 IE 8 以下浏览器支撑的 API。一般需求咱们做个兼容封装

            上面的比方在 IE 8 以下和规范浏览器的作用是不相同的,问题就在于 addEventListener 中的工作回调函数中的 this 指向元素(target)自身,而 attachEve章鱼彩票网-JavaScript 浏览器事情解析nt 则指向 window 为了修正这个问题上面的 attachEvent 能够做一点小调整让其坚持和 addEventListener 的作用相同,不过这样的话注册的 handler 便是个匿名函数,无法再移除!

            当上面这几种状况一起呈现的时分就比较有意思了,能够试试下面这段代码的你输出

            正确的成果应该是 3,4,5,1,依据成果咱们能够得出以下定论:

            【1】链接上的 href 伪 javascript 协议相当于在浏览器地址栏履行了一段 JavaScript 代码,链接假设是这种格局,点击的时分相当于履行了这段 JavaScript 脚本

            【2】行内的工作绑定和元素调用 onclick 绑定工作会掩盖

            【3】运用章鱼彩票网-JavaScript 浏览器事情解析 jQuery(内部运用规范工作注册 API)能够绑定多个工作处理程序


            工作冒泡

            大部分工作会章鱼彩票网-JavaScript 浏览器事情解析沿着工作触发的方针元素往上传达。比方:body>div>p>span 假设他们都注册了点击工作,那么在 span 元素上触发点击工作后 p,div,body 各自的点击工作也会按次序触发

            工作冒泡是能够被中止的,下面这个函数封闭了中止工作冒泡的办法:


            工作方针

            规范浏览器中在工作处理程序被调用时 工作方针 会经过参数传递给处理程序,IE 8 及以下浏览器中工作方针能够经过大局的 window.event 来访问。比方咱们要获取当时点击的 DOM Element


            工作署理

            有时分咱们需求给 不存在的(或许将来会有)的一段 DOM 元素绑定工作,比方给一段 Ajax 恳求完结后烘托的 DOM 节点绑定工作。一般绑定的逻辑会在烘托前履行,绑定的时分找不到元素所以并不能成功,当然你也能够把绑定工作的代码放在 Ajax 恳求之后。这样做在一些工作逻辑简略的运用里边没问题,可是会加重数据烘托逻辑和工作处理的逻辑耦合。一但工作处理程序特别多的时分,咱们一般主张把工作的逻辑和其它代码逻辑别离,这样便利保护。

            为了处理这个问题,咱们一般运用工作署理/托付(Event Delegation )。而且一般来说运用 工作署理的功能会比独自绑定工作高 许多,咱们来看个比方


            • item1

            • item2

            • item3

            • item4

            • item5


            假设 ul 中的 HTML 是 Ajax 异步刺进的,一般咱们的做法是 刺进完结后遍历每个 li 绑定工作处理程序

            咱们再运用工作署理把工作绑定到 ul 元素上,咱们知道许多工作能够冒并沿着 DOM 树传达到一切的父元素上,咱们只需求判别方针元素是不是咱们想绑定的真实元素即可

            明显运用了工作署理之后,代码变少了。逻辑也很明晰,关键是曾经需求 N 次的绑定操作现在只需求一次


            jQuery 中的工作绑定

            以 jQuery1.6.4 为例,jQuery 供给了许多工作绑定的 API。例如: delegate(), bind(), click(章鱼彩票网-JavaScript 浏览器事情解析), hover(), one(), live(),这些办法其实都是一些别号,中心是调用了 jQuery 底层工作的 jQuery.event.add 办法。其完成也是上文说到的 addEventListener 和 attachEvent 两个 API

            这些 API 首要是为了便利绑定工作的各种场景,而且内部处理好了兼容性问题。还有一个比较好用的地便利是 工作命名空间。比方:两个弹出层都向 document 绑定了点击封闭工作,可是假设只想解绑其间一个。这时分运用命名空间再适宜不过了。

            请关注微信公众号
            微信二维码
            不容错过
            Powered By Z-BlogPHP