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. C#直接解析Json键值对

    string test_json = "{\"name\":\"tom\",\"nickname\":\"tony\&q ...

  2. 记一次全站升级https引发的一系列问题

    中秋假期,闲来无事.花了一下午折腾了下https,说实话这年头还有网站不上https显然是折腾精神不够啊~ 1.SSL证书评估 看了市面上各种类型的证书,有收费的也有免费的,但是最终还是选择了腾讯云提 ...

  3. PyQt5系列教程(三)用py2exe进行程序打包

    软硬件环境 Windows 10 Python 3.4.2 PyQt5 Py2exe 前言 在我们开发了完整的PyQt5项目后,一般都会将其打包成exe文件,方便其他人使用.今天我们就用Py2exe这 ...

  4. snmp获取设备相关管理信息

    在本文中,作者将向我们展示如何用snmp代理监视网络设备,甚至发送软件警告. 网络上很多代理在为我们服务.只要我们开启UDP/161,162端口,这些代理就会以Management Informati ...

  5. 基于Windows 配置 nginx 集群 & 反向代理

    1.下载 nginx 下载页面 : http://nginx.org/en/download.html 具体文件: http://nginx.org/download/nginx-1.7.0.zip ...

  6. django一对一数据库建立和进行数据传输的3种方式all()(对象) values()(字典) values_list()(元组)

    class Business(models.Model): caption = models.CharField(max_length=32) code = models.CharField(max_ ...

  7. update svn cache 慢

    eclipse 打开了一个工程,就进行了update svn cache,弄了2个多小时了还是在进行.观察这个过程在空文件夹上也进行了不少时间,我感觉到可能方法错了.试了下关闭SVN--> sv ...

  8. Attribute与元数据

    在MSDN中,Attribute被定义为“是被指定给某一声明的一则附加的声明性信息”. 我们可以通过Attribute来定义设计层面的信息以及运行时(run-time)信息,也可以利用Attribut ...

  9. S 配置邮箱

  10. linux install jupyter notebook

    install sudo pip install jupyter notebook start sudo jupyter notebook 一般,文件目录默认在你启动的位置.你可以在notebook里 ...