目录
1.注册事件 (绑定事件)
1.1 注册事件概述
1.给元素添加事件,称为注册事件或者绑定事件。 2.注册事件有两种方式:传统方式和方法监听注册方式。
传统注册方式
1.利用on 开头的事件 onclick 2.<button onclick = "alert('~')"></button> 3.btn.onclick = function(){ } 4.特点:注册事件的唯一性 5.同一个元素同一个事件只能设置一个处理函数,最注册的处理函数将会覆盖前面注册的处理函数
方法监听注册方式
1.w3c标准 推荐方式 2.addEventListener() 它是一个方法 3.iE9 之前的IE不支持 4.特点: 同一个元素同一个事件可以注册多个监听器
1.2 addEventListener 事件监听方式
eventTarget.addEventListener(type,listener[,useCapture]) eventTarget.addEventListener() 方法指定的监听器注册到eventTarget(标目对象)上,当该对象触发指定的事件时,就会执行事件处理函数。 1.type: 事件类型字符串,比如click、mouserover、注意这里不要带on 2.listener : 事件处理函数,事件发生时,会调用该监听函数 3. useCapture: 可选参数,是一个布尔值,默认是false。学完DOM时间流后,我们再进一步学习 注意: 1.里面的事件类型是字符串,必定加引号 而且不带on 2.同一个元素 同一个事件可以添加多个侦听器 (事件处理程序)
2.1 删除事件的方式
1.传统注册方式 eventTarget.onclick = null; 2.方法监听注册方式 1.eventTarget.removeEventListener(type,listener[,userCapture]);
3.DOM事件流
1.事件流描述的是从页面中接收事件的顺序。 2.事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
1.事件冒泡:IE最早提出,事件开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程。 2.事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐级向下播到最具体的元素接收的过程。
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。 注意 1.JS代码中只能执行捕获或者冒泡其中的一个阶段。 2.onclick和attachEvent只能得到冒泡阶段。 3.addEventListener(type,listener[,useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是flase(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。 4.实际开发职工我们很少使用事件捕获,我们更关注事件冒泡。 5.有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、onmouserleave 6.事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事情,我们后面讲解。
4.1 什么事事件对象
官方解释:evnet对象代表事件的状态,比如键盘按键的装填、鼠标的位置、鼠标按钮的状态。 简单理解:事件发生后,跟事件相关的一些列信息数据的集合都放到这个对象里面,这个对象是事件对象event,它有很多属性和方法。
4.4 事件对象的常见属性和方法
5.1 阻止事件冒泡的两种方式
事件冒泡:开始时由具体的元素接收,然后逐级向上传播到DOM最顶层节点。 事件冒泡本身的特性:会带来的坏处,也会带来的好处,需要我们灵活掌握。
6.事件委托 (代理、委派)
事件冒泡本身的特性,会带来的坏处,也会带来的好处,需要我们灵活掌握。
事件委托 事件委托也称为事件代理,在jQuery里面称为事件委派 事件委托的原理 不是每个子节点单独设置事件监听器,而是事件监听设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
事件委托的作用
我们只操作了一次DOM,提高了程序的性能。
7.1常用的鼠标事件
1.禁止鼠标右键事件
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu',function(e){ e.preventDefault(); })
2.禁止鼠标选中(selectstart 开始选中)
7.2 鼠标时间对象
event对象代表事件的状态,跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标时间对象MouseEvent 和键盘事件对象 keyboardEvent。
8.1 常用键盘事件
时间除了使用鼠标抽发,还可以使用键盘抽发。
三个事件执行顺序 keydown -- keypress -- keyup
注意: 1.如果使用 addEventListener 不需要加on 2.onkeypress 和 前面2个的区别是, 它不识别功能键,比如左右箭头,shift等
8.2 键盘事件对象
注意:onkeydown和onkeyup不区分字母大小写,onkeypress区别字母大小写。 在我们实际开发中,我们更多的使用keydown和keyup,它能识别所有的键(包括功能键) keypress不识别功能键,但是keyCode属性能区分大小写,返回不同的AsCLL值