一、前言

　　事件的绑定触发有很多种方法，我们如何选择呢？

　　很多时候，我们会使用鼠标事件，但是鼠标事件只能在PC设备上使用，当我们需要对不同设备兼容时怎么办呢？

二、正文

1. 事件的几个概念：

  • 事件流：描述的是在页面中接受事件的顺序；
  • 事件冒泡：由最具体的元素接收（当前节点），然后逐级向上传播至最不具体的元素的节点（文档）；
  • 事件捕获：最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。（文档-->body-->...-->具体的节点）。
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

    </head>

    <body>

        <div id="eventDiv">

            <button id="btn">按钮</button>

        </div>

    </body>

</html>

如上，以点击事件为例，事件冒泡就是<button>先接收点击，接着是<div>，然后是<body>，再然后是<html>文档；事件捕获就是相反的顺序。使用最多的是事件的冒泡。

2. 事件流的几个注意点：

  • DOM2级事件处理规定的事件流，共有三个阶段：
    事件捕获阶段
    处于目标阶段
    事件冒泡阶段
  • 注意：在DOM事件流中，实际的目标在捕获阶段不会接收到事件，下一个阶段是处于目标阶段，这时事件被触发，最后进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。

3. 事件处理的几种方式：

  • HTML事件处理：直接在HTML节点中添加事件；
  • DOM0级事件处理：把一个函数赋值给一个事件处理程序属性
  • DOM2级事件处理：即addEventListener("事件名", "事件处理函数", "布尔值")
  • true表示事件捕获
  • false表示事件冒泡，默认是false
  • removeEventListener表示移除事件监听
  • IE事件处理程序：attachEvent和detachEvent （这里指的是IE8以下）
//HTML事件处理===缺点是改名字需要改两处

<input type="button" value="click me" onclick="show()"/>

<script type="text/javascript">

    function show(){

        alert('hello world!');

    }

</script> 

//DOM0级事件处理===缺点是后者覆盖前者

var btn=document.getElementById("mybtn"); //获取按钮节点的引用

btn.onclick=function(){

    alert("DOM0级事件处理程序1"); //会被覆盖

}

btn.onclick=function(){

    alert("DOM0级事件处理程序2"); //会被覆盖

}

btn.onclick=function(){

    alert("DOM0级事件处理程序3");

}

btn.onclick=null;//移除事件

//DOM0级事件处理===好处是可以绑定多个事件而不会被覆盖

var btn=document.getElementById("mybtn");

btn.addEventListener("click",demo1,false);

btn.addEventListener("click",demo2,false);

function demo1(){

    alert("DOM0级事件处理程序1");

}

function demo2(){

    alert("DOM0级事件处理程序2");

}

btn.removeEventListener("click",demo2,false);//移除点击事件demo2
  • DOM2级事件处理程序是对特定的对象添加事件处理程序，但是主要涉及到两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和 removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件）
  • DOM2级事件处理程序的第三个参数表示是否在捕获阶段处理事件，false表示事件冒泡，true表示事件捕获，默认是false。
  • IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。由于IE只支持时间冒泡，所有通过attachEvent()添加的事件处理程序都会被添加包冒泡阶段。
  • 为了兼容IE浏览器，对于事件处理可以这样使用：
//兼容各个浏览器的事件处理程序

var btn=document.getElementById("mybtn");

if(btn.addEventListener){

    btn.addEventListener("click",demo);

}else if(btn.attachEvent){

    btn.attachEvent("onclick",demo);

}else{

    btn.onclick=demo();

}

function demo(){

    alert("Hello World");

})

4. 阻止事件捕获、事件冒泡和阻止默认事件：

  • 阻止默认事件 preventDefault()：多用于阻止HTML元素默认的行为，比如a标签；
  • 阻止事件冒泡 stopPropagation()：多用于阻止事件冒泡，也可阻止事件捕获；
  • stopImmediatePropagation()：如果某个元素有多个相同类型事件的事件监听函数,则当该类型的事件触发时,多个事件监听函数将按照顺序依次执行.如果某个监听函数执行了 event.stopImmediatePropagation()方法,则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用),该元素绑定的后序相同类型事件的监听函数的执行也将被阻止；
  • return false：不仅阻止事件往上冒泡，而且阻止事件本身。
//阻止默认事件 preventDefault()
//有一些html元素默认的行为，比如说a标签，点击后有跳转动作；
//form表单中的submit类型的input有一个默认提交跳转事件；
//reset类型的input有重置表单行为。
event.preventDefault();

//阻止事件冒泡 stopPropagation()
//这是阻止事件的冒泡方法，不让事件向上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
//stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕获
event.stopPropagation();

//阻止事件捕获 stopImmediatePropagation()
//那么 stopImmediatePropagation() 和 stopPropagation()的区别在哪儿呢？
//后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生，但是后者就不会阻止其他事件的发生。
event.stopImmediatePropagation();

//阻止事件 return false
//return false 不仅阻止了事件往上冒泡，而且阻止了事件本身。
$("#btn").click(function(){
　　return false;
})

5. 常用的事件：

  事件的类型 事件的分类 事件详细分类 事件的说明
传统事件类型 表单事件 表单提交、重置事件 submit <form>提交表单触发
reset <form>重置表单触发

聚焦、失去焦点事件

 focus 表单元素得到焦点
blur 表单元素失去焦点
用户与表单元素交互时 click 按钮表单元素激活时触发
change 当用户改变其他表单元素所代表的值时触发，比如文本域输入文本和下拉框选择选项，注意：在文本域中不是每输入一个键值都触发，而是在失去焦点时触发。
window事件 加载、卸载事件 load 当文档和其所有外部资源（比如图片）完全加载并显示给用户时就会触发
unload 当用户离开当前文档转向其他文档时就会触发它
window的onerror属性 window的onerror属性 有点像事件处理程序，当JS出错时触发它
调整浏览器窗口大小和滚动它 resize 调整浏览器窗口大小时触发
scroll 滚动浏览器窗口时触发，也能在任何可以滚动的文档元素上触发
鼠标事件 鼠标的移动事件 mousedown  鼠标被按下时
mousemove  鼠标被移动时
mouseout     鼠标离开元素时
mouseover  鼠标经过元素时
mouseup     释放鼠标按键时
mouseenter  类似“mouseover”，但不冒泡
mouseleave 类似“mouseout”，但不冒泡
鼠标的点击事件 click      鼠标点击一个对象时
dblclick     鼠标双击一个对象时
键盘事件 键盘事件 键盘事件 键盘事件 
$("button").click(function(){

})
$("button").bind("click", function(){

})

三、结语

　　暂时先到这儿，再补充。

事件类型1 事件的类型2 事件的分类 事件详细分类
DOM事件
HTML事件
触摸屏和移动设备事件 触摸事件（手机）  touchstart 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove 当手指在屏幕上滑动时连续地触发。在这个世界发生期间，调用preventDefault()可以阻止滚动
touchend 当手指在屏幕上移开时触发
touchcancel 当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明

JS的事件汇总的更多相关文章

  1. js默认事件汇总

    默认事件 就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为.比如在a标签href属性上的跳转,右键呼出的菜单等等.我们可以通过js取消或更改这些默认事件. 取消默认事件 默认事件都是定 ...

  2. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  3. 理解Node.js的事件轮询

    前言 总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生 正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操 ...

  4. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  5. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  7. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  8. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  9. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

随机推荐

  1. PHP面向对象——三大基本特性与五大基本原则

    三大特性是:封装.继承.多态 所谓封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏. 封装是面向对象的特征之一,是对象和类概念的主要特 ...

  2. adobe reader DC 字体设置

    adobe reader DC 字体设置 一直使用adobe reader阅读pdf文档,系统提醒我升级一个reader助手, 升级之后: 感觉字体颜色变浅,笔画也变细了,整体有些模糊不清. goog ...

  3. Java 设计模式之单例模式（一）

    原文地址:Java 设计模式之单例模式(一) 博客地址:http://www.extlight.com 一.背景 没有太多原由,纯粹是记录和总结自己从业以来经历和学习的点点滴滴. 本篇内容为 Java ...

  4. RK3288 添加WiFi&BT模块AP6212

    CPU:RK3288 系统:Android 5.1 注:系统中自带的模块没有AP6212,相近的只有AP6210,设置为AP6210,直接添加固件也可以正常使用. 此文是手动添加AP6212的例程. ...

  5. Android 编译系统的组成

    Android 和 Linux 的编译系统都是通过 Makefile 工具来组织编译源代码的. Makefile 工具用来解释和执行 Makefile 文件,在 Makefile 文件里定义好工程源代 ...

  6. 页面初始加载的是默认刷新一次（f5）

    参考找不到了,不好意思.. 两种可以都试一下,解决问题就好了. 1.----------- <script type="text/javascript"> window ...

  7. (转)Inno Setup入门（十一）——完成安装后执行某些程序

    本文转载自:http://blog.csdn.net/yushanddddfenghailin/article/details/17250901 有些时候我们的程序虽然能够很好的完成安装,但是程序的配 ...

  8. Linnx 服务器中mysql 无法正常访问问题

    本机连接远程Linnx服务器不通 1. 检测防火墙 -- 保证防火墙关闭 查看到iptables服务的当前状态:service iptables status. 但是即使服务运行了,防火墙也不一定起作 ...

  9. 学生选课数据库SQL语句练习题

    一.            设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...

  10. NFV网络功能虚拟化 基本概念

    NFV基本概念 NFV则由运营商联盟提出,为了加速部署新的网络服务,运营商倾向于放弃笨重昂贵的专用网络设备,转而使用标准的IT虚拟化技术来拆分网络功能模块,如DNS.NAT.Firewall等.于是一 ...