一、事件流

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. A Gentle Guide to Machine Learning

    A Gentle Guide to Machine Learning Machine Learning is a subfield within Artificial Intelligence tha ...

  2. Windows系统环境下Solr之Java实战（三）使用solrJ管理索引库

    https://www.cnblogs.com/zhuxiaojie/p/5764680.html https://www.cnblogs.com/xieyupeng/p/9317158.html

  3. SHA-1（安全哈希算法实现）

    如题,不知道sha-1的自己百度吧. #include <iostream> #include <vector> //定义vector数组 #include <strin ...

  4. 2016.6.18——Implement strStr()

    Implement strStr() 本题收获: 1.考虑多种边界条件. 2.haystack.size() size_type 是无符号的,即为正数 在32位系统上定义为 unsigned int ...

  5. mysql 在windons下的备份命令

    1. @echo off set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%" mysqldump -uroot -proot jy510 > ...

  6. 使用RegSetValueEx修改注册表时遇到的问题（转）

    原文转自 http://blog.csdn.net/tracyzhongcf/article/details/4076870 1.今天在使用RegSetValueEx时发现一个问题: RegSetVa ...

  7. 移动端测试=== adb 无线连接手机

    无线连接(需要借助 USB 线) 除了可以通过 USB 连接设备与电脑来使用 adb,也可以通过无线连接——虽然连接过程中也有需要使用 USB 的步骤,但是连接成功之后你的设备就可以在一定范围内摆脱 ...

  8. 读书笔记 effective c++ Item 19 像设计类型（type）一样设计类

    1. 你需要重视类的设计 c++同其他面向对象编程语言一样,定义了一个新的类就相当于定义了一个新的类型(type),因此作为一个c++开发人员,大量时间会被花费在扩张你的类型系统上面.这意味着你不仅仅 ...

  9. Django-模板继承、包含和静态文件配置

    一.模板继承 模板继承可以减少页面内容的重复定义,实现页面内容的重用 典型应用:网站的头部.尾部是一样的,这些内容可以定义在父模板中,子模板不需要重复定义 block标签:在父模板中预留区域,在子模板 ...

  10. docker stack 部署 filebeat

    =============================================== 2018/7/21_第3次修改                       ccb_warlock 更新 ...