一、事件绑定的几种方式：

　　1.1 ele.on+“事件名“：如div.onclick = function(event){ };

　　　　1.1.1这种方式兼容性非常好，但一个元素的同一个事件上只能绑定一个处理程序。

　　　　1.1.2基本等同于写在html行间上。

　　1.2 obj.addEventListener(type,fn,false);

　　　　1.2.1 IE9以下不兼容，可以为一个事件绑定多个处理程序。

　　1.3 obj.attachEvent('on'+type,fn);

　　　　1.3.1 IE独有，一个事件同样可以绑定多个处理程序。

二、事件处理程序的运行环境

　　2.1 ele.on+“事件名“,如div.onclick = function(event){ };

　　程序this指向dom元素本身。

　　2.2 obj.addEventListener(type,fn,false);

　　　　程序this指向dom元素本身。

　　1.3 obj.attachEvent('on'+type,fn);

　　　　程序this指向window。

　　1.4 兼容性处理方法

　　　　function addEvent(elem,type,handle){

           　　 if(elem.addEventListener){
               　　 elem.addEventListener(type,handle,false);
           　　 }else if(elem.attachEvent){
               　　 elem.attachEvent('on'+type,function(){
                   　　 handle.call(elem);
               　　 })
           　　 }else{
               　　 elem['on+type'] = handle;
            　　}
       　　}
 三、解除事件处理程序
　　1、ele.onclick = false/''/null;
　　2、ele.removeEVentListener(type,fn,false);
　　3、ele.detachEvent('on'+type,fn);
　　　　注：若绑定匿名函数则无法解除。
　　　　　　例如：如若是匿名函数，则把它写在外面，如给他一个函数名test。
　　　　　　　　　//先绑定
　　　　　　　　　var div = document.getElementByTagName('div')[0];
　　　　　　　　　　   div.addEventListener('click',test,false);
　　　　　　　　　　　function test(){
　　　　　　　　　　　　　　　　　　console.log('a');
　　　　　　　　　　　　　　　　}
　　　　　　　　　　//再解除
　　　　　　　　　　　div.removeEventListener('click',test,false);
四、事件处理流程
　　4.1 js事件传播流程主要分三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。我们平常用的
addEventListener方法中，一般只会用到两个参数，一个是需要绑定的事件，另一个是触发事件后要执
行的函数，然而，addEventListener还可以传入第三个参数，第三个参数默认值是false，表示在事件冒
泡阶段调用事件处理函数;如果参数为true，则表示在事件捕获阶段调用处理函数。
　　

　　　　　4.1.1 捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触

发捕获事件，直到达到目标节点。

　　　　  事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，

自父元素冒泡向子元素（事件源元素）。（自顶向下）IE没有事件捕获事件。

　　　　　4.1.2 目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指

定给目标事件的监听器后，就会运行该监听器。

　　    　　4.1.3 事件冒泡: 当为多个嵌套的元素设置了相同的事件处理程序，它们将触发事件冒泡

机制。在事件冒泡中，最内部的元素将首先触发其事件，然后是栈内的下一个元素触发该事件，以此

类推，直到到达最外面的元素。如果把事件处理程序指定给所有的元素，那么这些事件将依次触发。

　　　　  事件冒泡：结构上（非视觉上4）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，

自子元素冒泡向父元素。（自底向上）

　　　　　focus、blur、change、submit、reset、select等事件不冒泡。

　　4.2 取消冒泡和阻止默认事件

　　　　4.2.1取消冒泡：可以调用事件对象的stopPropagation()方法以阻止事件的继续传播。如果在

同一对象上定义了其他处理程序，剩下的处理程序将依旧被调用，但调用stopPropagation()之后任何

其他对象上的事件处理程序将不会被调用。

　　　　　　w3c标准enent.stopPropagation();但不支持IE9以下的版本。

　　　　　　IE独有event.cancelBubble = true;

　　　　　　封装取消冒泡的函数stopBubble(event)

 　　　　　　　　function stopBubble(event){
           　　　　if(event.stopPropagation){
               　　　　event.stopPropagation();
           　　　　　　}else{
               　　　　event.cancelBubble = true;
           　　　　　　}
       　　　　　　} 　　

　　　　4.2.2 阻止浏览器的默认行为

　　　　　　  事件默认行为：浏览器自己默认做的事情

　　　　　　 哪些默认行为要做阻止

　　 　　　　　　 4.2.2.1 a标签链接跳转

　　　　　　　　 4.2.2.2  Submit按钮的提交，

　　　　　　　　 4.2.2.3  右键菜单，

　　　　　　　  4.2.2.4文本框的输入

　　　　　　阻止默认行为的方式

　　　　　　event.preventDefault();W3C标准，IE9以下不兼容。

　　　　　　　 event.returnValue = false;  兼容IE。

　　　　　　　 return false;以对象属性的方式注册的事件才生效。

　　　　　　自定义右键菜单 oncontextmenu

　　　　　　 文本框只能输入数字

　　　4.2.2.5封装一个阻止默认事件的函数

function cancelHandler(event){
  if(event.preventDefault){
     event.preventDefault();
  }else{
     event.returnValue = false;
       }
}

五、事件源对象

　　5.1 event.target    火狐只有这个

　　　　event.srcElement     IE只有这个

　　　　这两个chrome  都有

　　5.2事件源对象兼容性写法（作用事件委托）

    　　 例1

<body>
<ul>
  <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
   <li>10</li>
 </ul>
 <script>
  //要求点那个li就打印出那个li的内容，哪怕是成千上万也行
  var ul = document.getElementsByTagName('li');
   var len =li.length;
   　　for(var i=0;i<len;i++){
         li[i].onclick = function(){
            console.log(this.innerText);
         }
      }
  //这样也行但但成千上亿的li就不行了
 </script>
</body>

　　例2

<body>
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
     <li>7</li>
     <li>8</li>
     <li>9</li>
     <li>10</li>
    </ul>
    <script>
    //要求点那个li就打印出那个li的内容，哪怕是成千上万也行
  　　var ul = document.getElementsByTagName('li'
     　　ul.onclick = function(e){//事件冒泡和事件源对象，这样处理就是事件委托机制
         　　var event = e || window.event;
         　　var target = event.target || event.srcElement;
             　　console.log(target.innerText);
       　　}
    //这样即或是成千上亿的li也行了
    </script>
</body>

六、事件分类

　　6.1鼠标事件：

　　　　6.1.1 click、mousedown、mousemove、mouseup、contextmenu、mouseover、

mouseout、mouseenter、mouseleave

　　　　6.1.2 用button来区分鼠标的按键

　　　　6.1.3 DOM3标准规定：clik只能监听左键，只能通过mousedown和mouseup来判断鼠标键

　　　　6.1.4解决clik与mousedown的冲突

　　　

　　　　

JS绑定事件处理函数及处理流程的更多相关文章

  1. js中绑定事件处理函数，使用event以及传递额外数据

    IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = fun ...

  2. 好强大的页面功能调试（js调试，查找js绑定的事件）值得学习

    引自:http://www.poluoluo.com/jzxy/201209/178110_2.html 这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的,因为 googl ...

  3. React 学习(三) ---- state 和 事件处理函数

    在上两节中,我们讲述了props, 组件使用props进行渲染,但是这是一次性的, props渲染完成之后就不做任何事情了,但是现实中却不是这样的,当我们点击购物车上的加减按钮时,数量会自动加1或减1 ...

  4. Jquery动态绑定事件处理函数 bind / on / delegate

    1.bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素.比如你在用bind给页面元素绑定事件之后,又新添加了一些与之前绑定过事件的元素一样的DOM元素,但是这些事件并不能在新的DOM元 ...

  5. jquery事件之事件处理函数

    一.事件处理 方法名 说明 语法 (events 事件类型,data数据,handler 事件处理函数,selector 选择器) Bind( 为每一个匹配元素的特定事件(像click)绑定一个事件处 ...

  6. js中关于事件处理函数名后面是否带括号的问题

    今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...

  7. JS---DOM---为同一个元素绑定多个不同事件指向同一个事件处理函数

    为同一个元素绑定多个不同事件指向同一个事件处理函数 1. 用了switch(e.type){} 来修改 2. break <input type="button" value ...

  8. JavaScript移除绑定在元素上的匿名事件处理函数

    前言: 面试的时候有点蒙,结束之后想想自己好像根本就误解了面试官的问题,因为我理解的这个问题本身就没有意义.但是当时已经有一些思路,但是在一个点上被卡住. 结束之后脑子瞬间灵光,想出了当时没有迈出的那 ...

  9. 把多个JavaScript函数绑定到onload事件处理函数上

    为了让函数只在页面加载完毕后才得到执行,我们会把函数绑定到onload事件上: window.onload = userFunction 但如果有两个函数:firstFunction() 和 seco ...

随机推荐

  1. rm -f 后如何恢复

    前言 每当我们在生产环境服务器上执行rm命令时,总是提心吊胆的,因为一不小心执行了误删,然后就要准备跑路了,毕竟人不是机器,更何况机器也有bug,呵呵. 那么如果真的删除了不该删除的文件,比如数据库. ...

  2. STP 生成树协议 RSTP 快速生成树

    STP(Spanning Tree Protocol)是生成树协议的英文缩写 该协议可应用于在网络中建立树形拓扑,消除网络中的环路,并且可以通过一定的方法实现路径冗余,但不是一定可以实现路径冗余.生成 ...

  3. 在windows系统安装nginx

    1.下载Nginx,链接:http://nginx.org/en/download.html 2.解压放到自己的磁盘,双击击运行nginx.exe,会有命令框一闪而过,在浏览器上面输入localhos ...

  4. vue路由--命名视图

    有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了.你可以在界面中拥有多个单独命名的视图, ...

  5. VS2015中使用qt开发客户端，QPluginLoader加载dll为null的解决办法

    1,问题重现: 使用vs2015开发一款qt软件,使用了QPluginLoader动态加载插件的方式,调试的时候,发现dll模块没有加载进来,debug发现QPluginLoader的instance ...

  6. MySQL中的幻读，你真的理解吗？

    昨天接到阿里的电话面试,对方问了一个在MySQL当中,什么是幻读.当时一脸懵逼,凭着印象和对方胡扯了几句.面试结束后,赶紧去查资料,才发现之前对幻读的理解完全错误.下面,我们就聊聊幻读. 要说幻读,就 ...

  7. mybatis 通过配置父类数据源连接和关闭数据，进行junit单元测试

    来源:https://blog.csdn.net/Bigbig_lyx/article/details/80646005 解决问题,单元测试没经过单独配置,每个测试方法中要添加配置数据源 一:配置父类 ...

  8. 如何优雅的封装requests

    搭建接口自动化测试框架,一般都要对post/get请求做封装. 一般的封装过程是, class MyRequest: def my_post(): """do somet ...

  9. 802.11 MAC基础

    MAC(媒介访问控制层)位于各式物理层之上,控制数据的传输.它负责核心成帧操作以及与有线骨干网络之间的交互. 802.11采用载波监听多路访问/冲突避免(CSMA/CA)机制来控制对传输媒介的访问. ...

  10. win7无法访问局域网中其它计算机：0x80070035

    https://zhidao.baidu.com/question/304232217962584564.html https://jingyan.baidu.com/article/ff411625 ...