一、事件流

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. Metrics.NET实践(1)

    起因:对应用的监控和测量是WEB应用的一个重要话题,尤其在监控错误率,并发量,以及框架库中的动态值.于是,在性能优化的时候找到了metrics.net. 简介 开始使用 度量 Gauges Count ...

  2. sql 恢复数据库

    RESTORE DATABASE RoadFlowWebForm --数据库名称 FROM DISK = 'E:\WEBFORM2.5.1.bak' --bak文件路径 with replace, M ...

  3. 【leetcode 简单】 第一百零七题 回旋镖的数量

    给定平面上 n 对不同的点,“回旋镖” 是由点表示的元组 (i, j, k) ,其中 i 和 j 之间的距离和 i 和 k 之间的距离相等(需要考虑元组的顺序). 找到所有回旋镖的数量.你可以假设 n ...

  4. 18、Random类简介

    Random类概述 Random类在java.util包下,使用这个类可以生成随机数 package com.sutaoyu.usually_class; import java.util.Rando ...

  5. fonts.googleapis.com 字体报错问题解决。

    更多内容推荐微信公众号,欢迎关注: 无法加载这些字体是因为,google的网站在国内无法访问造成的.在AdminLTE.css 和AdminLte.less中有如下内容: @import url(ht ...

  6. 在window 8 或windows2012 上用命令行安装framework3.5 方法

    找到对应操作系统安装目录的sources文件夹下的sxs文件夹,拷贝到本地电脑,如F:盘 根目录下 CMD(管理员身份)命令: dism.exe /online /enable-feature /fe ...

  7. scrapy 爬虫踩过的坑（II）

    同事写了个爬虫,逻辑上看着没什么问题,但是一直报错:Request url must be str or unicode…… 打印了一下url 和url 的类型,确实是 unicode 懵逼…… 打印 ...

  8. [转]STL 容器一些底层机制

    1.vector 容器 vector 的数据安排以及操作方式,与 array 非常相似.两者的唯一区别在于空间的运用的灵活性.array 是静态空间,一旦配置了就不能改变,vector 是动态数组.在 ...

  9. java连接redis无法连接,报异常RedisConnectionException

    不管是spring还是原生jedis连接redis,如果连不上多半是linux服务器的问题: 1 首先确保redis端口开放: 把6379或者redis的端口开放即可 2 redis.conf配置注释 ...

  10. java基础24 线程、多线程及线程的生命周期(Thread)

    1.1.进程 正在执行的程序称作为一个进程.进程负责了内存空间的划分 疑问1:windows电脑称之为多任务的操作系统,那么Windows是同时运行多个应用程序呢? 从宏观的角度:windows确实在 ...