事件:文档/窗口中发生的特定的交互瞬间

瀑布流,图片轮播

动作都是通过事件触发的

课程内容:

1,理解事件流

2,使用时间处理程序

3,不同的事件类型

ie4.0以后,

事件流:描述的是从页面中接收事件的顺序

ie:事件冒泡流

n:事件捕获流

事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档)

事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。多数浏览器也支持,但是低版本的支持不好,请放心使用事件冒泡,知道事件捕获即可。

html事件处理程序:事件直接加载在html结构里,缺点是html和js紧密耦合在一起,如果要更改的话,html和js都要改,麻烦。很多开发人员会摒弃掉。

dom0级事件处理程序:把一个函数赋值给一个事件的处理程序的属性,js比较传统的,用的最多的一种,简单,跨浏览器的优势。

<script>
    btn2.onclick = function showmessage(){
        alert("111");
    }
    btn2.onclick = null;//删除onclick属性

</script>

dom2级事件处理程序:2个方法,用于处理指定和删除事件处理程序的操作方法 addEventListener()和removeEventListener(),包含事件名、作为事件处理程序的函数,布尔值(布尔值false-事件冒泡,所以一般用false,true-事件捕获,不常用。)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div>
    <input type="button" value="按钮1" id="btn1" onclick="showMes()">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">

</div>
    <script>
    function showMes(){
        alert("这是html事件处理程序");
    }

    var btn2 = document.getElementById("btn2");
    btn2.onclick = function showmessage(){
        alert("这是dom0级处理程序");
    }
    btn2.onclick = null;//删除onclick属性

    var btn3 = document.getElementById("btn3");
    addEventListener("click",showMes,false);
    addEventListener("click",function(){
        alert(btn3.value);
    },false);
    addEventListener("click",function(){
        alert("这是dom2级处理程序");
    },false);
    removeEventListener("click",showMes,false);//删除事件属性
</script>
</body>
</html>

//dom0 和 dom2都可以添加多个事件属性,按照代码顺序执行

事件名不能加on,false兼容各种浏览器,listener单词不要写错。

测试,ie不起作用。

4、IE事件处理程序-支持ie和opera
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数:事件处理程序名称与事件处理函数。因为ie8和以前的版本只支持事件冒泡,默认事件冒泡。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div>
        <input type="button" value="按钮1" id="btn1" onclick="showMes()">
        <input type="button" value="按钮2" id="btn2">
        <input type="button" value="按钮3" id="btn3">
    </div>
    <script>
    //html事件处理程序
    function showMes() {
        alert("这是html事件处理程序");
    }

    //dom0级事件处理程序
    var btn2 = document.getElementById("btn2");
    btn2.onclick = function showmessage() {
        alert("这是dom0级处理程序");
    }
    btn2.onclick = null; //删除onclick属性

    // //dom2级事件处理程序
    // var btn3 = document.getElementById("btn3");
    // addEventListener("click", showMes, false); //事件名不能加on,false兼容各种浏览器,listener单词不要写错。
    // addEventListener("click", function() {
    //     alert(btn3.value);
    // }, false);
    // addEventListener("click", function() {
    //     alert("这是dom2级处理程序");
    // }, false);
    // removeEventListener("click", showMes, false); //删除事件属性

    // //dom0 和 dom2都可以添加多个事件属性,按照代码顺序执行

    //能力检测 跨浏览器事件处理
    var eventutill = {
        //添加句柄
        addHandler:function(element,type,handler){
            if(element,addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element,attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;//[]作用等同于".","."不能和字符串紧接着写
            }
        },//这里记得加逗号
         //删除句柄

        removeHandler:function(element,type,handler){
            if(element,removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element,detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        }
    }
    eventutill.addHandler(btn3,"click",showMes);//click记得要加引号
    //eventutill.addHandler(btn3,“click”,showMes);

    </script>
</body>

</html>

DOM事件揭秘-事件流的更多相关文章

  1. HTML 事件(三) 事件流与事件委托

    本篇主要介绍HTML DOM中的事件流和事件委托. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4 ...

  2. 三言两语之js事件、事件流以及target、currentTarget、this那些事

    厉害了我的哥--你是如此简单我却将你给遗忘   放假前再看某文档,里边提到两个我既熟悉又陌生的概念target.currentTarget,说他熟悉我曾经看到过这两个事件对象的异同处,说他陌生吧?很不 ...

  3. 【使用 DOM】使用事件

    1. 使用简单事件处理器 可以用几种不同的方式处理事件.最直接的方式是用事件属性创建一个简单事件处理器(simple event handler).元素为它们支持的每一种事件都定义了一个事件属性.举个 ...

  4. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  5. js事件流、事件处理程序/事件侦听器

    1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...

  6. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

  7. JavaScript 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数 ...

  8. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  9. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  10. JavaScript Event 事件 事件流 事件对象 事件处理程序 回调函数 error和try...catch和throw

    参考资料: 慕课网 DOM事件探秘    js事件对象 处理 事件驱动: JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个事件,该事件会驱动某些函数 ...

随机推荐

  1. LINQ系列:Linq to Object分组操作符

    分组是指根据一个特定的值将序列中的值或元素进行分组.LINQ只包含一个分组操作符:GroupBy. GroupBy 1>. 原型定义 public static IQueryable<IG ...

  2. ClickOnce部署(2):自动更新

    上次我们说了如何用最基本的方式用ClickOnce技术部署应用程序项目,本篇我们来认识一下如何让应用程序具备自动更新的功能. 我们依然通过实例来学习. 第一步,随便建一个应用程序项目,至于是控制台.W ...

  3. Iterate Files by Tcltk

    Iterate Files by Tcltk eryar@163.com Abstract. Tcl/Tk provide a programming system for developing an ...

  4. ASP.NET MVC之国际化(十一)

    前言 在项目中遇到国际化语言的问题是常有的事情,之前在做关于MVC国际化语言时,刚开始打算全部利用AngularJS来实现,但是渐渐发现对于页面Title难以去控制其语言转换,于是对于页面Tiltle ...

  5. iOS开发之窥探UICollectionViewController(一) -- Ready Your CollectionViewController

    之前用CollectionViewController只是皮毛,一些iOS从入门到精通的书上也是泛泛而谈.这几天好好的搞了搞苹果的开发文档上CollectionViewController的内容,亲身 ...

  6. 纯CSS打造忙碌光标

    我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转. 以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来 ...

  7. Java内存模型深度解析:重排序 --转

    原文地址:http://www.codeceo.com/article/java-memeory-2.html 数据依赖性 如果两个操作访问同一个变量,且这两个操作中有一个为写操作,此时这两个操作之间 ...

  8. 使用普通用户替代root来管理IEE

    环境:RHEL 6.4 + IEE 4.0.6 需求:IEE数据库之前是使用root用户部署和管理的,现在安全加固,将数据库交给普通用户iee来管理. 一.当前环境 二.安全加固 1.创建iee用户 ...

  9. IEE重建表完全释放磁盘空间具体步骤参考

    环境:RHEL 5.3 + IEE 5.1.40 本文目的:指导项目侧人员再遇到此类改动需求时可以自己更改.需求:mr_intrainterfreq表重建,历史数据全部删掉. 1.停库: 1.1确认现 ...

  10. Cesium应用篇:3控件(6) FullScreen/ VR / Home

    这三个都是按钮类的,使用也比较简单,而且也没有什么可扩展的方面,所以并无太多知识点. FullScreen和VR两个按钮在移动端也支持. Home按钮默认指向美国区域,可以指定相机默认的范围,来更改H ...