js高阶之事件

js和html之间交互通过事件实现,通过使用偵听器来预定事件,以便事件发生时执行相应代码,这种为观察员模式。

事件流描述的是从页面中接受事件的顺序,又外向内为事件捕获流,由内向外为事件冒泡流,其中ie不支持事件捕获流,而且在低版本ie中冒泡流会跳过html

dom2级事件规定的事件流包括三个阶段:事件捕获(由document->body),处于目标阶段,事件冒泡阶段。

事件处理程序有几种方式,最起初的是在html中,为html事件处理程序,需要注意的是在js值不能使用未经转义的html语法字符,比如<>""&等等,在方法函数内部,this等于事件的目标元素,另比较巧妙的方法是通过with去扩展作用域。但是其有一些缺点:1.时差问题,用户在页面上执行动作,不过可能触发了的函数还不具备完整执行的条件,2.扩展事件作用域在不同浏览器会有不同的结果,3.html和js代码紧密耦合。

后来出现了dom0级事件处理程序,其中程序中的this引用当前元素,使用方法为node.onclick=function(),解除方法为node.onclick=null;

又出现了dom2级事件,addeventlistener/attachevent/node[‘on‘+event_name](为了兼容不同浏览器),解除也一样,对于addeventlitstener,第三个参数默认为false,指冒泡流,如为true则为捕获流。触发一个事件,就会产生一个事件对象。

对于dom中的事件对象而言,需要注意的便是currenttarget,this,target,其中前俩始终是相等的,均为指定的目标元素,而target指向的为事件的实际目标,为了减少dom的请求次数,为了更高的效率,我们也可以利用event的type属性去通过一个函数处理多个事件,在dom中,要阻止特定事件的默认行为,可以使用preventdefault方法,阻止事件在dom层次中的传播,可以使用stoppropagation方法。还可以通过eventphase属性获得事件进行到三个阶段中的哪一个阶段。

对于ie中的事件对象,在dom0级中,event对象作为window对象的一个属性,我们需要单独申明var event=window.event,在dom2级中,会有一个event作为参数传入事件处理程序中,因为事件处理程序的作用域是根据指定它的方式来确定的,所以this不会一直等于事件目标,所以还是使用event的src_element较好,同样,如果要阻止特定事件的默认行为,我们可以利用event.returnvalue=false,阻止冒泡呢,我们利用event.cancelbubble=true(这两者默认值是反着的。

事件类型有很多类,我只选取了一部分,1.ui事件不一定与用户操作有关,但在dom规范中保留为了向后保留,load事件,在window上实现了这件事件,确保向后兼容,而对于图像load中,只要设置了src属性就会开始下载,不一定得等添加到文档后才开始下载,其他就必须两样都得完成,所以出了图像外,顺序(设置src和添加到文档)就不那么重要了。unload事件上指被完全卸载后触发,需要注意的是那些在load后存在的对象在unload时已经不在了。resize要避免大量的代码,因为有的浏览器是根据1px来衡量的,所以可以可能会产生大量的重复代码。scroll事件,除了safari(body)之外,其他的均通过html来反映,这里需要做跨浏览器的处理(document.documentelement.scrolltop||document.body.scrolltop),同样要避免重复的代码.

在鼠标事件中,需要明确clientx(视口中的坐标),pagex(页面本身的坐标),screenx(屏幕的坐标),其中pagex=clientx+scrollleft;在没有滚动的情况下这俩值是相等的。

html5事件,contextmenu事件用以表示显示上下文菜单。domcontentloaded事件在形成完整的dom树之后就会触发。readstatechange事件中,并非所有对象都会经历readystate的所有阶段。pageshow/hide事件,页面显示时触发,在load事件过后。

优化,进行事件委托,在dom树中尽量最高层次上添加一个事件处理程序

时间: 2024-12-11 23:37:32

js高阶之事件的相关文章

js 高阶函数 闭包

摘自  https://www.cnblogs.com/bobodeboke/p/5594647.html 建议结合另外一篇关于闭包的文章一起阅读:http://www.cnblogs.com/bobodeboke/p/6127650.html 一.闭包 闭包某种程度上就是函数的内部函数,可以引用外部函数的局部变量.当外部函数退出后,如果内部函数依旧能被访问到,那么内部函数所引用的外部函数的局部变量就也没有消失,该局部变量的生存周期就被延续. 一个经典的例子如下: <script> //thi

浅谈JS高阶函数

引入 我们都知道函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行,获得返回值或者实现其他功能.函数有函数名和参数,而函数参数是当调用函数接收的真实的值. 今天要说的高阶函数的英文为Higher-order function, 高阶函数的高阶是什么意思呢? 定义 至少满足下列一个条件的函数 接收一个或多个函数作为输入 输出一个函数 怎么理解这么个东西呢?引言里说过了,函数实际上都是指向某个变量.既然变量可以是一个向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这

js高阶函数

map()方法定义在JavaScript的Array中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的Array作为结果: function pow(x) { return x * x; } var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81] reduce()把一个函数作用在这个Array的[x1, x2, x3...]上,这个函数必须接收两个

react.js 高阶组件----很简单的实例理解高阶组件思想

/* * 高阶组件其实是一个函数,传进去的一个组件,返回一个新组件 * 实现不同组件中的逻辑复用, * 将一些可以单独抽离的逻辑处理给要返回的新组件里面复用 * 然后将单独的组件,传递给新组件 * */ import React, {Component} from 'react' import ReactDOM from 'react-dom' //高阶组件定义,里面return 返回新组件 function local(Comp,key){ class Proxy extends Compon

js高阶函数应用—函数柯里化和反柯里化

在Lambda演算(一套数理逻辑的形式系统,具体我也没深入研究过)中有个小技巧:假如一个函数只能收一个参数,那么这个函数怎么实现加法呢,因为高阶函数是可以当参数传递和返回值的,所以问题就简化为:写一个只有一个参数的函数,而这个函数返回一个带参数的函数,这样就实现了能写两个参数的函数了(具体参见下边代码)--这就是所谓的柯里化(Currying,以逻辑学家Hsakell Curry命名),也可以理解为一种在处理函数过程中的逻辑思维方式. 1 function add(a, b) { 2 retur

js高阶函数filter、map、reduce

1 // 高阶函数 filter/map/reduce 2 3 // filter中的回调函数有一个要求:必须返回一个boolean值, 4 // 当返回true时,函数内部会自动将这次回调的 n 加入到新的数组中 5 // 当返回false时,函数内部会自动过滤掉这次的 n 6 const nums=[10,20,60,94,348,57,24,674,645,44,4] 7 let newNums = nums.filter(function (n){ 8 return n<30 9 })

JS高阶---事件循环模式(事件轮询)

大纲: 相关知识点: 主体: (1)模型原理 JS部分:初始化代码执行 WebAPIS:执行上下文对象(不是一个真的对象,而是一个抽象的虚拟对象,可以看做栈里的一个区域,包含很多对象) setTimeout:定时器管理模块(分线程) DOM(document):事件响应管理模块(分线程)callback queue:回调函数队列---→待执行JS中的stack初始化代码优先执行,当执行完毕后,才会执行回调代码 重点: 先执行初始化代码,执行完毕后才会循环遍历“”回调队列“”里的回调代码 (2)相

JS高阶---线程与事件机制(小结)

[大纲] [主体] 注意:先进先出 事件轮询: 事件初始化代码执行完毕后,开始执行事件队列里的待处理事件 . 原文地址:https://www.cnblogs.com/jianxian/p/11986577.html

JS高阶函数应用——函数节流

在一些函数需被频繁调用的场景,如:window.onresize.mousemove.上传进度等等,操作频繁导致性能消耗过高,而造成浏览器卡顿现象,我们可以通过函数节流的方式解决此问题.   比如我们在window.onresize事件中打印当前浏览器窗口的大小,而拉拽窗口的时候,打印窗口大小的工作1s内进行了10次.而实际是我们只需2次或3次,这就需要我们按时间段来忽略一些事件请求,比如确保在500ms内只打印1次.实现代码如下: var throttle=function(fn,interv