博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
20170611-事件
阅读量:6457 次
发布时间:2019-06-23

本文共 2285 字,大约阅读时间需要 7 分钟。

JavaScript与HTML之间的交互是通过事件实现的,事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或者处理程序)来预定事件,以便事件发生时执行相应的代码。

事件流

事件流描述的是从页面中接受事件的顺序

事件冒泡

IE的事件流叫做事件冒泡,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点

事件捕获

Netscape的事件流叫做事件捕获。事件捕获的思想是不太具体的节点应该更早接受到事件,而最具体的节点应该最后接受到事件,其用意在于在事件到达预定目标之前就捕获它。

DOM事件流

DOM2级事件规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段,事件冒泡阶段。

事件处理程序

HTML事件处理程序

DOM0 级事件处理程序

var btn = document.getElementById('myBtn')btn.onclick = function(){    alert('Clicked')}

DOM2 级事件处理程序

var btn = document.getElementById('myBtn')btn.addEventListener('click', function(){    alert('Clicked')}, false)

跨浏览器的事件处理程序

var EventUtil = {    addHandler: function(element, type, handler){        if(element.addEventListener){            element.addEventListener(type, handler, false)        }else if(element.attachEvent) {            element.attachEvent("on"+type, handler)        }else {            element["on"+type] = handler        }    },    removeHandler: function(element, type, handler){        if(element.removeEventListener){            element.removeEventListener(type, handler, false)        }else if(element.detachEvent){            element.detachEvent("on"+type, handler)        }else {            element["on"+type] = null        }    }}

事件对象

事件对象常用的一些属性和方法

  • event.preventDefault():取消事件的默认方法,例如取消a元素的点击事件

  • event.stopPropagation(): 取消事件的进一步捕获或冒泡

  • event.target : 事件的目标(触发事件的真实目标)

事件类型

UI事件

  • load事件:当页面完全加载后再window上面触发,当所有框架都加载完毕后再框架集上触发,当图像加载完毕时再<img>元素上触发

  • unload事件:当页面完全卸载后再window上触发

  • select事件:当用户选择文本框(input和textarea)中的一或多个字符时触发

  • resize事件:当窗口或者框架的大小变化时在window上面触发

  • scroll事件:当用户滚动带滚动条的元素中的内容时,在该元素上触发。

焦点事件

  • blur:在元素失去焦点时触发

  • focus:在元素获得焦点时触发

鼠标事件

  • click

  • dbclick

  • mousedown

  • mouseup

键盘与文本事件

  • keydown

  • keypress

  • keyup

...

contextmenu事件

在浏览器页面中,点击鼠标右键可以调出上下文菜单。contextmenu事件用以表示何时应该显示上下文菜单,以便开发人员取消默认的上下文菜单而提供自定义的菜单。

为某一元素设置contextmenu事件处理程序,在事件处理程序中调用event.preventDefault()方法,就可以在该元素上阻止上下文菜单的出现。

  • 使整个页面都阻止上下文菜单的出现

document.body.addEventListener('contextmenu', function(event){    event.preventDefault()})

事件委托 事件代理

假设现在要处理多个具有并列关系元素的click事件,当点击这些元素中的任何一个元素,则事件一定会通过冒泡的方式,冒泡到他的上层的父节点元素然后一直冒到window,所以这个时候就可以在他的上层元素中添加事件处理程序,来统一处理这些事件,在处理的过程中可以通过获取target来知道是点击的哪个具体的元素。这种方式就称之为事件委托。

  • 在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能,因为需要不断的与dom节点进行交互,会延长整个页面的交互就绪时间,而使用事件委托则可以大大减少对dom节点的访问

  • 为每个子节点都添加事件处理程序,会造成内存空间的浪费

  • 新添加的子元素不需要添加被委托事件的处理程序

转载地址:http://stizo.baihongyu.com/

你可能感兴趣的文章
C#反射---属性
查看>>
服务器常用的状态码及其对应的含义如下
查看>>
完美字符串
查看>>
zoom和transform:scale的区别
查看>>
邬建国教授受聘为浙江大学光彪教授
查看>>
过来人谈在美国大学里的中国研究生
查看>>
WCF核心技术
查看>>
R语言编程艺术
查看>>
SQL的bit列名转换成access是/否数据类型,True无效的问题
查看>>
技术普及帖:你刚才在淘宝上买了一件东西
查看>>
幸福框架:可扩展的、动态的、万能的 编号生成器
查看>>
黄聪:PHP 防护XSS,SQL,代码执行,文件包含等多种高危漏洞
查看>>
svn status 显示 ~xx
查看>>
常用HiveQL总结
查看>>
[转]使用Visual Studio Code开发Asp.Net Core WebApi学习笔记(三)-- Logger
查看>>
分享超酷的添加图片悬浮特效jQuery插件 - Adipoli
查看>>
POJ 3311 Hie with the Pie(状压DP + Floyd)
查看>>
HDU 1402 A * B Problem Plus FFT
查看>>
[CareerCup] 17.3 Factorial Trailing Zeros 求阶乘末尾零的个数
查看>>
Security updates and resources
查看>>