JavaScript 之 事件(详解)

时间:2021-12-07 15:08:07

一、注册事件的三种方式

  1、直接事件方式

    语法格式

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

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

  2、addEventListener 方式(IE9 以后才支持)

      语法格式

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

      Demo :

  // 浏览器兼容性问题  IE9以后才支持
btn.addEventListener('click', function () {
alert('hello world');
}) btn.addEventListener('click', function () {
alert('hello javascript');
})

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

      语法格式:

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

      Demo :

  // 第一个参数,事件的名称前要加 on
btn.attachEvent('onclick', function () {
alert('hello world');
}); btn.attachEvent('onclick', function () {
alert('hello javascript');
});

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

 // 处理注册事件的兼容性问题
// element 事件源 eventName 事件名称 fn事件函数
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}

二、移除事件的三种方式

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

      语法格式

变量名.on事件名 = null;

      Demo :

 btn.onclick = function () {
alert('hello world);
// 移除事件
btn.onclick = null;
}

  2、addEventListener 移除事件

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

    语法格式

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

    Demo:

 // 声明一个函数
function btnClick () {
alert('hello world');
// 移除事件
btn.removeEventListener('click', btnClick);
}
btn.addEventListener('click', btnClick);

  3、attachEvent 移除事件

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

    语法格式

变量名.detachEvent(on事件名,function);

     Demo:

  // chrome 中不支持attachEvent。 IE9-10
function btnClick() {
alert('hello world');
// 移除事件
btn.detachEvent('onclick', btnClick);
}
btn.attachEvent('onclick', btnClick);

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

 // 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
if (element.removeEventListener) {
element.removeEventListener(eventName, fn);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
} // 给 btn 注册和移除事件
function btnClick() {
alert('hello');
// 移除事件
removeEventListener(btn, 'click', btnClick);
}
addEventListener(btn, 'click', btnClick);

三、事件的三个阶段

  1、第一阶段:捕获阶段

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

  3、第三阶段:冒泡阶段

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

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

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

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

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

    Demo:

 <ul id="ul">
<li>西施</li>
<li>貂蝉</li>
<li>昭君</li>
<li>凤姐</li>
<li>芙蓉姐姐</li>
</ul>
<script>
// 事件委托: 原理事件冒泡
var ul = document.getElementById('ul');
ul.onclick = function (e) {
// e 事件参数(事件对象): 当事件发生的时候,可以获取一些和事件相关的数据
// 获取到当前点击的li
// e.target 是真正触发事件的对象
// console.log(e.target);
// 让当前点击的li高亮显示
e.target.style.backgroundColor = 'red';
}
</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 以前不支持

      处理兼容性代码:

 // 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
} // 获取鼠标在页面的位置,处理浏览器兼容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}

   (7)扩展

    offsetLeft / offsetTop ,获取当前元素在可视区域内的距离左边和上面的距离

    Demo:

 <div id="box">  </div>
<script>
var box = document.getElementById('box');
box.onclick = function() {
console.log(this.offsetLeft); // 获取盒子距离左边的距离
console.log(this.offsetTop); // 获取盒子距离上边的距离
}
</script>

  4、取消默认行为

   (1) 在函数中  return false     就可以取消默认行为的执行

   (2)e.preventDefault()            DOM中取消默认行为的标准方法

   (3)e.preventValue = false;    IE 的老版本,非标准方式

  5、取消冒泡

   (1)e.stopPropagation()         DOM 中停止事件传播的标准方法

   (2)e.cancleBubble = true      非标准的方式,老版本的 IE 支持,标准中已经废弃

  6、常见的事件

   (1)鼠标事件

      • click:单击事件,元素被点击是触发该事件
      • change:内容改变事件,当 input、select、textare 等元素内容发生改变时,触发该事件
      • focus:当元素获取焦点时触发该事件
      • blur: 当元素失去焦点时触发该事件
      • onload:当打开页面时,就会执行该事件,实际开发过程中,常常使用该事件在页面打开时初始化JS。
      • mouseover:鼠标移入触发该事件
      • mouseout:鼠标移出触发该事件
      • mousemove:鼠标在该元素上面移动时触发该事件
      • mouseup:鼠标按键放开时触发
      • mousedown:鼠标按键按下触发
      •  mouseenter:鼠标移入触发该事件
      •    mouseleave:鼠标移出触发该事件

     注意mouseenter / mouseleave  不会触发事件冒泡;mouseover / mouseout     会触发事件冒泡

   (2)键盘事件

      •    keydown:键盘按下的时候,这时候所按的键还没有落入文本框

      • keyup:键盘弹起的时候,这时候按的键已经落入文本框了

      扩展:可以根据 e.keyCode 来获取键的 ASCII 码。