JavaScript的事件概念和事件监听


1、事件的概念:

JavaScript使我们有能力创建动态页面,网页中的每一个元素都可以产生某些触发JavaScript函数的事件。我们可以认为事件是可以被JavaScript侦测到的一种行为。


2、事件流:

事件流主要分为冒泡型事件和捕获型事件。IE浏览器目前只支持冒泡型事件,而支持标准DOM的浏览器比如火狐、Chrome等两者都支持。


 3、使用返回值改变HTML元素的默认行为:

  HTML元素大都包含了自己的默认行为,例如:超链接、提交按钮等。我们可以通过在绑定事件中加上"return false"来阻止它的默认行为。


4、通用性的事件监听方法:

  (1)绑定HTML元素属性:

    <input type="button" value="clickMe" onclick="check(this)">

  (2)绑定DOM对象属性:

    document.getElementById("xxx").onclick=test;


5、不常用的事件监听:

  5.1  IE中的监听方法:

5.1.1  [object].attachEvent("事件类型","处理函数");//添加监听

5.1.2  [object].detachEvent("事件类型","处理函数");//取消监听


5.2  标准DOM中的事件监听方法:

5.2.1  [object].addEvent("事件类型","处理函数","冒泡事件或捕获事件");

5.2.2  [object].removeEvent("事件类型","处理函数","冒泡事件或捕获事件");


    提示:IE监听方法中事件类型和标准DOM监听方法中的事件类型写法有点不同,前者事件类型用“on”开头,不如:“onclick”、“onmousemove”等,而后者不需要“on”,就是“click”、“mousemove”等。


6、标准事件流:

  6.1  举个例子:冒泡事件(从内至外)


  运行结果是

  6.2  冒泡事件和捕获事件的比较


  运行结果:

  倘若把addEventListener中的true改为false,那么运行结果为:

7、访问事件对象:

事件对象封装了事件发生的详细信息,尤其是鼠标、键盘事件。如鼠标事件发生的位置、键盘事件的键盘键等。

7.1  IE中的事件对象:

IE中的事件对象是一个隐式可用的全局对象:event,它是window对象的一个属性。

7.2  标准DOM的事件对象:

在标准DOM浏览器检测发生了某个事件时,将自动创建一个Event对象,并隐式地将该对象作为事件处理函数的第一个参数传入

//IE中得到事件对象

op.onclick=function(){

var oEvent=window.event;

}

//标准DOM中得到事件对象

op.onclick=function(oEvent){

//作为参数传进来

}

经验之谈:为了兼容不同的浏览器,通常采用下面的方法得到事件对象。

op.onclick=function(oEvent){

if(window.event){

oEvent=window.event;

        }

}


  Event事件对象常用的属性:

8、常用的事件类型:

  8.1  常用的鼠标事件:


8.2  常用的键盘事件:



  8.3  HTML事件:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,578评论 1 11
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,084评论 1 10
  • js之事件机制 1、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驱动...
    道无虚阅读 2,439评论 0 2
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 1,299评论 3 11
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,895评论 1 45