一、事件流

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. iScroll使用方法

    最基本的iScroll使用结构 <div id="wrapper"> <ul> <li></li> ..... </ul> ...

  2. soj1022. Poor contestant Prob

    1022. Poor contestant Prob Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description As everyb ...

  3. 发现IE 9的一个独有的小bug，并附解决方案

    在最近的项目中,解决了一些浏览器兼容方面的bug,这篇主要描述在IE 9在渲染值为auto的overflow-x属性时,所产生的专属bug及解决办法. 1.问题描述 在做一个收货地址管理静态页面的时候 ...

  4. Bzoj4763 雪辉

    Time Limit: 39 Sec  Memory Limit: 666 MBSubmit: 151  Solved: 80 Description 上次立下的NOIP退役Flag没有成功   这次 ...

  5. 字符加密 cipher

    评测传送门 Description: Valentino 函数的定义: 对于一个由数字和小写字母组成的字符串 S,两个整数 K,M,将 S 视为一个 P 进制数,定义: Valentino(S, K, ...

  6. C#反射-Assembly.Load、LoadFrom与LoadFile

    反射Demo: public class Person { public int Age; public void SayHello() { Console.WriteLine("Hello ...

  7. QEMU漏洞挖掘

    转载:https://www.tuicool.com/articles/MzqYbia qemu是一个开源的模拟处理器硬件设备的全虚拟化仿真器和虚拟器. KVM(kernel virtual mach ...

  8. 一步一步搭建11gR2 rac+dg之DG 机器配置(七)【转】

    DG 机器配置 转自: 一步一步搭建11gR2 rac+dg之DG 机器配置(七)-lhrbest-ITPUB博客http://blog.itpub.net/26736162/viewspace-12 ...

  9. asp.net操作word 配置在IIS上出现的问题

    异常: 检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件失败,原因是出现以下错误: 80070005 拒绝访问. (异常来自 ...

  10. 用sklearn计算卡方检验P值

    情形: 1. 对于一批分类变量,我们通常要评价两两之间的相关程度. 2. 因变量是分类变量,衡量其他分类变量和因变量的相关性高低. 来源:https://blog.csdn.net/snowdropt ...