一、事件流

1.冒泡事件：从特定的事件到不特定事件依次触发；（由DOM层次的底层依次向上冒泡）

（1）示例：

 <html onclick="add('html<br>')">

     <body onclick="add('body<br>');">

         <div onclick="add('div<br>');">

             <p onclick="add('p<br>');">Click Me</p>

         </div>

     <div id="display"></div>

     </body>

 </html>
function add(sText){

    var oDiv = document.getElementById("display");

    oDiv.innerHTML += sText;    //输出点击标签名

}

结果如下：

（2）取消冒泡：冒泡事件有时会带来不必要是的事件发生，可通过以下方式取消冒泡

oEvent.cancelBubble=ture;    //取消冒泡事件

2、捕获事件：

（1）从最不精确到最精确（ie不支持）

（2）ie中捕获事件：所有事件集中到该对象

obj.setCapture();    //捕获事件

obj.relaseCapture();    //释放捕获事件

二、事件监听方法

从事件角度看，函数响应事件发生--处理函数；从函数角度看，函数监听事件是否发生--监听函数；

1、通用监听方法

（1）在html标签中添加处理函数 例如<p onclick="function(){}"></p>

（2）通过DOM加载对象，直接设置监听函数

2、ie监听方法

obj.attachEvent(event_handle,fnHandler);    //添加监听函数

obj.detachEvent(event_handle,fnHandler);    //释放监听函数

3.标准DOM监听方法

obj.addEventListener(event_name,fnHandler,bCapture);    //添加监听函数

obj.removeEventListener(event_name,fnHandler,bCapture);    //释放监听函数

bCapture表示事件类型（ture：捕获/false:冒泡）

4.ie和标准DOM兼容处理方法

 function addEvent(obj,event,fun)

 {

     if(obj.attachEvent)

     {

         obj.attachEvent('on'+event,fun);

     }

     else

     {

         obj.addEventListener(event,fun,false);

     }

 }

三、事件对象

（1）IE中的事件对象对以window的属性存在：window.event;

　　  标准DOM中事件对象作为唯一参数传递给事件监听函数;

（2）两种兼容处理方法：

 function（ev）

 {

     var oEvent=ev||window.event;

 }
 function(oEvent)

 {

     if(window.event) oEvent=window.event;

 }

1、事件对象类型及其常用属性方法

(1)鼠标位置

clienX/clientY:相对可视区域坐标（不包括滚动的距离）

screenX/screenY:相对屏幕坐标

获取包括滚动位置坐标

 function getPosition(ev)

 {

     oEvent=ev||event;

     var ollTop=document.documentElement.scrollTop||document.body.scrollTop;

     var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

     return{x:oEvent.clientX+scrollLeft,y:ev.clientY+scrollTop}

 }

（2）鼠标事件

　　click:单击　　dbclick：双击

　　mousedown：按下任意键触发　　mouseup：松开任意键触发

　　mouseover:在某个元素上时候触发　　mouseout:移出某一元素

　　mousemove：在某个元素上移动时候触发

　　button属性：按键键值：【标准dom：0左键、1中键（滑轮）、2右键、不支持组合键】

（3）键盘事件：

　　事件：

　　keydown：按下某个键触发

　　keypress：按下某个按键产生字符时触发

　　keyup：释放摸个按键时触发

　　属性：

　　event.keycode属性：按键值

　　event.crtlkey crtl键是否按下

　　event.shiftkey shift键是否按下

　　event.alt alt键是否按下

四、默认事件

1、非用户设置，浏览器自身所带的行为；

2、右键菜单事件：

　　（1）document.oncontxetmenu=function(){}；

　　（2）

document.onmousedown=function(ev)

{

    var oEvent=ev||window.event;

    if(oEvent==2){};

}

3、取消默认事件： return false

4、只能输入数字

 obj.onkeydown=function(ev)

 {

     var oEvent=ev||window.event;

     if(oEvent.Code==8 &&(oEvent.CodekeyCode<48 || oEvent.keyCode>57) ) return false;

 }

五、html事件

事件名称　　触发条件

load　　加载完成

unload　　卸载完成

error　　脚本错误

select　　选择文本框多个字

change　　文本框失去焦点并且有内容变换

submit　　提交

focus　　获取焦点

blur　　失去焦点

六、自定义事件

// 创建事件

var event = document.createEvent('Event');

// 定义事件名为'build'.

event.initEvent('build', true, true);

// 监听事件

elem.addEventListener('build', function (e) {

  // e.target matches elem

}, false);

// 触发对象可以是任何元素或其他事件目标

elem.dispatchEvent(event);

////////////////////////////////////////////////////////////////////////////////////////////////////////////////

七、事件模型　

1、EventTarget 接口

  • addEventListener：绑定事件的监听函数
  • removeEventListener：移除事件的监听函数
  • dispatchEvent：触发事件

　(1)target.addEventListener(type, listener[, useCapture]);

  • type：事件名称，大小写敏感。
  • listener：监听函数。事件发生时，会调用该监听函数。
  • useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发,该参数可选。

[js]事件篇的更多相关文章

  1. js事件篇

    javascript和html之间的交互式通过事件来实现的,事件就是文档或浏览器窗口中发生的一些特定的交互. 事件流:描述的是从页面中接收事件的顺序. 不同的是,IE和Netscape开发团队竟然提出 ...

  2. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  3. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  4. 移动终端学习2：触屏原生js事件及重力感应

    如今智能移动设备已经渗透到人们生活的方方面面,用户数量也在不断迅速增长(市场研究机构 eMarketer 在今年初发表的趋势报告中预测,2014年至2018年,中国智能手机用户从总人口的 38.3%增 ...

  5. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践 经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无 从 ...

  6. css,js工具篇

    4. web前端开发分享-css,js工具篇   web前端开发乃及其它的相关开发,推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emm ...

  7. 前端面试题目汇总摘录（JS 基础篇）

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  8. 这可能是最简明扼要的 js事件冒泡机制+阻止默认事件 讲解了

    哎 js事件冒泡机制和阻止冒泡 阻止默认行为好像永远也整不清楚,记了忘 忘了记...醉了 这篇文章写完以后下次再忘记 就呼自己一巴掌,忘一次一巴掌 首先要明白两个概念——事件和事件流 事件指的是用户或 ...

  9. js事件委托 jQuery写法

    http://www.cnblogs.com/liugang-vip/p/5616484.html 不是抄的,这篇文章写的细 这是js 事件委托写法 <!DOCTYPE html> < ...

随机推荐

  1. 【Linux 命令】sed 命令

    文章转载自:https://www.jianshu.com/p/779f40985b20 文本分隔:------ # 在每一行后面增加一空行. sed G # 在每一行后面增加两行空行. sed &q ...

  2. python正则表达式-re模块的爱恨情仇

    利用python的re模块,使用正则表达式对字符串进行处理 # 编辑者:闫龙 import re restr = "abccgccc123def456ghi789jgkl186000&quo ...

  3. 【译】第三篇 Replication：事务复制-发布服务器

    本篇文章是SQL Server Replication系列的第三篇,详细内容请参考原文. 发布服务器是所有复制数据的源头.每一个发布服务器上可以定义多个发布.每一个发布包含一组项目(项目在同一个数据库 ...

  4. 使用vue的一些经验

    虽然说VUE是数据驱动视图的框架,但有时候不得不获取DOM来获得一些样式属性,做一些操作,这时候就需要VUE获取DOM对象的方法. vue获取DOM对象的方法: 如果是操作组件内部的DOM,可以通过给 ...

  5. Solr管理索引库——（十三）

    a)          维护索引 1.  添加/更新文档 添加或更新单个文档

  6. go 函数举例练习

    1. 求1到100之内的所有质数,并打印到屏幕上 package main import "fmt" // 求1-100 内的质数 func justfy(i int) bool ...

  7. 使用dork脚本来查询Google

    使用dork脚本来查询Google 了解Google Hacking数据库的第一步是了解所有典型的Google运算,就像机器级编程工程师必须了解计算机操作代码一样. 这些Google运算是Google ...

  8. ArcGIS RunTime Sdk +WPF 基础地图显示

    1 简单的地图展示 ArcGISRunTime 的平面地图展示主要依赖MapView这个控件,MapView是地图的容器,Map主要是图层的集合 (注:三维场景的显示主要依赖SceneView这个控件 ...

  9. order by 的列名不能参数化，要拼sql

    from T_COMPANY c join T_COMPANY_POSITION p on c.ID = p.COMPANYID order by :type desc nulls last; 最初不 ...

  10. SSD固态硬盘检测工具AS SSD参数

    一. 使用AS SSD Benchmark进行查看 包括了4个方面的测试(顺序读写.4K随机读写.64线程4K读写.寻道时间) AS SSD的主要测试,也是网上最常见得到测试成绩的,是它主界面上持续. ...