`
talentluke
  • 浏览: 612432 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

关于JavaScript 的事件

JavaScriptIE浏览器FirefoxHTML 
阅读更多

A  事件流（event  flow ）

事件模型分为两种：冒泡型事件、捕获型事件。

 

 

冒泡型（dubbed  bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。

捕获型（event  capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。

 

 

 

 

捕获型事件也被称作自顶向下（DOM层次）的事件模型。

由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。

 

B  事件监听

i >  通用监听方法

示例一：

<p onclick="alert('点击了');">Click Me</p>

 

 

示例二：

<html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
  <script type="text/javascript">
 
   // 在onload 事件中添加所有标签的事件
   window.onload = function(){
     // 找到对象
     var o_p = document.getElementById("myp");
     // 添加对象的onclick 事件
     o_p.onclick = function(){
        alert("我被点击了");
     }
   }
  </script>
</head>
<body>
  <p id="myp">Click Me</p>
</body>
</html>

此代码实现了结构与行为的分离。

 

给浏览器添加监听方法，分为两种：IE 中的监听方法、标准DOM 的监听方法。

 

 

ii >  IE 中的监听方法

在IE 浏览器中，每个元素都有两个方法来处理事件的监听。分别是：attachEvent( ) 和 detachEvent( ) 。

附加事件方法：[object].attachEvent(“事件名”，方法名);

分离事件方法：[object].detachEvent(“事件名”，方法名);

                    如：o_p.detachEvent("onclick",click_A);

示例：

<html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
  <script type="text/javascript">
  <!--
     function click_A(){
       alert("click_A");
       //删除监听函数
       o_p.detachEvent("onclick",click_B);
     }
 
     function click_B(){
       alert("click_B, 我只调用一次。");
     }
 
     var o_p;
     window.onload = function(){
       o_p = document.getElementById("myP");
       // 添加监听函数 click_A
       o_p.attachEvent("onclick",click_A);
       // 添加监听函数 click_B
       o_p.attachEvent("onclick",click_B);
     }
  //-->
  </script>
</head>
<body>
  <p id="myP">Click Me</p>
</body>
</html>

注意：

           ●  使用这种方式可以为同一元素添加多个监听函数；

           ●  在IE 浏览器中，函数的执行顺序与函数的添加顺序相反；

           ●  在IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用；

 

 

iii >  标准DOM 的监听方法

在使用标准DOM 的浏览器中，每个元素也有两个方法来处理事件的监听。分别是：addEventListener( ) 和 removeEventListener( ) 。

添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型 );

移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型 );

注意：

  这里的“事件名”不能带 on ，如：click（如果是onclick 则错误！）

“事件模型”为boolean 类型，通常设置为 false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件）

 

示例：

<html>
<head>
  <title> demo </title>
  <meta name="Author" content="xugang" />
  <script type="text/javascript">
  <!--
     function click_A(){
       alert("click_A");
       //删除监听函数
       o_p.removeEventListener("click",click_B,false);
     }
 
     function click_B(){
       alert("被click_A删除, 一次都不能调用。");
     }
 
     var o_p;
     window.onload = function(){
       o_p = document.getElementById("myP");
       // 添加监听函数 click_A
       o_p.addEventListener("click",click_A,false);
       // 添加监听函数 click_B
       o_p.addEventListener("click",click_B,false);
     }
  //-->
  </script>
</head>
<body>
  <p id="myP">Click Me</p>
</body>
</html>

在Firefox 下运行通过，在IE 下报错。

注意：

           ●  使用这种方式同样可以为同一元素添加多个监听函数；

           ●  在Firefox 浏览器中，函数的执行顺序与函数的添加顺序一致（Firefox 与IE 正好相反）；

           ●  在Firefox 浏览器中，这种方式添加的函数是执行外一个再执行另一个（逐个执行）；

C  事件对象

i >  在IE 浏览器中，事件对象是window 对象的一个属性event 。访问方式如下：

function getEvent(){
  var o_event = window.event;
}

event 对象在事件发生时被访问，执行完函数后就消失了。

 

 

ii >  在标准的DOM 中，事件对象是作为处理函数的唯一参数来获得。访问方式如下：

function getEvent(_event){
   var o_event = _event
}

 

因此，为了兼容各种浏览器，通常采用如下方法：

function getEvent(_event){
  // Firefox下参数_event 就是event对象 
 
  // IE 下获得 event对象 
  if(window.event)_event = window.event;
 
  // 显示触发的事件名称
  alert(_event.type);
}

 

下面列出了事件常用的几个属性和方法（区别）：

 

IE 标准DOM 说明
cancelBubble cancelBubble 是否冒泡(标准DOM中只读)
无 stopPropagation( ) 阻止事件向上冒泡的方法
无 charCode 按下按键的Unicode 值
keyCode keyCode IE 中keypress 事件时表示按键的Unicode 值；
标准DOM 中keypress 事件时为0；
其余情况下，keyCode 为按键的数字代号。
srcElement target 触发事件的元素(对象源)
type type 事件的名称

此处只列出了事件成员的一小部分。

注意：

在IE 浏览器中，获得触发事件的对象源（HTML标签）是通过event 对象的srcElement 属性；

在标准的DOM 中，获得触发事件的对象源（HTML标签）是通过event 对象的target 属性；

获取事件目标的示例：

<html>
<head>
<title>事件的目标</title>
<script language="javascript">
function handle(oEvent){
    //处理兼容性，获得事件对象
    if(window.event) oEvent = window.event;
 
    var oTarget;
    //处理兼容性，获取事件目标
    if(oEvent.srcElement)
         oTarget = oEvent.srcElement;
    else oTarget = oEvent.target;
    
    //弹出目标的标记名称
    alert(oTarget.tagName);       
}
window.onload = function(){
    var obj = document.getElementsByTagName("a")[0];
    obj.onclick = handle;
}
</script>
</head>
<body>
    <a href="#">获得事件源的示例</a>
</body>
</html>

 

D  键盘事件

 

事件 说明
keydown 按下键盘上的某个键触发。（一直按住某键则会持续触发）
keypress 按下某个按键并产生字符时触发。（即忽略Shift 、Alt 、Ctrl 等功能键）
keyup 释放某个按键时触发。

触发的顺序为：keydown ---> keypress ---> keyup

 

i >  关于keyCode属性和charCode 属性

keyCode属性：  表示键盘按键码。因此输入“a”字母和“A”字母时，都是显示键盘码 65 ；

charCode 属性：表示输入字符码。因此输入“a”字母和“A”字母时，

                                 分别显示 97（a 字符码）和 65（A 字符码）；

注意：

在标准的DOM 中：既有keyCode属性，还有charCode 属性。

        但在标准的DOM 中，keypress 事件中keyCode 属性值始终为0 值；

 

 

在IE 浏览器中：事件对象只有keyCode属性，没有charCode 属性。

        但在IE 浏览器中，keypress 事件中的keyCode 属性值等同于标准DOM 中的charCode 属性的值；

示例代码：

<html>
<head>
<title>键盘事件</title>
<script language="javascript">
function handle(oEvent){
 
    if(window.event){
        //处理兼容性，获得事件对象
        oEvent = window.event;
 
        //设置IE的charCode值
        oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
    }
    var oDiv = document.getElementById("display");
    //输出测试
    oDiv.innerHTML += oEvent.type               // 事件名称
      + ": charCode:" + oEvent.charCode         // 字符码 charCode
      + " keyCode:" + oEvent.keyCode + "<br>";  // 键盘码 keyCode
}
window.onload = function(){
    var oTextArea = document.getElementsByTagName("textarea")[0];
    oTextArea.onkeypress = handle;
    oTextArea.onkeydown = handle;
}
</script>
</head>
<body>
<spa
分享到：
| js获取Session问题
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ppk关于javascript事件的讲解.rar

    在这个"ppk关于javascript事件的讲解"教程中，我们将深入探讨JavaScript事件处理机制及其应用。 首先，JavaScript事件是网页中发生的特定动作，比如鼠标点击、键盘输入、页面加载等。当这些动作发生时，JavaScript...

    JavaScript 事件处理 事件绑定 示例代码

    事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...

    第三章 JavaScript事件

    了解 JavaScript 事件是非常重要的，掌握事件流、事件冒泡、事件捕获和 DOM 事件流，以及事件处理程序的知识点，可以帮助我们更好地理解和使用 JavaScript 事件，提高 WEB 程序员的开发效率和质量。

    JavaScript事件机制详细研究

    JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...

    JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码

    JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例代码JavaScript 事件处理 常用事件（鼠标事件、键盘事件、表单事件）示例...

    JavaScript程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...

    javascript事件详解

    JavaScript事件详解 JavaScript是一种基于浏览器的脚本语言，它的事件机制是实现动态交互的重要部分。在JavaScript中，事件是用户或浏览器对网页进行操作时触发的特定动作，比如点击按钮、鼠标移动等。本文将详细...

    头歌教学实践平台 Web前端开发基础 JavaScript学习手册十五：事件处理

    JavaScript是Web前端开发的核心技术之一，它赋予网页动态交互的能力，让用户体验更加丰富。...在头歌教学实践平台上，你可以找到更多关于JavaScript事件处理的实例和练习，以提升你的Web前端开发技能。

    3 妙味课堂原创JavaScript视频教程 事件详解3课资料

    以下是关于JavaScript事件的详细讲解： 1. **事件基础**：事件是用户或浏览器与页面进行交互时发生的特定情况，例如点击按钮、滚动页面或填写表单等。JavaScript通过监听这些事件来执行相应的处理函数，实现动态...

    JavaScript 事件处理 二级菜单级联 示例代码

    JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...

    JavaScript 事件处理 下拉列表和可选项 示例代码

    JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...

    propagate:一系列关于 Javascript 事件的演示

    JavaScript 事件是网页交互的核心，它们允许用户与页面进行互动并触发特定的代码执行。"propagate" 这个主题通常指的是事件冒泡和事件传播的概念。在这个项目中，我们可能看到了一系列的演示，用于解释和展示 ...

    使用webview加载本地html页面,并处理html页面中的javascript事件

    接下来，为了使WebView能够执行JavaScript代码并处理JavaScript事件，我们需要启用JavaScript支持。我们可以调用`WebSettings`类的`setJavaScriptEnabled()`方法： ```java WebSettings settings = webView....

    关于JavaScript的PPT

    在关于JavaScript的PPT中，重点讲述了如何利用JavaScript来处理和修饰HTML表单，以便提升用户体验和数据验证。 首先，JavaScript提供了丰富的浏览器对象，如window对象用于控制浏览器窗口，比如在网页加载时弹出...

    JavaScript程序设计课件：第 5 章 事件和事件处理.ppt

    例如：&lt;html&gt; &lt;head&gt; &lt;title&gt; Example: 窗口的 load 和 unload 事件 &lt;/title&gt; &lt;script language="JavaScript"&gt; function lh() { alert(" 窗口执行了 load 事件 "); } function ulh() { alert(" 窗口执行了 unload ...

    JavaScript动态加载事件

    实现JavaScript 动态加载事件

    第6章 JavaScript中的事件与事件处理

    第6章 JavaScript中的事件与事件处理

    关于javascript的资料关于javascript的资料

    以上就是关于JavaScript的一些核心知识点，学习并掌握这些内容，将有助于成为一名优秀的前端开发工程师。JavaScript作为互联网时代的重要技术，其应用场景不断扩展，从网页到服务器，从桌面应用到移动应用，无处不在...

    javascript事件查询综合

    JavaScript事件查询是Web开发中的重要概念，它涉及到用户与网页交互时的各种响应处理。这篇文档“javascript事件查询综合”很可能是对JavaScript事件处理机制的详细阐述。在Web开发中，JavaScript事件模型允许开发者...

    javascript事件扩展

    关于javascript事件even的扩展讲义，详细讲解，欢饮下载

Magicbox
Global site tag (gtag.js) - Google Analytics