JavaScript事件基础知识

最新推荐文章于 2023-12-01 12:29:51 发布
最新推荐文章于 2023-12-01 12:29:51 发布
阅读量4.6k 收藏 8
点赞数 3
分类专栏： JavaScript 文章标签： javascript 事件处理程序 IE事件处理程序 事件对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a153375250/article/details/51132463
版权

目录

一、事件冒泡与事件捕获

当我们在Web页面单击某一个元素的时候，比如某个div元素。仔细想想，我们单击的不仅仅是这一个div元素，一同被单击的还有以该div为圆心的同心圆元素，比如元素的父，外层body、body的父元素html还有外层的document。事件在这些嵌套的元素之间的传播称为事件流。

  • 1、事件冒泡
  • 2、事件捕获

1、事件冒泡

IE的事件流称为事件冒泡，事件从最具体的元素开始，逐级向上传播。我们使用DOM0添加的事件处理程序就是在事件冒泡阶段被处理的。例如：

<html>
  <head>
    <script type="text/javascript">

      window.onload = bubblingHandle;
      function bubblingHandle() {
          //内层div处理程序
          document.getElementById("inner").onmousedown     = function() {
              alert("inner div");
          }
          //外层div处理程序
          document.getElementById("outer").onmousedown = function() {
              alert("outerDiv");
          }

          document.onmousedown = function() {
              alert("document");
          }
      } 
      -->
    </script>
  </head>
  <body>
    <div id="outer" style="background-color:black; padding: 15px;">
        <div id="inner" style="background-color:white; padding: 5px;"></div>
    </div>
  </body>
</html>

当点击内层的白色div时，会依次显示：

inner div
outer div
document

事件传播示意图如下：

事件捕获

网景提出的事件流称为事件捕获，其与IE几乎相反。事件首先由最不具体的元素接收，然后逐级向具体节点传播。

二、DOM0级事件处理

事件，由WEB页面中发生的一些特定行为触发。比如在某个页面元素上按下鼠标左键，按下键盘某个按键，某对象获得或丢失焦点时均会触发对应的事件。JavaScript和HTML的交互就是通过事件来实现的。我们使用事件侦听器对事件进行“注册”，事件发生时便执行相应的代码。

DOM0级事件处理程序以其简单、跨浏览器支持的特点，至今仍为所有浏览器支持。

通过DOM0级方法指定事件处理程序

通过DOM0级方法指定事件处理程序方法很简单，首先取得一个要操作元素的引用，然后接将一个函数赋值给该元素的对应事件处理程序属性。（每个元素包括window和document都拥有自己的事件处理程序属性。）注意，这种方法添加的事件处理程序将在事件流的冒泡阶段被处理。

有关事件处理程序属性，有以下几点需要说明：

1、事件处理程序属性全部小写，以”on”开头，后面跟事件类型：

onclick  //单击鼠标
onload  //图像或页面载入完成
onmouseover  //将鼠标移动到某元素上面
onmousemove  //移动鼠标
onfocus  //对象获得焦点

2、每个元素如img、a、input、form包括window和document都拥有自己的事件处理程序属性。如：

document.getElementById("btn1").onclick  //btn1上单击鼠标
document.getElementById("img1").onmouseover  //鼠标移动到img1
document.getElementById("img1").onmerror  //img1图像无法载入

接下来，给事件处理程序属性赋值即可完成事件处理程序方法的指定。例如，当鼠标移动到”img1”上时，弹出对话框”This is a nice pic!”：

var pic1 = document.getElementById("img1");
pic1.onmouseover = function() {
    alert("This is a nice pic!");
};

特别注意：如果以上代码处于文档的底部，在页面刚刚加载时，我们将鼠标移动到img1上面。有可能由于代码尚未执行，不会弹出我们设定的对话框！如今，这个延迟已经十分短暂。

事件处理程序中的this

通过DOM0级方法指定的事件处理程序，属于元素方法。因此，我们在事件处理程序中的this引用的是该元素！通过以下例子来说明：

<input id="btn1" type="button" value="Click Me" />
...//省略
<script type="text/javascript">
  <!--
  var btn1 = document.getElementById("btn1");
  btn1.onclick = function() {
      alert(this.id + "\n" + this.type + "\n" + this.value);
  };
  -->
</script>

通过DOM0级方法删除事件处理程序

要删除事件处理程序，只需要将对应的事件处理程序属性设置为null即可：

pic1.onmouseover = null;

三、DOM2级事件处理

1、addEventListener与removeEventListener

目前，几乎所有的浏览器都支持DOM0事件模型，但鼓励开发人员使用新的DOM2模型。DOM2模型与DOM0有两个显著区别：

  • 1、DOM2不依赖事件处理程序属性
  • 2、可以同时对对象的同一事件注册多个处理程序，它们按照注册顺序依次执行。

DOM2定义了2个方法：

addEventListener()  //指定事件处理程序
removeEventListener()  //删除事件处理程序

所有DOM节点有包含这两个方法，这两个方法用法如下，它们都接收3个参数，第1个为要处理事件名(不含on)，第2个事件处理函数，第3个布尔变量：

例如我们为按钮btn1的单击事件添加2个事件处理程序，事件处理程序在事件冒泡阶段被处理：

<input id="btn1" type="button" value="Click Me" />
...
<script type="text/javascript">
  <!--
  var btn1 = document.getElementById("btn1");
  var handle1 = function() {
      alert("handle1!");
  }
  var handle2 = function() {
      alert("handle2!");
  }
  btn1.addEventListener("click", handle1, false);
  btn1.addEventListener("click", handle2, false);
  -->
</script>

当单击btn1按钮时，会依次弹出对话框：

handle1!
handle2!

我们可以用removeEventListener()方法来删除我们刚才指定的事件处理程序，注意参数要保持一致：

btn1.removeEventListener("click", handle2, false);

此时单击btn1按钮，只会显示handle1!。

要特别注意的是，如果我们使用匿名函数指定事件处理程序，便无法使用removeEventListener()方法删除事件处理程序：

 btn1.addEventListener("click", function(){
     alert("click!");
 }, false);

 btn1.removeEventListener("click", function(){
     alert("click!");
 }, false);  //无法取消！

这样是无法取消以上指定的事件处理程序的！因为上面addEventListener和removeEventListener中的2个事件处理函数虽然代码相同，实质上是2个不同的函数引用。

另外，强调一点，以上两个函数的第一个参数(要处理的事件名)是没有on前缀的。这一点和IE不同，后面会说明。

tips: IE9, Firefox, Safari, Chrome以及Opera均支持DOM2级事件处理程序。

DOM2事件处理程序中的this

DOM2事件处理程序和DOM0相同，它们的this都在其依附的元素作用域中运行。this的指代参考DOM0的示例。这里之所以要特别指出DOM2的this，是为了和IE事件处理程序进行区分。IE中事件处理程序this与事件指定方式有关。

四、IE事件处理程序及跨浏览器支持

attachEvent()与detachEvent()

IE并没有提供对W3C事件模型的支持，其实现了2个和DOM2模型类似的方法：

attachEvent()
detachEvent()

这两个方法只接收2个参数：事件名称以及事件处理函数。由于IE8及更早版本只支持事件冒泡，这两个方法添加的事件处理程序会在事件冒泡阶段被执行。

和DOM2不同的是：

  • 1、IE事件处理方法运行作用域为全局作用域，this指代window；
  • 2、第一个参数事件名以on为前缀；
  • 3、当为同一对象的相同事件指定多个处理程序时，执行顺序和DOM2相反，IE中以添加它们的相反顺序执行。

例如：

<input id="btn1" type="button" value="Click Me" />
...
<script type="text/javascript">
  <!--
  var btn1 = document.getElementById("btn1");
  var handle1 = function() {
      alert("handle1!" + "\n" + (this === window));
  };
  var handle2 = function() {
      alert("handle2!"+ "\n" + (this === window));
  };
  btn1.attachEvent("onclick", handle1);
  btn1.attachEvent("onclick", handle2);
  -->
</script>

执行结果：

handle2!
true

handle1!
true

跨浏览器支持

虽然可以使用屏蔽浏览器差异的JS库，实际上，我们自己编写一个跨浏览器兼容的事件处理代码并不是一件困难的事情，同时更有利于我们对原生JavaScript的学习理解。我们使用一个习惯上称为EventUtil的对象来进行跨浏览器事件处理：

var EventUtil = {
    addEventHandler : function(element, eventType,        handler) {
        if(element.addEventListener){
            element.addEventListener(eventType, handler, flase);
        } else if(element.attachEvent) {
            element.attachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = handler;
        }
    },

    removeEventHandler : function(element, eventType, handler) {
        if(element.aremoveEventListener){
            element.addEventListener(eventType, handler, flase);
        } else if(element.detachEvent) {
            element.attachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = null;
        }
    }
}

为了保证事件处理代码能够在大多数浏览器中一致地运行，我们这里只关注冒泡阶段。以上代码使用浏览器能力检测，首先检测是否支持DOM2级方法addEventListener和removeEventListener，如果支持则使用该方法；如果不支持该方法，检测是否是IE8级更早版本的attachEvent或detachEvent方法，若支持则使用该方法；如果对以上2种方法都不支持，则使用DOM0级方法。要注意，DOM0级对每个事件只能指定一个事件处理程序。

以上对象使用示例如下：

var btn1 = document.getElementById("btn1");
var handle1 = function() {
    alert("handle1!" + "\n" + (this === window));
};
var handle2 = function() {
    alert("handle2!"+ "\n" + (this === window));
};
EventUtil.addEventHandler(btn1, "click", handler1);
EventUtil.addEventHandler(btn1, "click", handler2);

EventUtil.removeEventHandler(btn1, "click", handler2);

五、事件对象

在触发某个事件时，会产生一个event对象。该对象中包含与事件有关的信息。例如触发事件的元素、事件的类型、与特定事件相关的如鼠标位置信息等。

  • 1、DOM事件对象
  • 2、IE事件对象与跨浏览器事件对象

1、DOM事件对象

不论使用DOM0级还是DOM2级方法指定事件处理程序，事件触发时都会自动将一个event对象传入事件处理程序，例如：

var btn1 = document.getElementById("btn1");

btn1.onmouseover = function(evnt) {
    alert(evnt.type);
}

var handle = function(evnt) {
    alert(evnt.type);
};
btn1.addEventListener("click", handle, false);

当鼠标移动到btn1上时，会弹出:

当点击btn1时，会弹出：

以上是一个简单的event对象的示例。event对象中的type属性是一个只读字符串属性，其中包含着事件的类型。例如我们上例中的click和onmouseover。event对象中包含有大量的有关事件的属性和方法（例如event.stopPropagation()方法可用于停止事件在捕获或者冒泡阶段的继续传播，preventDefault()方法会取消阻止事件的行）在此就不一一列举了。其中常用的如下：

属性/方法值类型读写描述
currentTargetElementreadonly事件处理程序当前正在处理的元素
targetElementreadonly事件的目标
typeStringreadonly触发事件的类型
preventDefaultFunctionreadonly取消事件默认行为，如链接的默认行为就是被单击时跳转到href指定的url
stopPropagationFunctionreadonly取消事件进一步冒泡或捕获

2、IE事件对象与跨浏览器事件对象

IE事件对象

在IE中，当使用DOM0级指定事件处理程序时，event对象被认为是window的一个属性，例如获取鼠标点击坐标的代码：

var mouseLoc = function() {
    var loc = "x: " + window.event.screenX + "\n" +
              "y: " + window.event.screenY;
    alert(loc);
};

当使用attachEvent()方法指定事件处理程序时，event对象会被作为参数传入事件处理程序，我们将以上的代码重写：

var mouseLoc = function(event) {
    var loc = "x: " + event.screenX + "\n" +
              "y: " + event.screenY;
    alert(loc);
};
btn1.attachEvent("onclick",  mouseLoc);

IE中event对象的相关属性方法：

属性/方法值类型读写描述
cancelBubbleBooleanread/write默认为false，置为true时取消事件冒泡（同DOM中stopPropagation）
returnValueBooleanread/write默认为true，设为false取消事件默认行为（同DOM中preventDefault）
srcElementElementreadonly事件目标
typeStringreadonly事件类型

跨浏览器事件对象

解决跨浏览器问题的思路是一贯的，我们可以对浏览器进行能力检测，这里我们对上面的EventUtil对象进行扩展，对我们学习原生JS，这是一个很漂亮的对象：

var EventUtil = {
    addEventHandler : function(element, eventType, handler) {
        if(element.addEventListener){
            element.addEventListener(eventType, handler, flase);
        } else if(element.attachEvent) {
            element.attachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = handler;
        }
    },

    removeEventHandler : function(element, eventType, handler) {
        if(element.aremoveEventListener){
            element.addEventListener(eventType, handler, flase);
        } else if(element.detachEvent) {
            element.attachEvent("on" + eventType, handler);
        } else {
            element["on" + eventType] = null;
        }
    },

    getEvent: function (event) {
        return event ? event : window.event;
    },

    getTarget: function (event) {
        return event.target || event.srcElement;
    },

    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubbles = true;
        }
    },

    getRelatedTarget: function (event) {
        if (event.relatedTarger) {
            return event.relatedTarget;
        } else if (event.toElement) {
            return event.toElement;
        } else if (event.fromElement) {
            return event.fromElement;
        } else { return null; }
    }
}
RockyHills
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Javascript基础知识（二）事件
10-25
本文是javascript系列文章的第二篇，主要介绍javascript事件，都是本人的一些心得，希望对大家有所帮助
javascript基础知识整理
10-29
对于刚开始学习js的朋友，非常有帮助，主要知识点都已经整理好了。
Javascript 事件
qq_42839746的博客
09-14 1054
JavaScript使我们有能力创建动态页面，网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。
Javascript事件
qq_61483796的博客
09-03 788
JavaScript事件相关知识，及相关细节
常见的事件
weixin_39427688的博客
04-17 504
常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4. 鼠标事件： ...
JavaScript事件
weixin_43466575的博客
04-10 510
1、事件概述 （1）事件 事件：可被理解为是JavaScript侦测到的行为。 举例：这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域等。 （2）事件处理程序 事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。 举例：用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击”。 （3）事件驱动式 事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为
JavaScript中常见的五种事件
最新发布
weixin_50993868的博客
12-01 1008
鼠标事件：与鼠标交互相关的事件，包括点击、双击、鼠标移动、鼠标悬停、鼠标按下和释放等。页面事件：与整个页面相关的事件，包括页面加载完成、页面卸载、窗口大小改变、滚动等。表单事件：与表单元素交互相关的事件，包括表单提交、表单重置、输入内容改变等。键盘事件：与键盘交互相关的事件，包括按键按下、按键释放、键盘输入等。编辑事件：与文本编辑相关的事件，包括复制、粘贴、剪切、选中文本等。的CSS类，设置了一个红色的正方形盒子，并为其添加了鼠标悬停效果。处理鼠标点击事件，将盒子的背景颜色改为绿色；
JavaScript基础知识学习笔记
10-25
本文是初学javascript的时候记的学习笔记，简单介绍了javascript的定义及用法，并附上示例，适合初学者们，老鸟请出门左转。
JavaScript常用基础知识强化学习
10-23
主要介绍了JavaScript常用基础知识强化学习，需要的朋友可以参考下
JavaScript基础知识整理
02-26
JavaScript一种直译式脚本语言，一种基于对象和事件驱动并具有安全性的客户端脚本语言； 也是一种广泛应用客户端web开发的脚本语言。 简单地说，JavaScript是一种运行在浏览器中的解释型的编程语言。
javaScript中的事件
happy_kx的博客
03-28 2233
1.事件的概念 在js中的事件是：用户在页面上操作，然后外面要调用函数来处理。 比如： 1.点击了登录按钮，调用登录函数执行登录操作 2.鼠标拖动，调用函数实现拖动 事件触发： 用户在页面上操作（如点击按钮，鼠标话滚动，鼠标点击，鼠标松开，文本获取焦点等...）,就是事件触发。 2.事件的模式: JavaScript有两种事件实现模式: 内联模式, 脚本模式. 内联模式： 例如： <input type="button" value="按钮" onclick=...
JS的事件介绍
热门推荐
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
JavaScript事件介绍
西凉的悲伤博客
08-15 323
事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。用户选择、点击或将光标悬停在某一元素上。用户在键盘中按下某个按键。用户调整浏览器窗口的大小或者关闭浏览器窗口。网页结束加载。表单提交。
JavaScript中的事件循环（event loop）机制
官方推荐
09-05 9373
JavaScript中的事件循环（event loop）机制
js的各种事件
m0_51354601的博客
04-08 1391
【代码】js的各种事件。
JavaScript 事件
weixin_46121540的博客
02-01 162
JavaScript 事件
JavaScript中事件及其详解
qq_46642326的博客
11-16 1119
JS的dom操作可以改变网页内容，结构和样式，我们就可以利用dom操作元素来改变元素里面的内容属性等。：回调函数的特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数。onmouseover和onmouseenter的区别：前者会影响子元素的触发事件，后者不会影响。onmouseover：鼠标移入某个元素触发。【修改元素属性】：先获取元素，注册事件，处理程序，然后直接调用元素的属性赋值。onkeyup：某个键盘按键被松开。事件源：事件被触发的对象，就是谁触发了这个事件。
JavaScript基础知识
08-02
回答: JavaScript是一门最流行的运行在浏览器的脚本语言，它与Java是两种完全不同的语言，无论在概念还是设计上。 JavaScript是一种轻量级的编程语言，可由所有的现代浏览器执行。它最早是在HTML网页上使用，用来给...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值