20170611-事件

stefan 发布于2019-08-21 11:44 / 2355人阅读

摘要：焦点事件在元素失去焦点时触发在元素获得焦点时触发鼠标事件键盘与文本事件事件在浏览器页面中，点击鼠标右键可以调出上下文菜单。事件用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。

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上面触发，当所有框架都加载完毕后再框架集上触发，当图像加载完毕时再元素上触发

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节点的访问

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

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

云服务器 GPU云服务器单击事件选中事件点击事件删除事件事件 41

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87058.html

5、React组件事件详解

摘要：组件事件响应在构建虚拟的同时，还构建了自己的事件系统且所有事件对象和规范保持一致。的事件系统和浏览器事件系统相比，主要增加了两个特性事件代理和事件自动绑定。 React组件事件响应 React在构建虚拟DOM的同时，还构建了自己的事件系统；且所有事件对象和W3C规范保持一致。 React的事件系统和浏览器事件系统相比，主要增加了两个特性：事件代理、和事件自动绑定。 1、事件代理 ...

Ververica 2019-08-22 15:13 评论0 收藏0
详解JS事件 - 事件模型/事件流/事件代理/事件对象/自定义事件

摘要：取消事件的默认行为。阻止事件的派发包括了捕获和冒泡阻止同一个事件的其他监听函数被调用。事件模型 DOM0 级事件模型 -没有事件流，这种方式兼容所有浏览器 // 方式一将事件直接通过属性绑定在元素上 / 方式二获取到页面元素后，通过 onclick 等事件，将触发的方法指定为元素的事件 var btn = document.getElementById(btn) btn....

URLOS 2019-08-23 17:07 评论0 收藏0
[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

wangym 2019-08-22 10:57 评论0 收藏0
[学习笔记] 事件（上篇）

摘要：指定事件处理程序指定事件处理程序主要有两种方式级事件处理程序级事件处理程序。添加事件处理程序注意这里是哦或移除事件处理程序使用移除事件处理程序的条件与方法相同必须提供相同的参数，从而添加的匿名函数也无法被移除。今天看书又看到事件，遂决定小总结一下~ JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器（事件处...

RayKr 2019-08-01 14:48 评论0 收藏0
javascript 之事件篇

摘要：处于目标阶段事件在上发生并处理。冒泡阶段事件又传播回文档。不支持捕获事件的。总结二使用事件委托新添加的元素还会有之前的事件。事件对象在触发某个事件时，会产生一个事件对象。 js 是采用异步事件驱动的机制来响应用户操作的，也就是说当用户对某个html元素进行操作的时候，会产生一个事件，该事件会驱动某些函数来处理。事件源：产生事件的地方（html元素，窗口，其他等等)；事件：鼠标事件，键盘...

Forest10 2019-08-21 16:17 评论0 收藏0