1.事件流

1.1 事件流

描述的是在页面中接受事件的顺序

1.2 事件冒泡

由最具体的元素接收，然后逐级向上传播最不具体的元素的节点（文档）

1.3 事件捕获

最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

例如：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div id="div">

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

        </div>

    </body>

</html>

事件的冒泡就是先从button再到div再到body最后到文档是逐级向上，而事件捕获就是先接受到文档然后逐级向下到button。

2.事件处理

2.1 HTML事件处理

直接添加到HTML结构中

2.2 DOM0级事件处理

把一个函数赋值给一个事件处理程序属性

2.3 DOM2级事件处理

addEventListener("事件名","事件处理函数","布尔值");

true：事件捕获

false：事件冒泡

removeEventListener();

2.4 IE事件处理程序

attachEvent

detachEvent

EventHanding.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <!--Html事件处理-->

        <button id="btn1" onclick="demo1()">Html事件处理</button>

        <script>

            function demo1(){

                alert("Html事件处理");

            }

        </script>

        <br />

        <!--DOM0级事件处理-->

        <button id="btn2">DOM0级事件处理</button>

        <script>

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

            btn2.onclick=function(){alert("DOM0级事件处理1")};//会被覆盖

            btn2.onclick=function(){alert("DOM0级事件处理2")};//会被覆盖

            btn2.onclick=function(){alert("DOM0级事件处理3")};

            //btn2.onclick=null;

        </script>

        <br />

        <!--DOM2级事件处理-->

        <button id="btn3">DOM2级事件处理</button>

        <script>

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

        btn3.addEventListener("click",demo31);

        btn3.addEventListener("click",demo32);

        btn3.addEventListener("click",demo33);

        function  demo31(){

            alert("DOM2级事件处理31");

        }

        function  demo32(){

            alert("DOM2级事件处理32");

        }

        function  demo33(){

            alert("DOM2级事件处理33");

        }

        btn3.removeEventListener("click",demo31);

        </script>

        <br />

        <!--IE事件处理-->

        <button id="btn4">IE事件处理</button>

        <script>

        //小于等于IE8

        var btn4=document.getElementById("btn4");

        if(btn4.addEventListener){

            btn4.addEventListener("click",demo4);

        }else if(btn4.attachEvent){

            btn4.attachEvent("onclick",demo4);

        }else{

            btn4.onclick=demo4();

        }

        function demo4(){

            alert("hello");

        }

        </script>

    </body>

</html>

3.事件对象

3.1 事件对象

在触发DOM事件的时候都会产生一个对象

3.2 事件对象event

1>type:获取事件类型

2>target：获取事件目标

3>stopPropagation():阻止事件冒泡

4> preventDefault():阻止事件默认行为

EventObject.html

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <div id="div">

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

             <a id="aid" href="EventHanding.html">跳转</a>

         </div>

         <script>

             document.getElementById("btn1").addEventListener("click",showtype);

             function showtype(event){

                 alert(event.type);//获得事件类型

                 alert(event.target);//获得事件目标

                 event.stopPropagation();//阻止事件冒泡

             }

             document.getElementById("div").addEventListener("click",showdiv);//事件的冒泡

             function showdiv(){

                 alert("div");

             }

             document.getElementById("aid").addEventListener("click",showA);

             function showA(event){

                 event.stopPropagation();

                 event.preventDefault();//阻止事件默认行为

             }

         </script>

     </body>

 </html>

Js 事件详解的更多相关文章

  1. 第三天：JS事件详解-事件流

    学习来源: F:\新建文件夹 (2)\HTML5开发\HTML5开发\04.JavaScript基础\6.JavaScript事件详解 学习内容:  1)基础概念 2)举例说明: 代码如上,如果用事件 ...

  2. js 事件详解 冒泡

    起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...

  3. JS事件详解

    hello,我是沐晴,最近呢,来总结一下 JS中的常用的事件,希望我们都能一起查漏补缺. 焦点事件 焦点事件在表单中经常用到,那什么是焦点呢?比如我们文本框里面的有光标的时候,就是获得了焦点,我们就可 ...

  4. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  5. js keyup、keypress和keydown事件 详解

    js keyup.keypress和keydown事件  详解 js keyup.keypress和keydown事件都是有关于键盘的事件 当一个按键被pressed 或released在每一个现代浏 ...

  6. JavaScript事件详解-jQuery的事件实现（三）

    正文 本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...

  7. JAVASCRIPT事件详解-------原生事件基础....

    javaScirpt事件详解-原生事件基础(一)   事件 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能 ...

  8. 单选框radio改变事件详解（用的jquery的radio的change事件）

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  9. DOM——事件详解

    事件 事件:触发-响应机制 事件三要素 事件源:触发(被)事件的元素 事件名称: click 点击事件 事件处理程序:事件触发后要执行的代码(函数形式) 事件的基本使用  var box = docu ...

随机推荐

  1. mybatis 错误： There is no getter for property named '*' in 'class java.lang.String解决

    现象: mybatis mapper.xml 的sql里如果直接使用了想要传入的变量,比如: <select id="selectXx" resultType="i ...

  2. cesium初始化参数

    var viewer = new Cesium.Viewer('cesiumContainer',{ animation:false, //动画控制不显示 //baseLayerPicker:fals ...

  3. java中getAttribute和getParameter的区别

    getAttribute表示从request范围取得设置的属性,必须要先setAttribute设置属性,才能通过getAttribute来取得,设置与取得的为Object对象类型 getParame ...

  4. 解决no-session延迟加载问题

    解决no-session延迟加载问题 说明:dao层使用Hibernate从数据库查询数据信息返回给web层,在web层打印信息报no-Session错误, 产生原因 关联对象默认都是采用延迟加载 事 ...

  5. 54. Spiral Matrix (Graph)

    Given a matrix of m x n elements (m rows, n columns), return all elements of the matrix in spiral or ...

  6. Element DatePicker日期范围选择

    前7天后7天 <el-date-picker v-model="value1" type="date" :picker-options="pic ...

  7. js高级——构造函数，实例对象和原型对象——prototype、__proto__和constructor构造器

    一.前言 了解JavaScript面向对象,需要先了解三个名词: 构造函数,实例对象和原型对象. 注意:JavaScript中没有类(class)的概念,取而代之的是构造函数,两者类似却又有很大的差别 ...

  8. php判断一个数组是另一个数组的子集

    需求最少的时间复杂度判断$a数组是否是$b数组的子集 // 快速的判断$a数组是否是$b数组的子集$a = array(135,138);$b = array(135,138,137); 实现方法 这 ...

  9. 布局分析002：入门级的CSS导航弹出菜单

    这种弹出菜单非常有意思,也有记录的意义,甚至可以说,掌握了这种弹出菜单,基本上CSS掌握的差不多. 主要涉及下面三个重要知识: CSS的继承性质. relative absolute定位. 子选择符& ...

  10. 疯狂JAVA讲义---第十五章：输入输出（上）流的处理和文件

    在Java中,把这些不同类型的输入.输出抽象为流(Stream),而其中输入或输出的数据称为数据流(Data Stream),用统一的接口来表示,从而使程序设计简单明了. 首先我要声明下:所谓的输入输 ...