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. 解决 ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES) 问题(转载)

    最近新装好的mysql在进入mysql工具时,总是有错误提示:# mysql -u root -pEnter password:ERROR 1045 (28000): Access denied fo ...

  2. python博客

    https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000

  3. 项目管理工具maven（一）

    1 Maven的概述 1.1 依赖管理 就是对jar包的统一管理  可以节省空间 1.2 项目一键构建 编码  编译  测试(junit)  运行  打包  部署 一个 tomcat:run就能把项目 ...

  4. 十、api自动化环境问题及解决方案汇总（持续更新）

    1.jenkins报错: Unable to read /root/.jenkins/config.xml at hudson.WebAppMain$3.run(WebAppMain.java:248 ...

  5. 浅析JavaScript中的typeof运算符

    对JavaScript中的typeof运算符进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助. 如果typeof的运算符是数字.字符串或者布尔值,它返回的结果就是"numb ...

  6. IDEA 实用注册码自动生成

    将以下代码保存成keygen.java java开发者一看就明白什么意思! import java.math.BigInteger; import java.util.Date; import jav ...

  7. sql server2008本地连接选择windows身份验证无法登陆的解决办法

    1.安装完sqlserver数据库,本地连接登录不了 解决办法:进入cmd,输入net start mssqlserver 服务启动后,再次用windows身份验证就可以登陆本地数据库了

  8. eclipse cut copy paste plugin

    The Cut Copy Paste Plus plug-in enhances the standard Cut, Copy and Paste commands in Eclipse IDE. W ...

  9. python初步要点

    [python初步要点] #! 用于告诉操作系统去哪里找Python解释器为运行您的程序. 1.print 的输出有以下2种形式,""%()的形式类似于C的printf. 要注意逗 ...

  10. S 配置邮箱