javascript基础常识问答（六）

JavaScript 的事件流模型都有什么，以及怎么阻止他们？

事件流模型有三中

1. 原始事件模型

在原始事件模型中（DOM 0级），事件发生后没有传播的概念，没有事件流。
事件发生，马上处理，完事，就这么简单。
监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。

1. HTML代码中指定属性值：<input type="button" onclik="fn()">
2. js代码中指定属性值：document。getElementsByTagName("input")[0].onclick = fn

优点

所有浏览器都兼容

缺点

逻辑与显示没有分离（结构与行为没有分离）。

相同事件的监听函数只能绑定一个，后绑定的会覆盖掉前面。

无法通过事件的冒泡、委托等机制完成更多事情。
在当前web程序模块化开发以及更加复杂的逻辑状况下，真正项目中不推荐使用，适合写例子，速度快。

2. DOM事件模型

此模型是W3C制定的标准模型(IE6~8除外的浏览器)，都按这个标准规范来；
W3C制定的事件模型中，一次事件的发生包含三个过程：

capturing phase:事件捕获阶段。

事件被从document一直向下传播到目标元素,在这过程中依次检查经过的节点是否注册了该事件的监听函数，若有则执行。

target phase:事件处理阶段。

事件到达目标元素,执行目标元素的事件处理函数.

bubbling phase:事件冒泡阶段。

事件从目标元素上升一直到达document，同样依次检查经过的节点是否注册了该事件的监听函数，有则执行。

所有的事件类型都会经历captruing phase但是只有部分事件会经历bubbling phase阶段,例如submit事件就不会被冒泡。

标准的事件监听器的绑定

addEventListener("eventType","handler","true|false")

其中eventType指事件类型，注意不要加‘on’前缀，与IE下不同;
第二个参数是处理函数;
第三个即用来指定是否在捕获阶段进行处理，一般设为false来与IE保持一致，除非你有特殊的逻辑需求。

监听器的解除

removeEventListner("eventType","handler","true!false");

3. IE事件模型

IE不把该对象传入事件处理函数,由于在任意时刻只会存在一个事件,所以IE把它作为全局对象window的一个属性

// 用IE8执行下列代码
window.onload = function (){alert(window.event)};// object event
setTimeout(function(){alert(window.event)},2000);// null
// 由此可见IE是将event对象在处理函数中设为window的属性，一旦函数执行结束，便被置为null了。

IE的事件模型只有两步，先执行元素的监听函数，然后事件沿着父节点一直冒泡到document。

IE模型下的事件监听方式

attachEvent( "eventType","handler")
//其中evetType为事件的类型，如onclick，注意要加’on’

解除事件监听器的方法

detachEvent("eventType","handler" )

优缺点

IE的事件模型已经可以解决原始模型的三个缺点，但其自己的缺点就是兼容性，只有IE系列浏览器才可以这样写。

总结

以上便是事件的三种模型，我们在开发的时候需要兼顾IE与非IE浏览器，所以注册一个监听器应该这样写:
var a = document.getElementById('a');
if(a.attachEvent){a.attachEvent('onclick',func);
}
else{a.addEventListener('click',func,false);
}
一般会借助现有框架或类库已经封装好的，比如jQuery;

如果同时出现DOM0和DOM2事件处理程序，那么不同浏览器处理它们的优先级:
chrome/opera/safari等webkit内核的浏览器：DOM级 --> DOM0级
firefox浏览器和IE浏览器（指IE9及以上版本）会将DOM0级事件优先调用：DOM0级 -->DOM级

事件绑定和普通事件有什么区别？

事件绑定是指把事件注册到具体的 DOM 元素之上，
普通事件指的是可以用来注册的事件

事件绑定例子

DOM 元素.addEventListener( 事件类型，事件处理函数)

普通事件例子

DOM 元素.事件类型 = function(){事件处理函数}

对于事件绑定来说，同一个 DOM 元素上面绑定同样的事件类型时，可以绑定多个事件处理函数，实际解决了多人开发情况下造成的时间处理覆盖的情况（污染）;

如果使用普通事件来解决这个问题的时候会造成后写的代码将前写的代码进行了重写操作，造成环境污染。
实际开发的时候可以视情况而定，来选择绑定事件的方式。

javascript基础常识问答（六）相关推荐

javascript基础学习（六）
javascript之对象学习要点: 对象的属性和方法对象的原型一.对象对象其实就是一种引用类型,而对象的值就是引用对象的实例. 二.创建对象在javascript中有两种对象,一种是系统内 ...
JavaScript 基础（十六）：Navigator对象
2019独角兽企业重金招聘Python工程师标准>>> Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本. 1. 对象属性: 属性描述 appCod ...
Web前端开发精品课HTML CSS JavaScript基础教程第六章课后编程题答案
编程题: 利用这样一章学到的知识,制作如图6-10所示的表格效果,并且要求代码语义化. 用VS2013新建ASP.NET空网站,添加新项,建立HTML文件,向其加入以下代码: <!DOCTYPE ...
Javascript基础进阶(十六）JS中面向对象的理解、继承、封装、多态
小编推荐:Fundebug提供JS错误监控.微信小程序错误监控.微信小游戏错误监控,Node.j错误监控和Java错误监控.真的是一个很好用的错误监控费服务,众多大佬公司都在使用. 面向对象编程OOP ...
JavaScript基础---语言基础（1）
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...
javascript基础教程_JavaScript基础教程（九）对象、类的定义与使用
对象.类的定义与使用对象与类是面向对象程序设计语言教学过程中不可避免需要讲解的内容之一.很多人将两者混为一谈,简单认为对象就是类,类就是对象.实际上深入分析的话,对象与类的区别还是较为明显的.本文主 ...
论文浅尝 | 通过知识到文本的转换进行知识增强的常识问答
笔记整理:陈卓,浙江大学在读博士,主要研究方向为低资源学习和知识图谱论文链接:https://www.aaai.org/AAAI21Papers/AAAI-10252.BianN.pdf 发表会议: ...
菜鸟学前端--javascript基础
在学习过css相关的知识,有了前端工程师的一些基础知识.但要较好的掌握前端,必须要学习好javascript的知识. 下面将从基本语法.变量.关键字.保留字.语句.函数.BOM等角度阐释. 一.基本语 ...
#Javascript基础
Javascript基础注释与语句 1.注释单行注释:// 多行注释:/**/ 2. 语句一段脚本就是一系列计算机能够一步一步执行的指令.每一条单独的指令或步骤就被称为一条语句.语句以分号(;) ...
JavaScript基础知识与脚本语言总结
1 Aptana插件安装 1.Aptana插件安装 <1>Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE. <2>它的特点包括: J ...

javascript基础常识问答（六）

JavaScript 的事件流模型都有什么，以及怎么阻止他们？

事件流模型有三中

1. 原始事件模型

2. DOM事件模型

3. IE事件模型

总结

事件绑定和普通事件有什么区别？

javascript基础常识问答（六）相关推荐

最新文章

热门文章