`
风雪涟漪
  • 浏览: 496825 次
  • 性别: Icon_minigender_1
  • 来自: 大连->北京
博客专栏
952ab666-b589-3ca9-8be6-3772bb8d36d4
搜索引擎基础（Search...
浏览量：8764
Ae468720-c1b2-3218-bad0-65e2f3d5477e
SEO策略
浏览量：17660
社区版块
存档分类
最新评论

Javascript 在浏览器环境中 (六) 事件

浏览器JavaScriptIEFirefoxOpera 
阅读更多

事件

事件的例子很多了。如用户输入，点击按钮等等。可以把一个javascript函数赋给一个事件(这个可以叫做事件监听器或者事件处理器)，当事件发生了，就会执行这个函数。

 

基于内置的HTML属性

添加一个时间最快的方法就是，直接添加到html属性中，代码如下

<div onclick="alert('aaa!')">click</div>

当用户点击这个div的时候，alert('aaa')就被执行了。发现了这种方式并没有明显的函数来监听这个事件，但是这个函数已经在后台创建了。

 

元素的属性

另一种方法是，把一个函数赋给元素的属性。代码如下

<div id="my-div">click</div>
<script type="text/javascript">
  var myelement = document.getElementById('my-div');
  myelement.onclick = function() {
    alert('aaa!');
    alert('bbb!');
  }
</script>

这个方法很面显得要比第一种方式要好，因为它实现了html代码和javascript代码的分离了。 一定要知道html的作用在于内容，而javascript是行为，css是用于样式的。我们尽可能的让这三部分进行分离。

缺点是灵活度不够，只能一个函数监听一个事件。下面的方法就可以解决这个问题。

DOM事件监听器

最好的方式是使用时间监听器，这样就可以用许多函数监听一个事件。当发生事件的时候，所有监听的函数就会执行。所有的函数都是独立的，不需要管其他的函数。代码如下

var mypara = document.getElementById('my-div');
mypara.addEventListener('click', function() {alert('Boo!')}, false);
mypara.addEventListener('click', console.log, false);

这段javascript用addEventListener去监听click事件。第一个参数是事件的类型，第二个参数是一个函数，匿名函数也可以。当click发生click事件的时候，函数被执行，并且传入一个event对象。

 

事件的捕捉和冒泡

下面让我们详细的来说下 addEventListener() 第三个参数。

<body>
  <ul>
    <li><a href="http://phpied.com">my blog</a></li>
  </ul> 
</body>

 当你点击这个链接，当然也同样点击了li,ul,body.一个click链接，就相当于点击了这个document了。这就是事件的传播。事件的传播可以用两种方法实现

  • 时间的捕捉-这个点击事件首先发生在document上，然后是body，然后是ul,然后是li，最后是a。
  • 事件的冒泡-和上一个过程刚好相反。先从a开始在传播到document。

DOM 2规范建议事件的传播分为三个阶段。捕获，目标，冒泡。意思就是document->a 再从 a->document.这个过程。。。event对象有eventPhase属性，能返回当前的阶段。

 

说说残酷的现实把。大家都知道历史上是ie和netscape，它们都实现了规范的一部分。IE实现的是冒泡，而netscape实现的是捕获。现在firefox,opera都实现了三个阶段。但是ie还是冒泡。。。

 

我们看看关于事件传播的实际意义

  • 关于第三个参数就是是否使用事件的传播。一般为了跨浏览器，这个参数最好设为false以及用冒泡的实现方式。
  • 可以在监听器中，控制事件的传播。因此可以停止冒泡。我们可以使用事件对象的stopPropagation方法。
  • 我们也可以用事件代理。如果在div有10个按钮的话，你可以把每个按钮添加一个监听器。但是最好的方法是监听div。当事件发生后，判断哪个按钮被点击就可以了。

在IE中，用setCapture和releaseCapture方法，但是仅仅适用于鼠标事件。

 

停止事件的传播

<p id="closer">final</p>

 一个函数用来处理click事件。

function paraHandler(){alert('clicked paragraph');}

 接下来让这个函数作为一个事件的监听器

var para = document.getElementById('closer');
para.addEventListener('click', paraHandler, false);

 接下来，在分别为document,body,window添加监听器。

document.body.addEventListener('click', function(){alert ('clicked body')}, false);
document.addEventListener('click', function(){alert ('clicked doc')}, false);
window.addEventListener('click', function(){alert('clicked window')}, false);

 需要注意的是DOM规范并没有提到关于window的事件，DOM处理的是DOCUMENT和浏览器没啥关系。IE是不会有window的事件传播的，而firefox可以。

 

我们测试一下。执行的顺序如下

clicked paragraph
clicked body
clicked doc
clicked window

 

这个就可以看出来事件的传播。与addEventLister()相反的方法是removeEventListener().参数都是相同的。让我们移除这个监听器。

para.removeEventListener('click', paraHandler, false);

 如果这么做会发现，结果如下

clicked body
clicked doc
clicked window

 

让我们来看看如何停止事件的传播。你可以调用 stopPropagation() 方法。

function paraHandler(e){
  alert('clicked paragraph');
  e.stopPropagation();
}
para.addEventListener('click', paraHandler, false);

 当我们再次点击p的时候，发现只弹出一个alert。事件停止了传播。

 

需要注意的是，removeEventListener不能移除匿名函数的情况，这两个匿名函数是两个内存，下面的代码是不能移除监听器的。

document.body.removeEventListener('click',
    function(){
        alert('clicked body')
    }, 
false); //  不能移除监听器。

 

阻止默认的行为

有许多浏览器事件有默认的行为。如link就是个例子。你click link默认的行为是跳转到另一个页面。我们可以禁止这个链接的行为。我们可以调用 preventDefault()方法去实现。

 

下面个例子就是在click链接之后，有提示信息出现。来确认是否跳转。代码如下

//  获取所有链接的对象
var all_links = document.getElementsByTagName('a'); 
for (var i = 0; i < all_links.length; i++) { // 循环链接
  all_links[i].addEventListener(
    'click', // 事件的类型
    function(e){事件的函数
      if (!confirm('Are you sure you want to follow this link?')){
        e.preventDefault();
      }
    },
    false); //事件的捕获为false
}

 注意不是所有的事件都可以阻止。

 

跨浏览器的事件监听器

现在的大部分浏览器都支持DOM1规范。在DOM2规范之前，事件并没有规范化。所以出现了大量浏览器事件兼容 的问题。先看段代码

document.addEventListener('click', function(e){}, false);

让我们看看IE中有啥不一样的。

  • 在IE中并没有addEventListener方法。在IE5之后可以用attachEvent
  • 当使用attachEvent,click变为onclick.
  • 如果有标签属性的方式来监听事件，是不会有event对象传入到函数中的。(就是开篇所说的前两个实现事件的方式。。)但在IE中，无论是什么方式，IE都会传入一个window.event。
  • 在IE中，不会获取target属性，来知道哪个元素上的事件发生了。但是我们可以用srcElement来取代它。
  • 以前说过了，IE中没有事件的捕获，只有事件的冒泡。
  • 并没有stopPropagation()方法，可以设置cancelBubble属性为true。
  • 没有preventDefault() 方法，而是用returnValue为false来取代它。
  • 删除监听器可以用 detachEvent(). 来取代removeEventListener() 

下面写一个跨浏览器的例子

function callback(evt) {
  evt = evt || window.event;//如果evt不存在，说明是ie，赋给evt一个window.event.
  //判断target是否存在，不存在的话就是ie用evt.srcElment来取代标准的target.
  var target = (typeof evt.target !== 'undefined') ? evt.target : evt.srcElement;
  // 下面可以写业务逻辑了。

}
// 开始监听一个click事件。
if (document.addEventListener){ // 如果存在就是FF
  document.addEventListener('click', callback, false); 
} else if (document.attachEvent){ // 不存在就是IE
  document.attachEvent('onclick', callback);
} else {//其他的浏览器
  document.onclick = callback;
}

 

事件的类型

上面说的例子都是针对click事件的，下面来说下事件的类型。这些事件都是各个浏览器通用的事件，每个浏览器的事件各不相同。如果需要其他特殊的事件就要去查看文档了。

  • 鼠标事件：mouseup,mousedown,click(就是mousedown,mouseup的连贯),dbclick
  • 键盘事件：keydown,keypress,keyup.
  • load,一个图片或者页面以及它所有的元素加载完毕执行的事件，Unload-用户离开页面。beforeunload-一般用来提示用户离开页面。
  • abort:在firefox中用户停止页面的读取，在IE中是停止图片的读取。
  • error:IE和Firefox中javascript报错，或者在IE中，图片不能读取。
  • resize:浏览器大小更改。scoll，页面scoll的时候，contextmenu(右键的菜单)
  • focus-进入一个表单
  • blur-离开一个表单
  • change-在值改变后，离开表单。
  • select-在text 域中选取text
  • reset,submit.。。。

 

分享到：
| 外观模式(Facade Pattern) 追MM
评论
发表评论

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

相关推荐

    JavaScript 在浏览器环境中的模块管理.

    JavaScript 在浏览器环境中的模块管理.，供大家一起共同分享学习。

    Sequential在浏览器中可视化JavaScript代码执行的环境

    Sequential - 在浏览器中可视化JavaScript代码执行的环境

    js浏览器环境项目测试工具库

    js浏览器环境项目测试工具库

    JavaScript判断浏览器运行环境的详细方法

    主要给大家介绍了关于JavaScript判断浏览器运行环境的详细方法，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

    Node.js Javascript运行环境(runtime environment)

    Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。 V8引擎执行Javascript的速度非常快，性能非常好。 [1] Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建...

    JavaScript教程

    　JavaScript程序运行环境 　编写第一个JavaScript程序 • 二、 JavaScript基本数据结构 　JavaScript代码的加入 　基本数据类型 　表达式和运算符 　范例：跑马灯效果 • 三、 JavaScript程序构成 　程序控制流 ...

    浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入

    在《浏览器环境下JavaScript脚本加载与执行探析之defer与async特性》中，我们研究了延迟脚本(defer)和异步脚本(async)的执行时机、浏览器支持情况、浏览器bug以及其他的细节问题。而除了defer和async特性，动态脚本...

    javascript 使用手册

    　JavaScript 是网景（Netscape）公司开发的一种基于客户端浏览器、面向（基于）对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。 JavaScript的特点： 简单、易学、易用； 跨平台；IE、...

    脚本化浏览器窗口

    确定JavaScript代码在什么浏览器中运行，并且获取有关客户端环境的其他信息。 在浏览器窗口的状态栏显示任意的文本。 处理在一个窗口中发生的未捕获的JavaScript错误。 编写和多个窗口或帧交互的JavaScript代码...

    lisp.js:JavaScript中的Lisp解释器-旨在在浏览器环境中运行

    与环境配合使用的功能（ get-bindings和eval ） 延续（解释器以Continuation Passing Style CPS实现） 通过使用蹦床进行尾部呼叫优化 通话/抄送 使用延续进行协作式多任务处理 所有计算都使用多个参数 漂亮的列表...

    《JavaScript学习指南（第2版）》[PDF]

    通过列举JavaScript应用的最佳实践和示例，本书展示了如何将该语言集成到浏览器环境中，及如何在符合标准的网站中应用这些已通过实践验证的编码技术。 　本书内容： 　JavaScript应用程序的结构，包括基本的语句和...

    javascript.html实现表单验证

    虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] JavaScript在...

    JavaScript教程--从入门到精通

    因它的开发环境简单，不需要Java编译器，而是直接运行在Web浏览器中，而因倍受Web设计者的所爱。 　这一套JavaScript教程分九个章节从什么是JavaScript、JavaScript的简单应用一直介绍到如何用JavaScript实现复杂的...

    i18next是浏览器或任何其他JavaScript环境例如nodejs的非常流行的国际化框架

    i18next是浏览器或任何其他JavaScript环境（例如node.js）的非常流行的国际化框架

    javascript 中 this 的用法.docx

    在全局作用域中使用 this 会返回全局对象，在浏览器环境下是 window 对象， 在 Node.js 环境下是 global 对象。例如： console.log(this === window); true function test() { console.log(this === window); } ...

    JavaScript学习指南（第2版）.pdf

    《JavaScript学习指南（第2版）》通过列举JavaScript应用的最佳实践和示例，本书展示了如何将该语言集成到浏览器环境中，及如何在符合标准的网站中应用这些已通过实践验证的编码技术。 本书内容： ● JavaScript应用...

    JavaScript权威指南第五版(JavaScript_The_Definitive_Guide_5th.chm)

    此外，JavaScript是一种解释性脚本语言，提供了比其他语言更加灵活、更加宽松的程序设计环境，程序设计新手在这种环境中能够很快适应。 　《JavaScript权威指南》全面介绍了JavaScript语言的核心，以及Web浏览器中...

    【JavaScript源代码】NodeJS和浏览器中this关键字的不同之处.docx

    　学习过JavaScript的人肯定清楚 处在不同环境下this的指向问题。那么看下面的代码　var type = 1　function toWhere(){　this.type = 2;　}　toWhere();　console.log(type)　你们肯定会这样想：　这里声明了一个...

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