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. 由du，df 得出不同结果反应出的问题

    最近遇到了因为某种异常情况导致某目录下日志暴增,在修复异常情况后,发现pm2 不能启动,查看日志发现原因为空间不足. 使用du -sh查看确实为空间不足.在rm -rf 删除之后,仍然不能启动.这时用 ...

  2. python操作excel表格文件--使用xlrd模块

    原文: http://www.cnblogs.com/lhj588/archive/2012/01/06/2314181.html 引言: 实际工作中,可能很多情况下都会用到excel表格,像如果不需 ...

  3. C# Panel控件截图

    [System.Runtime.InteropServices.DllImportAttribute("gdi32.dll ")] private static extern bo ...

  4. windows解压缩版MySQL5.6.40的安装

    windows解压缩版MySQL5.6.40的安装 安装步骤: 1.下载mysql-5.6.40-winx64.zip https://cdn.mysql.com//Downloads/MySQL-5 ...

  5. Oracle Tip: Choosing an efficient design for Boolean column values

    Takeaway: When designing a database table structure, it's important to choose an efficient strategy ...

  6. UNITY 复制对象后局部坐标和世界坐标的变化问题

    void Start () { var pgo = transform.Find ("Button").gameObject; obtn = Instantiate (pgo); ...

  7. js中获取页面元素节点的几种方式

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Python运维开发基础03-语法基础

    上节作业回顾(讲解+温习60分钟) #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen #只用变量和字符串+循环实现" ...

  9. C++实现：把一个文件夹里的冗余文件(.txt)删除

    代码很简单,调用了MFC里的几个函数.这里的冗余判断,是要遍历文件内容,进行两两比较. 需要注意的地方有两点: 1.源文件里头文件<afx.h>必须放在最前面.这里是为了避免nafxcwd ...

  10. Python dict() 函数

    Python dict() 函数  Python 内置函数 描述 dict() 函数用于创建一个字典. 语法 dict 语法: class dict(**kwarg) class dict(mappi ...