事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事件,也就有了事件流的概念 事件流故名思意:也就是事件的流向,所以事件流描述的是从页面中接收事件的顺序 虽然事件流描述的都是事件的流向,但是事件流在当时的两个最大的浏览器厂商的提出中却是两个差不多完全相反的事件流概念 一是IE的冒泡事件流,二是Netscape的捕获事件流 事件冒泡 即事件开始时由最具…

由于事件处理程序是现代的web程序交互能力的提供者 所以在日常实践中,我们免不了要向页面中添加大量的事件处理程序(不管是用于用户交互还是用于统计用户数据) 在创建GUI(图形用户界面)的语言(如C#)中,为GUI中的每一个按钮添加一个onclick事件是司空见惯的事,并且这样做并不会有什么问题 但是在JS中情况就截然不同了,因为在web应用中添加到页面上的事件处理程序的数量将直接影响页面的整体运行性能 导致这一问题的原因有以下几点: JS中每个函数都是对象,都会占用内存,内存占用越多性能越差 由…

触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的Webkit的加入,让这些触摸事件成为了许多的事实标准 基于此,W3C开始制定了 Touch Event 规范 所以下面介绍的事件只针对移动设备 触摸事件 触摸事件会在用户手指放在屏幕上面时.在屏幕上滑动.从屏幕上移开时触发 具体来说由以下几个触摸事件: touchstart:当手指触摸屏幕时触发(即…

DOM规范没有涵盖所有浏览器支持的所有事件 而许多浏览器出于满足用户需求,或解决特殊问题的目的,实现了一些自定义事件 HTML5列出了浏览器应该支持的所有事件,这里只讨论得到浏览器完善支持的事件(并非全部) contextmenu事件 windows95 在PC中引入了上下文菜单的概念,即通过鼠标右键可以调出上下文菜单 在该概念提出后不久,该概念也被引入了web 领域 在web中实现该概念,开发人员面临的主要问题是:1.如何确定上下文菜单以何种方式打开(windows中鼠标右键,Mac中 ctr…

变动事件 DOM2级的变动事件,能在DOM中的一部分发生变化时给出提示 变动事件是为XML或HTML DOM 设计的,并不特定于某种语言 DOM2级定义了如下变动事件: DOMSubtreeModified:在DOM结构发生变化时触发,即会在下面所有事件触发后触发 DOMNodeInserted:当一个节点作为子节点插入另一个节点中时触发 DOMNodeRemoved:节点从父节点中移除时触发 DOMNodeInsertedIntoDocument:一个节点被直接插入文档或通过子树间接插入文档后…

鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对确保易访问性十分重要,这意味着 onclick 事件处理程序既可以通过键盘执行也可以通过鼠标执行 dbclick:在用户双击主鼠标按钮时触发(鼠标左键).从技术上说该事件并不是DOM2级规范所支持的,但是由于浏览器对其的广泛实现在DOM3级规范中将其纳入标准 mousedown:用户按下任意鼠标按钮…

焦点事件 焦点事件会在页面元素获得或者失去焦点时触发,利用焦点事件和 document.hasFocus() 方法配合使用 以及 document.activeElement 属性配合可以知晓用户在页面上的行踪 焦点事件有以下6种: blur:在元素失去焦点时触发,该事件不会冒泡 DOMFocusIn:在元素获得焦点时触发,该事件与HTML事件 focus等价 ,但是该事件会冒泡,DOM3级规范废弃了该事件.选择了 focusin 作为实现 DOMFocusOut:元素失去焦点触发,也会冒泡.D…

UI事件 UI事件是指那些不一定与用户操作有关的事件 这些事件在DOM规范出现之前,都是以各种不同的形式存在于不同的浏览器 而在DOM事件中为了保证向后兼容,现有的UI事件如下: DOMActivate:表示元素已经被用户操作激活,该事件在DOM3规范中被废弃,因此不建议使用 load:当页面完全加载后在window对象上触发,图像加载完毕在 img 标签触发,嵌入内容加载完毕在 object 元素触发 unload:页面完全卸载后在 window 对象触发,框架卸载完成在框架集上触发,嵌入内容…

事件对象 在触发DOM‘事件时,会产生一个事件对象 event 该对象包含着所有与事件有关的信息 所有浏览器都支持 event 对象但是支持的方式有所不同 DOM事件对象 兼容DOM的浏览器会将event对象传入事件处理程序中 如下所示: var btn = document.getElementByTagName("button")[0]; btn.onclick = function(event){ alert(event.type); //"click" }…

设备事件 随着智能手机与平板电脑的普及,为了更好地让用户与这些设备进行交互 浏览器引入了一种新的方式,而一类新的事件也应运而生,这就是设备事件 W3C从2011年开始制定关于设备事件的草案 下面将会介绍纳入草案的部分设备事件 PS.纳入草案不代表大多数浏览器已经实现 orientationchange事件 苹果公司为 Safari 添加了 orientationchange 事件,以便开发人员能够确定用户何时将设备由横向查看切换为纵向查看 在移动版本的 Safari 浏览器中,window 对象…