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. 6_python之路之atm购物

    6_python之路之atm购物 1.程序说明:Readme.cmd supermarket 项目主目录 ├── access.log 日志文件 ├── atm atm程序 │?? ├── atm.p ...

  2. pycharm（2016.3.2版本）导入工程文件执行程序时弹出Edit configuration

    最近为了能在公司和住所连续写脚本,每写好一部分就压缩打包发送到手机,然后再发送到公司电脑或者自己的笔记本,但是发现重新打开工程文件时有时会弹出Edit configuration配置框,而且每执行一个 ...

  3. 简单的TCP代理服务器

    我之前的一篇文章(http://www.cnblogs.com/MikeZhang/archive/2012/03/07/socketRedirect.html )中介绍过用python写的一个简单的 ...

  4. mybatis相对于ibatis的优势

    2010年,apache的Ibatis框架停止更新,并移交给了google团队,同时更名为MyBatis.从2010年后Ibatis在没更新过,彻底变成了一个孤儿框架.一个没人维护的框架注定被myba ...

  5. IntelliJ IDEA—IDEA2018.1激活方式

    前言 以前用过2015的版本,后面就没有使用了,现在又重新用起来了,突然发现激活好难,通过网上找破解方式,总算找到了一种可以实现破解的方法了.. 破解方式 本人使用的是使用破解补丁的方式实现破解的,此 ...

  6. Linux CentOS修改网卡IP/网关设置

    1. 修改对应网卡IP的配置文件 修改以下内容 2. 修改对应网卡的网关的配置文件 vi /etc/sysconfig/network 修改以下内容 3. CentOS 修改DNS 修改以下内容 4. ...

  7. Selection Tools

    [Selection Tools] 1.Marquee Tools. OptionBar其中四年控件涵意如下: 2.Magnetic Lasso Tool,根据属标轨迹自动画点. 3.Magic Wa ...

  8. redis客户端执行命令没反应

    问题:redis-cli连接客户端后,执行命令没有反应   解决方法:通过指定一个开启守护进程的配置文件来启动服务,redis-server ../redis.conf 说明:redis.conf是我 ...

  9. java集合：常用集合的数据结构

    List 有序可重复 ArrayList ArrayList数据结构是数组.查询快,增删慢.ArrayList是线程不安全的,允许元素为null . Vector 线程安全的数组,效率较差,已经过时不 ...

  10. 2015年传智播客JavaEE 第168期就业班视频教程 02-ERP简介

    其实ERP描述的是管理一个企业的整体的所有的资源.ERP是帮你管整个企业的运行.那它是管哪一类企业呢?比如说帮光线传媒.ERP更多是用在生产制造企业,这是最好的,其次的就是这种销售型企业,二道贩子那种 ...