JavaScript 之 事件（详解）

Posted 2022-09-13 niujifei

一、注册事件的三种方式

　　1、直接事件方式

　　　　语法格式：

变量名.on事件名 =  function() 

　　　　　　注意：这种方式无法给同一对象的同一事件注册多个事件处理函数

　　2、addEventListener 方式（IE9 以后才支持）

　　　　　　语法格式：

变量名.addEventListener(事件名,function())

　　　　　　Demo :

1  // 浏览器兼容性问题  IE9以后才支持
2 btn.addEventListener(‘click‘, function () 
3      alert(‘hello world‘);
4 )
5 
6 btn.addEventListener(‘click‘, function () 
7      alert(‘hello javascript‘);
8 )

 

　　3、attachEvent 方式（IE老版本特有的方法 IE6-10坚持）

　　　　　　语法格式：

变量名.attachEvent(on事件名,function())

　　　　　　Demo :

1  // 第一个参数，事件的名称前要加 on
2 btn.attachEvent(‘onclick‘, function () 
3      alert(‘hello world‘);
4 );
5 
6 btn.attachEvent(‘onclick‘, function () 
7      alert(‘hello javascript‘);
8 );

 

　　由于以上的三种方式存在兼容问题，下面来封装一个函数来解决这个问题；

 1 // 处理注册事件的兼容性问题
 2 // element 事件源  eventName 事件名称   fn事件函数 
 3     function addEventListener(element, eventName, fn) 
 4       // 判断当前浏览器是否支持addEventListener 方法
 5       if (element.addEventListener) 
 6         element.addEventListener(eventName, fn);  // 第三个参数 默认是false
 7        else if (element.attachEvent) 
 8         element.attachEvent(‘on‘ + eventName, fn);
 9        else 
10         // 相当于 element.onclick = fn;
11         element[‘on‘ + eventName] = fn;
12       
13     

 

 

二、移除事件的三种方式

　　1、直接事件方式移除事件

　　　　　　语法格式：

变量名.on事件名 = null;

　　　　　　Demo :

1 btn.onclick = function () 
2    alert(‘hello world);
3    // 移除事件
4    btn.onclick = null;    
5 

 

　　2、addEventListener 移除事件

　　　　 使用这种方式移除事件的时候，不能像注册的时候使用匿名函数了，其中提供了 removeEventLister() 的方法

　　　　语法格式：

变量名.removeEventListener(事件名, function)

　　　　Demo：

1 // 声明一个函数
2 function btnClick () 
3       alert(‘hello world‘);
4       // 移除事件
5       btn.removeEventListener(‘click‘, btnClick);
6 
7 btn.addEventListener(‘click‘, btnClick);

 

　　3、attachEvent 移除事件

　　　　使用这种方式移除事件的时候，也不能使用匿名函数，使用 detachEvent() 来移除事件.

　　　　语法格式：

变量名.detachEvent(on事件名，function)；

　　　　　Demo：

1  // chrome 中不支持attachEvent。 IE9-10
2 function btnClick() 
3      alert(‘hello world‘);
4      // 移除事件
5      btn.detachEvent(‘onclick‘, btnClick);
6 
7 btn.attachEvent(‘onclick‘, btnClick);

 

　　由于以上的三种方式存在兼容问题，下面来封装一个函数来解决移除事件的问题：

 1 // 处理移除事件的兼容性处理
 2 function removeEventListener(element, eventName, fn) 
 3   if (element.removeEventListener) 
 4     element.removeEventListener(eventName, fn);
 5    else if (element.detachEvent) 
 6     element.detachEvent(‘on‘ + eventName, fn);
 7    else 
 8     element[‘on‘ + eventName] = null;
 9   
10 
11 
12 // 给 btn 注册和移除事件
13 function btnClick() 
14       alert(‘hello‘);
15       // 移除事件
16      removeEventListener(btn, ‘click‘, btnClick);
17 
18 addEventListener(btn, ‘click‘, btnClick);

 

 

 

三、事件的三个阶段

　　1、第一阶段：捕获阶段

　　2、第二阶段：执行当前事件的元素

　　3、第三阶段：冒泡阶段

　　　　on事件名 只有事件冒泡阶段。

　　　addEventListener 的第三个参数为 false 的时候：事件冒泡；为 true 的时候：事件捕获。

　　　attachEvent 只有两个参数，只有事件冒泡。

　　　通过 事件对象.eventPhase 属性可以查看事件触发时所处的阶段

　　4、事件冒泡的好处：事件委托　

　　　　Demo：

 1 <ul id="ul">
 2     <li>西施</li>
 3     <li>貂蝉</li>
 4     <li>昭君</li>
 5     <li>凤姐</li>
 6     <li>芙蓉姐姐</li>
 7 </ul>
 8 <script>
 9     // 事件委托： 原理事件冒泡
10     var ul = document.getElementById(‘ul‘);
11     ul.onclick = function (e) 
12       // e 事件参数（事件对象）: 当事件发生的时候，可以获取一些和事件相关的数据
13       // 获取到当前点击的li
14       // e.target 是真正触发事件的对象
15       // console.log(e.target);
16       // 让当前点击的li高亮显示
17       e.target.style.backgroundColor = ‘red‘;
18     
19 </script>

 

　　　上面的代码中，当点击 li 的时候，让其高亮显示，可以给所在 ul 注册单击事件，这是因为 点击 li 的时候，会产生 事件冒泡，从而让 ul 也产生点击事件，在这个事件中通过事件对象 event 可以获取真正触发事件的对象 e.target。

四、事件对象

　　1、事件对象

　　　　事件对象，在存在事件函数里面的，并不是我们传递的参数，而是系统自带的一个对象。

　　　　通过事件对象，可以获取事件发生的时候和事件相关的一些数据。

　　2、获取事件对象

　　　　　语法格式：

变量名.onclick = function(e)
     // e 就是事件对象，event的缩写，DOM 标准中，是给事件处理函数一个参数，系统提供  
　　　// 在老版本的 IE 中获取事件对象的方式为 window.event

　　　　  处理事件的兼容性：

e = e || window.event;

　　

　　3、事件对象的属性和方法

　　     （1）e.eventPhase 

　　　　　　获取事件的阶段：1 捕获阶段     2 目标阶段    3 冒泡阶段

　　　（2）e.target

　　　　　　获取真正触发事件的对象，存在浏览器兼容问题。

　　　　　　在老版本的 IE 中， srcElement 是获取真正触发事件的对象

　　　　　　兼容性处理：

var target = e.target || e.srcElement;

　　

　　　（3）e.currentTarget

　　　　　　事件处理函数所属的对象，相当于 this 关键字

　　　（4）e.type 

　　　　　　获取事件的类型，如 click、mouseover、mouseout 等事件

　　　（5）e.clientX / e.clientY

　　　　　　e.elientX 获取鼠标在浏览器的可视区域的 横坐标

　　　　　　e.clientY 获取鼠标在浏览器的可视区域的 纵坐标

　　　（6）e.pageX / e.pageY

　　　　　　e.pageX 获取鼠标在当前页面的横坐标；e.pageY 获取鼠标在当前页面的纵坐标

　　　　　　该属性存在浏览器兼容性问题， IE8 以前不支持

　　　　　　处理兼容性代码：

 

 1 // 获取页面滚动距离的浏览器兼容性问题
 2 // 获取页面滚动出去的距离
 3 function getScroll() 
 4   var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
 5   var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
 6   return 
 7     scrollLeft: scrollLeft,
 8     scrollTop: scrollTop
 9   
10 
11 
12 // 获取鼠标在页面的位置，处理浏览器兼容性
13 function getPage(e) 
14   var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
15   var pageY = e.pageY || e.clientY + getScroll().scrollTop;
16   return 
17     pageX: pageX,
18     pageY: pageY
19   
20 

 

 

 

　　　（7）

　　　（8）

　　4、

五、

六、

七、

八、

九、