JavaScript事件执行机制

JS事件执行机制

一、JS事件知识

1.1注册事件（2种方式）

给元素添加事件，称为注册事件或绑定事件

注册事件有两种方式：传统方式和监听注册方式

传统注册方式：

利用on开头的事件onclick

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

• 特点：注册事件的唯一性

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

监听注册方式

• w3c标准 推荐方式

• addEventListenner()他是一个方法

• IE9之前的IE不支持此方法，可使用attachEvebt()代替

• 特点：同一个元素同一个事件可以注册多个监听器

• 按注册顺序依次执行

1.2事件监听

addEventListenner()事件监听（IE9以后支持）

 eventTarget.addEventListener(type,listenner[,useCaoture])

该方法接受三个参数：

type：事件类型字符串，比如click、mouseover，注意不带on

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

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

例：

 <button>传统注册事件</button>
     <button>方法监听注册事件</button>
     <script>
         var btns = document.querySelectorAll('button');//通过选择器来选择元素
         // 1. 传统方式注册事件
         btns[0].onclick = function () {
             alert('hi');
         }
         // 2. 事件侦听注册事件 addEventListener 
         // (1) 里面的事件类型是字符串 必定加引号 而且不带on
         // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
         btns[1].addEventListener('click', function () {
             alert(22);
         })
         btns[1].addEventListener('click', function () {
             alert(33);
         })
 ​
     </script>

1.3常用鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发..
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1.4事件对象

event是事件对象

event.target是返回触发事件的对象

1.5鼠标事件对象

（1）基础语法

event事件对象是事件相关的一系列信息的集合

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

例：获取鼠标在页面的坐标

 <script>
         // 鼠标事件对象 MouseEvent
         document.addEventListener('click', function (e) {//通过监听事件方式
             // 1. client 鼠标在可视区的x和y坐标
             console.log(e.clientX);
             console.log(e.clientY);
             console.log('---------------------');
 ​
             // 2. page 鼠标在页面文档的x和y坐标
             console.log(e.pageX);
             console.log(e.pageY);