一、事件流

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. presto架构和原理

    Presto 是 Facebook 推出的一个基于Java开发的大数据分布式 SQL 查询引擎,可对从数 G 到数 P 的大数据进行交互式的查询,查询的速度达到商业数据仓库的级别,据称该引擎的性能是 ...

  2. react：在一个组件中调用别的组件中的方法

    先介绍一下要解决的问题:react中一个组件A和一个组件B,其中B是被connect(connect是redux中的方法)包装过的组件,包装成BContainer,A和BContainer的关系是兄弟 ...

  3. 字典树&&01字典树专题&&对字典树的理解

    对于字典树和01字典树的一点理解: 首先,字典树建树的过程就是按照每个数的前缀来的,如果你要存储一个全小写字母字符串,那么这个树每一个节点最多26个节点,这样的话,如果要找特定的单词的话,按照建树的方 ...

  4. [转]大整数算法[11] Karatsuba乘法

    ★ 引子         前面两篇介绍了 Comba 乘法,最后提到当输入的规模很大时,所需的计算时间会急剧增长,因为 Comba 乘法的时间复杂度仍然是 O(n^2).想要打破乘法中 O(n^2) ...

  5. mini2440的程序下载

    mini2440拿到手有四天了,抱着很大的兴趣看韦东山老师的视频,但是因为电脑是win7 64bit的系统,dnw的驱动没有,经查询可以使用supervivi,就查找相关的资料.但是始终弄不好,后来使 ...

  6. 【HASPDOG】hasp_update参数f和i区别

    [root@BICServer-TX shared]# ./hasp_update This is a simple demo program for the Sentinel Update and ...

  7. sqlite3 的insert记录项思路

    sqlite3 的insert记录项思路 1.组合一个insert的sql语句 2.判断是否需要立即执行,若不是立刻执行的语句,则插入到待处理的链表中,供后续事务处理时提交.必须有一个专门线程来对事务 ...

  8. laravel 中provider的理解和使用

    https://segmentfault.com/q/1010000004640866

  9. C# LINQ语句

    1.select 和 selectMany SelectMany() 将中间数组序列串联为一个最终结果值,其中包含每个中间数组中的每个值 2.join语句 from x in xx join d in ...

  10. Dropout caffe源码

    GPU和CPU实现的不一样,这里贴的是CPU中的drop out 直接看caffe里面的源码吧:(产生满足伯努利分布的随机数mask,train的时候,data除以p,...... scale_ = ...