一、事件绑定模型

DOM0事件模型

1.内联模型（行内绑定）：将函数名直接作为HTML标签中事件属性的属性值

<button id="btn" onclick="func()">内联模型绑定</button>

缺点：不符合W3C中关于内容与行为分离的基本规范

2.脚本模型（动态绑定）：通过在JS中选中某个节点，然后给节点添加onclick属性。

<button id="btn1">脚本模型绑定</button>
<script>
    document.getElementById("btn1").onclick = function () {
        alert("");
    };
</script>

优点：符合W3C中关于内容与行为分离的基本规范，实现HTML与JS的分离。

3.DOM0共有缺点：

a.同一个节点只能添加一次同一事件，如果添加多次最后一个生效

b.通过DOM0绑定的事件，一旦绑定将无法取消（虽然行内绑定可以removeAttribute但不算）

DOM2事件模型

1.添加DOM2事件绑定：

①IE8之前，使用.attachEvent("onclick",func3);谷歌不支持这种写法

②IE8之后，使用.addEventListener("click",func3,true/false);

参数三：false（默认）表示事件冒泡；传入true 表示事件捕获；

③兼容所有浏览器的处理方式：

<button id="btn2">DOM2模型绑定</button>
<script>
    var btn2 = document.getElementById("btn2");
    if(btn2.attachEvent){
        btn2.attachEvent("onclick",func3);
    }else{
        btn2.addEventListener("click",func3);
    }
    function func3(){
        alert("");
    }
</script>

2.DOM2绑定的优点

①同一个节点可以绑定多个同类事件

<script>
    btn2.addEventListener("click",function(){
        alert("第二次绑定click事件");
    });
</script>

②使用DOM2绑定的事件可以有专门的函数进行事件取消

3.DOM2取消事件绑定：

①使用.attachEvent("onclick",func3);绑定，要用.detachEvent("onclick",func3);取消

②使用.addEventListener("click",func3);绑定，要用.removeEventListener("click",func3);取消

③兼容所欲浏览器的处理方式：

注意：如果DOM2绑定的事件，需要取消，则绑定事件时，回调函数必须是函数名，而不能是匿名函数。

因为取消事件时需要传入函数名进行取消

<button id="btn3">取消DOM2模型绑定</button>
<script>
    var btn3 = document.getElementById("btn3");
    btn3.onclick = function () {
        if(btn2.detachEvent){
            btn2.detachEvent("onclick",func3);
        }else {
            btn2.removeEventListener("click",func3);
        }
        alert("事件已取消！");
    };
</script>

二、事件流模型

1.事件冒泡(false或默认)：当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点

2.事件捕获(true)：当触发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，直到当前节点自身。

　　　　　　　　↓ DOM根节点 ↑
 
　　　　　　　　　　捕 冒
 
　　　　　　　　↓ 祖先节点 ↑
 
　　　　　　　　　　获 泡
 
　　　　　　　　↓ 当前节点 ↑

3.什么时候事件冒泡，什么时候事件捕获？

①当使用addEventListener绑定事件，第三个参数传入true时表示事件捕获；

②除此之外全都是事件冒泡

<body>
　　<div id="div1">1
   　　 <div id="div2">2
       　　 <div id="div3">3</div>
    　　</div>
　　</div>
</body>
<script>

　　var div1 = document.getElementById("div1");
　　var div2 = document.getElementById("div2");
　　var div3 = document.getElementById("div3");

 　//事件冒泡
　　div1.addEventListener("click",function () {
    console.log("div1 click  1");
    });
    div2.addEventListener("click",function () {
        //myParagraphEventHandler();
        console.log("div2 click  2")
    });
    div3.addEventListener("click",function () {
        console.log("div3 click  3");
    });
 
    //事件捕获
    div1.addEventListener("click",function () {
        console.log("div1 click  1");
    },true);
    div2.addEventListener("click",function () {
        //myParagraphEventHandler();
        console.log("div2 click  2")
    },true);
    div3.addEventListener("click",function () {
        console.log("div3 click  3");
    },true);

</script>

4.阻止事件冒泡：

①IE10之前（包含10），使用：e.cancelBubble = true;

②IE10之后，使用：event.stopPropagation();

　　function myParagraphEventHandler(e) {
        e = e || window.event;
        if (e.stopPropagation) {
            e.stopPropagation(); //IE10以后和其他浏览器
        } else {
            e.cancelBubble = true; //IE10以前（包含10）
        }
    }

5.阻止默认事件：

①IE10之前（包含10），使用：e.returnValue = false;

②IE10之后，使用：e.preventDefault();

<a href="01-事件笔记.html" onclick="func()">超链接</a>
<script>
function func(e) {
        e = e || window.event;
        eventHandler(e);
        alert("您点击了超链接但是您走不了哈哈哈哈哈！！！");
    }
//阻止默认事件的函数
    function eventHandler(e) {
        e = e || window.event;
        // 防止默认行为
        if (e.preventDefault) {
            e.preventDefault(); //IE10以后和其他浏览器
        } else {
            e.returnValue = false; //IE10以前（包含10）
        }
    }
</script>

JavaScript常用的事件模型的更多相关文章

说说JavaScript中的事件模型
1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的 ...
理解javascript中的事件模型
javascript中有两种事件模型:DOM0,DOM2.而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些. 一. DOM0级事件模型 DOM0级事件模型是早期的事件 ...
JavaScript中的事件模型
JS中的事件 1.鼠标事件 onclick ondbclick onmouseover onmouseout 2.HTML事件 onload onunload onsubmit ...
Javascript事件模型系列（一）事件及事件的三种模型
一.开篇在学习javascript之初,就在网上看过不少介绍javascript事件的文章,毕竟是js基础中的基础,文章零零散散有不少,但遗憾的是没有看到比较全面的系列文章.犹记得去年这个时候,参加 ...
JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
javascript之BOM事件注册和案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...
javascript中0级DOM和2级DOM事件模型浅析
Javascript程序使用的是事件驱动的设计模式,为一个元素添加事件监听函数,当这个元素的相应事件被触发那么其添加的事件监听函数就被调用: <input type="button&q ...
JavaScript事件模型及事件代理
事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...

随机推荐

HTML DOCTYPE 的重要性
定义和用法 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> 声明不是 HTML 标签:它是指示 we ...
sublimeText3使用记录
sublime确实是神器,最近学习了一下,做个记录 1.下载 http://www.sublimetext.com/3 选择对应的版本安装即可(我的是win10 64位机) 2.个人配置 2.1.默认 ...
一键安装 redmine on windows 和发邮件设置
一键安装 redmine on windows 和发邮件设置 1)使用http://bitnami.org/stack/redmine一键安装redmine (windows). 2)修改下面的文件: ...
在 Linux 下用 mkdir 命令来创建目录和子目录
mkdir 是什么呢 Mkdir 是一个用来在 Linux 系统下创建目录的命令.此命令属于内建命令. 运行 mkdir 命令你可以在你的控制台直接键入 mkdir 来使用它. $ mkdir 默认 ...
PS 色调——颜色运算
通过对三个通道定义不同的运算,使图像的色调改变,进而生成不同色彩的图像. clc; clear all; Image=imread('4.jpg'); Image=double(Image); R=I ...
PS 滤镜算法原理——拼贴
%%%% Tile %%%%% 实现拼贴效果 %%%%% 将原图像进行分块,然后让图像块在 %%%%% 新图像范围内进行随机移动,确定移动后的边界 %%%%% 将移动后的图像块填入新图像内 clc; ...
onDraw(canvas)和dispatchDraw（canvas）方法
绘制VIew本身的内容,通过调用View.onDraw(canvas)函数实现绘制自己的孩子通过dispatchDraw(canvas)实现 View组件的绘制会调用draw(Canvas canv ...
fastDFS与Java整合上传下载
由于项目需要整合个文件管理,选择使用的是fastDFS. 整合使用还是很方便的. 准备下载fastdfs-client-java源码源码地址密码:s3sw 修改pom.xml 第一个plugin ...
nginx日志中添加请求的response日志
换个新公司,做一些新鲜的事情,经过一天的琢磨,终于成功添加response日志在nginx的日志中添加接口response的日志由于此功能在nginx内置的功能中没有,需要安装第三方模块ngx_l ...
java实习面试题（阿里一面）
1.抽象类和接口的不同点: 抽象类可以有构造函数,接口中不能有构造函数: 抽象类中可以有普通成员变量,但是接口中不能有普通成员变量: 抽象类中可以包含非抽象的普通方法,但是接口中必须是抽象方法:(jd ...

JavaScript常用的事件模型

一、事件绑定模型

二、事件流模型

JavaScript常用的事件模型的更多相关文章

随机推荐

热门专题