JavaScript学习手册（23）

Posted 2021-05-14 designbyly

元素注册事件

• 注册事件（绑定事件）：给元素添加事件

• 方法：传统方式

  ​ 1.利用on开头的事件onclick

  <button onclick="alert("hi~")"></button>
  btn.onclick=function(){}
  

  ​ 2.特点：注册事件的唯一性。

  ​ 3.同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

  ​ 方法监听注册事件

  ​ 1.w3c标准 推荐方式

  ​ 2.addEventListener() 一个方法

  ​ 3.IE9之前的IE不支持此方法，可使用attachEvent（）代替。

  btn[1].addEventListener('click',function(){
  alert(22);
  })
  

  ​ 4.特点：同一个元素同一个事件可以注册多个监听器。

  ​ 5.按注册顺序依次执行。

  addEventListener事件监听方式

  eventTarget . addEventListener (type , listener[ , useCapture ] )

  此方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

  同一个元素，同一个事件可以添加多个倾听器（事件处理程序）。

  三个参数

  ​ 1.type：事件类型字符串，比如click，mouseover，不要带on。

  ​ 2.listener：事件处理函数，事件发生时，会调用该监听函数。

  ​ 3.useCapture：可选参数，是一个布尔值，默认是false。

  attachEvent事件监听方式

  eventTarget .attachEvent ( eventNameWithOn , callback )

  此方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。

  两个参数：

  ​ 1.eventNameWithOn：事件类型字符串，比如onclick，onmouseover，这里要带on。

  ​ 2.callback：事件处理函数，当目标触发事件时回调函数被调用。

删除事件

1. 传统注册方式

   eventTarget . onclick = null;

2. 方法监听注册事件

   eventTarget . removeEventListener( type, listener [ , useCapture ]);

   divs[2].detachEvent('onclick',fn1);//移除事件
   

DOM事件流

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

事件发生时会在元素节点之间按照特定的顺序传播，传播过程叫做DOM事件流

DOM事件流阶段

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

事件冒泡：IE最早提出，事件开始时由具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。

事件捕获：网景公司最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

注意

1. JS代码中只能执行捕获或者冒泡其中的一个阶段
2. onclick和attachEvent只能得到冒泡阶段。
3. addEventListener（type，listener[,useCapture]）第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4. 实际开发中很少使用事件捕获，关心的是事件冒泡。
5. 有些事件是没有冒泡的，比如onblur，onfocus，onmouseenter，onmouseleave
6. 事件冒泡有时候会带来麻烦。

事件对象

eventTarget . onclick = function ( event ){}

eventTarget . addEventListener ( ‘ click ’ , function(event){})//event就是事件对象，习惯写为e或者evt

1. event就是一个事件对象，写到侦听函数作为形参。
2. 事件对象只有有了事件才存在，系统自动创建，不需要传递参数。
3. 事件对象：事件的一系列相关数据的集合（跟事件相关）
4. 注册事件时，系统帮助我们设定为事件对象，不需要传递实参过去。

var  div=document.querySelector('div');
div.onclick=function(event){
console.log(e);
console.log(window.event);//IE678的方式
e=e||window.event;
}

event对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的位置。

另一种解释：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

事件对象常见属性和方法

1. e.targe 返回触发事件的对象（元素），指向点击对象。

   ​ this返回的是绑定事件的对象（元素）

2. e.srcElement 返回触发事件的对象

3. e.type 返回事件的类型 比如click，mouseover，不带on

4. e.cancelBubble 该属性阻止冒泡

5. e.returnValue 该属性阻止默认事件（默认行为），比如不让链接跳转

6. e.preventDefault() 该方法阻止默认事件（默认行为）标准

7. e.stopPropagation() 阻止冒泡 标准

阻止事件冒泡

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

1. 标准写法：利用事件对象里面的stopPropagation（）方法

   e.stopPropagation()

2. 非标准写法：IE6-8利用事件对象cancelBubble属性。

事件委托（代理，委派）

事件委托也称为事件代理，在jQuery里称为事件委派。

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

作用：操作一次DOM，就可以提高程序的整体性能。

常用鼠标事件

1. onclick 鼠标点击左键触发

2. onmouseover 鼠标经过触发

3. onmouseout 鼠标离开触发

4. onfocus 获得鼠标焦点触发

5. onblur 失去鼠标焦点触发

6. onmousemove 鼠标移动触发

7. onmouseup 鼠标弹起触发

8. onmousedown 鼠标按下触发

   禁止鼠标右键菜单

   contentmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。

   document.addEventlistener('contextmenu',function(e){
   e.preventDefault();
   })
   

   禁止鼠标选中（selectstart 开始选中）

   document.addEventlistener('selectstart',function(e){
   e.preventDefault();
   })
   

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。

1. e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
2. e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
3. e.pageX 返回鼠标相对于文档页面的X坐标（IE9+支持）
4. e.pageY 返回鼠标相对于文档页面的Y坐标（IE9+支持）
5. e.screenX 返回鼠标相对于电脑屏幕的X坐标
6. e.screenY 返回鼠标相对于电脑屏幕的Y坐标

document.addEventListener('click',function(e){
console.log(e.clientX);
})

常用键盘事件

1. onkeyup 某个键盘按键被松开时触发
2. onkeydown 某个键盘按键被按下时触发
3. onkeypress 某个键盘按键被按下时触发，不识别功能键，比如：ctrl，shift，箭头等。

键盘事件对象

键盘事件对象中的keyCode属性可以得到相应键的ASCII码值。

onkeydown和onkeyup不区分字母大小写，onkeypress区分字母大小写。

实际开发中，更多是使用keydown和keyup，它能识别所有的键（包括功能键）

​ keypress不识别功能键，但是keyCode属性能区分大小写，返回不同的ASCII值。

**注意：**keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入文本框里面。

每日一句
有一种爱，明明是深爱，却说不出来；有一种爱，明明想放弃，却无法放弃；有一种爱，明知是煎熬，却又躱不开；有一种爱，明知无前路，心却早已收不回来。