㈠事件流

▶事件：是文档和浏览器窗口中发生的，特定的交互瞬间。

▶事件流：描述的是从页面中接受事件的顺序

 

⑴DOM事件冒泡

定义：事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接受，然后逐级向上传播至最不具体的那个节点（文档）。

 

具体讲解：

代码：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn">

      </div>

</body>

</html>

说明：点击按钮，浏览器就会认为：你点按钮的同时，也点击了包含这个按钮的这个容器（“div”），那么你点了这个div以后，它又认为你点了整个HTML了，那么你点了整个HTML，它又认为你点了整个document。也就是说：click事件在input上触发，那么它会一级一级往上冒，最后直到冒到document。

 

⑵DOM事件捕获

定义：不太具体的节点应该更早接受到事件，而最具体的节点最后接受到事件。

 

具体讲解：

代码：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn">

      </div>

</body>

</html>

说明：用事件捕获的思想：它认为最先把事件用document接收了，然后让HTML接收了，然后又让body接收，然后又让div接收了，最后才被input接收了。

 

㈡事件处理程序

⑴ HTML事件处理程序

含义：你的事件直接加在HTML结构里

具体解释：

代码：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="alert('hello')">

      </div>

</body>

</html>

说明：直接将onclick事件加在input标签上，而且是在HTML结构里

 

注：并不是所有要执行的JS代码都应该写在这个地方，也可以把它封装在这个函数内

代码：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMessage()">

      </div>

     <script>

            function showMessage(){

                        alert('hello world!');

              }

     </script>

</body>

</html>

 

HTML事件的缺点：HTML和JS代码紧密的耦合在一起

具体解释：如果要更换事件处理程序，就要修改两个地方：HTML代码和JS函数

 

⑵ DOM0级事件处理程序 

这种方法是一种较为传统的方式：把一个函数赋值给一个事件的处理程序属性

这是用的比较多的方法，原因是简单，跨浏览器的优势

代码示例：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

       <input type="button" value="按钮2" id="btn2" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');   //取得btn2按钮对象

            btn2.onclick=function(){                    //给btn2添加onclick属性

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;            //删除onclick属性

     </script>

</body>

</html>

优点：1）没有HTML事件的缺点

           2）可以给一个元素上添加多个事件处理程序，这些事件处理程序会按顺序执行。

 

⑶ DOM2级事件处理程序

①DOM2级事件定义了两个方法：

用于处理指定和删除事件处理程序的操作

addEventListener()  和 removeEventListener()。

②接收三个参数：

1) 要处理的事件名

2) 作为事件处理程序的函数

3) 布尔值(true表示在捕获阶段调用事件处理程序;false表示在冒泡阶段调用事件处理程序)

③代码示例:

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

      <input type="button" value="按钮2" id="btn2" >

      <input type="button" value="按钮3" id="btn3" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');

            var btn3=document.getElementById('btn3');

            btn2.onclick=function(){

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;

            //DOM2级事件

           btn3.addEventListener('onclick',showMes,false);   //给btn3添加一个事件监听程序   兼容各种浏览器

            //删除事件

           btn3.removeEventListener('onclick',showMes,false);

     </script>

</body>

</html>

 

④优点：可以给一个元素上添加多个事件处理程序，这些事件处理程序会按顺序执行。

代码示例：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

      <input type="button" value="按钮2" id="btn2" >

      <input type="button" value="按钮3" id="btn3" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');

            var btn3=document.getElementById('btn3');

            btn2.onclick=function(){

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;

            //DOM2级事件

           btn3.addEventListener('onclick',showMes,false);

           btn3.addEventListener('onclick',function(){

             alert(this.value);引用被触发的元素

           },false);

     </script>

</body>

</html>

注意：在IE浏览器中不起作用。

 

⑷IE事件处理程序

attachEvent()添加事件

detachEvent()删除事件

②接收相同的两个参数：

事件处理程序的名称和事件处理程序的函数

③不使用第三个参数的原因：IE8及以更早的浏览器版本只支持事件冒泡！

 代码示例：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

      <input type="button" value="按钮2" id="btn2" >

      <input type="button" value="按钮3" id="btn3" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');

            var btn3=document.getElementById('btn3');

            btn2.onclick=function(){

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;

            //IE事件处理程序

           btn3.attachEvent('onclick',showMes);

           btn3.detachEvent('onclick',showMes);

     </script>

</body>

</html>

 注意：只在IE浏览器和Opera浏览器中使用

 

⑸跨浏览器的事件处理程序

①方法：恰当的使用能力检测

②问题：如何实现跨浏览器解决事件处理程序？

通过将增加和删除封装在一个对象里面，封装了两个方法，每个方法都进行了能力检测，你支持这个方法，就用这个方法，不支持这个方法，就用所支持的方法。

③代码示例：

<html>

<head>

     <title>事件流<title>

     <meta charset="utf-8"></head>

<body>

      <div id="box">

      <input type="button" value="按钮" id="btn" onclick="showMes()">

      <input type="button" value="按钮2" id="btn2" >

      <input type="button" value="按钮3" id="btn3" >

      </div>

     <script>

            function showMes(){

                        alert('hello world!');

              }

            var btn2=document.getElementById('btn2');

            var btn3=document.getElementById('btn3');

            btn2.onclick=function(){

                   alert('这是通过DOM0级添加的事件！')；

             }

             btn2.onclick=null;

            //跨浏览器事件处理程序

            vareventUtil={

            //添加句柄

            addHandler:function(element,type,handler){

            if(element.addEventListener){

                element.addEventListener(type,handler,false);

            }else if(element.attachEvent){

                element.attachEvent('on'+type,handler);

            }else{

                element['on'+type]=handler;

            }

          },

          //删除句柄

           removeHandler:function(element,type,handler){

            if(element.removeEventListener){

                element.removeEventListener(type,handler,false);

            }else if(element.detachEvent){

                element.detachEvent('on'+type,handler);

            }else{

                element['on'+type]=null;

            }

          }

        }

        eventUtil.addHandler(btn3,'click',showMes);

        eventUtil.removeHandler(btn3,'click',showMes);

</script>

</body>

</html>

DOM 事件流与事件处理程序的更多相关文章

  1. js事件流、事件处理程序/事件侦听器

    1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...

  2. JS——事件流与事件处理程序

    1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流1.2 Netscape :事件捕获1.3 DOM事件流 :事件捕获阶段——事件目标阶段——事件冒泡阶段DOM2级事件规定 :捕获阶段不会 ...

  3. JavaScript 中的事件流和事件处理程序（读书笔记思维导图）

    JavaScript 程序采用了异步事件驱动编程模型.在这种程序设计风格下,当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web 浏览器就会产生事件(event). JavaScript ...

  4. HTML 事件(三) 事件流与事件委托

    本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...

  5. 事件流之事件冒泡与事件捕获<JavaScript高级程序设计>学习笔记

    1.事件流 浏览器开发团队遇到一个很有意思问题:页面的那一部分会拥有特定的事件? 对于理解这个问题您可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上 ...

  6. js 事件流和事件冒泡阻止

    js 事件流和事件冒泡阻止 事件流 当浏览器发展到第四代的时候(IE4与Netscape4)浏览器开发团队遇到一个有意思的的问题: 页面的哪一部分会拥有某个特定的事件? 比如在纸上画上一组同心圆,如果 ...

  7. js：事件（注册、解绑、DOM事件流、事件对象、事件委托）

    1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...

  8. jQuery基础（4）- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  9. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

随机推荐

  1. Java多线程（一）：线程与进程

    1.线程和进程 1.1 进程 进程是操作系统的概念,我们运行的一个TIM.exe就是一个进程. 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位 ...

  2. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  3. ext grid添加2行topbar

    bbar: paginToolbar(this.getStore()), dockedItems: [{ xtype: 'toolbar', dock: 'top', items: me.create ...

  4. vuex store更新了数据，但未触发getters

    遇到一个奇怪的问题,我将数组存储在store中,更新数组,第一次会生效,第二次就不会再触发getters,通过检查发现state中的数组是有更新的. 尝试过网上很多的解决办法: 1.getters r ...

  5. 【vue+axios】一个项目学会前端实现登录拦截

    原文链接:github.com 一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言 该项目是利用了Github 提供的persona ...

  6. 解决npm安装node-sass太慢及编译错误问题

    环境: win7 node v8.11.1 npm v5.6.0 背景: 最近vue项目使用sass,所以需要sass-loader,sass-loader依赖node-sass,还需安装node-s ...

  7. css样式小结（持续更新...）

    1.手写table的border,显示空白间隔,而不是想要的样式,需要添加下面的样式处理 table{ border-collapse:collapse; } 2.移动端输入框效果,去掉高亮边框, i ...

  8. linux重装docker-compose后无法执行docker-compose命令

    背景 使用自动化脚本重装docker和docker-compose(但脚本中未对旧版本的docker-compose进行任何处理,比如卸载删除) 导致执行docker-compose命令时报了错,大多 ...

  9. Linux awk命令 --三剑客老大

    Linux awk命令 --三剑客老大 基本用法: awk  [参数]  ['找谁{干啥}']  文件 参数: -F 分隔符 -v 创建或修改awk变量 OFS 输出分割符 awk显示每一列的时候分隔 ...

  10. Bridge的数据在内核处理流程

    转:http://blog.sina.com.cn/s/blog_67cc0c8f0101oh33.html 转载一篇Bridge的数据在内核处理流程,文章写的不错啊! (2013-07-05 16: ...