【javascript总结】javascript的IE事件和DOM事件模型

通用的事件模型

1.是在HTML页面绑定

<button id="button" onclick="function();">按钮</button>

2.在javascript脚本文件中绑定事件处理

document.getElementById(‘button‘).onclick = function;

IE中的事件模型

1。使用script for绑定(这个绑定很少用)

<script for="btn1" event="onclick" type="text/javascript">
    alert("您单击了我");
</script>、

2.使用attachEvent方法绑定

document.getElementById(‘btn1‘).attachEvent("onclick", test);//为id为btn1的按钮绑定事件,单击按钮会触发test函数;

DOM的事件模型

使用addEventListener(“事件”,调用函数,事件传播的哪个阶段(true/false))

当为true的时候表示监听捕获阶段,false表示监听冒泡阶段

document.getElementById(‘btn1‘).addEventListener("click", test, true);//为id为btn1的按钮绑定事件,单击按钮会触发test函数,并且只监听其捕获阶段;

访问事件对象:

  • IE的事件对象是一个隐式的全局对象event 当时间发生的时候就会创建这个对象,次对象有很多属性
  • DOM事件模型与IE事件模型不同,其自动创建一个event对象,并隐式的将该对象作为事件处理函数的第一个参数传入

另外IE中还有事件冒泡:

event.cancelBubble=true;//取消IE的事件冒泡默认是false

IE的重定向事件(事件转发);

document.getElementById(‘btn1‘).fireEvent("onCliclk", event)//将事件传给ID为btn1的按钮。

捕获事件

target.setCapture();//设置target对象捕获改时间
target.releaseCapture(); //设置target对象释放捕获。

DOM的事件传播

DOM模型事件先后沿着两个方向传播,第一阶段是事件捕获阶段,从顶层对象传播到事件发生目标对象。第二阶段是冒泡阶段,从事件发生的目标对象向上传播到顶层对象;

event.stopPropagation()//阻值event事件传播

取消默认行为

event.preventDefault();
时间: 2024-10-11 03:26:19

【javascript总结】javascript的IE事件和DOM事件模型的相关文章

事件注册 DOM事件流 事件对象(常用属性,方法) 事件委派(鼠标,键盘事件对象)

注册事件概述 给元素添加事件,称为注册事件或者绑定事件 注册事件有两种方式:传统方式和方法监听注册方式 传统注册方式:利用 on 开头的事件:例如:onclick:注册事件的唯一性,后面的注册事件会把前面的覆盖 方法监听注册方式:addEventListener()IE9+:IE9以前用 attacthEvent()代替:会按照注册顺序依次执行没有唯一性的问题 addEventListener() 事件监听方式 eventTarget.addEventListener(type, listene

javascript的IE事件和DOM事件模型

通用的事件模型: 1.是在HTML页面绑定 <button id="button" onclick="function();">按钮</button> 2.在javascript脚本文件中绑定事件处理 document.getElementById('button').onclick = function; IE中的事件模型 1.使用script for绑定(这个绑定很少用) <script for="btn1" e

JavaScript学习总结【10】、DOM 事件

DOM 事件是 JS 中比较重要的一部分知识,所谓事件,简单理解就是用户对浏览器进行的一个操作.事件在 Web 前端领域有很重要的地位,很多重要的知识点都与事件有关,所以学好 JS 事件可以让我们在JS的学习道路中更进一步. 1.事件流 事件流描述的是从页面中接受事件的顺序.但是 IE 和 Netscape 开发团队提出了两个截然相反的事件流概念,IE 的事件流是事件冒泡流,而 Netscape 的事件流是事件捕获流. (1).事件冒泡 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的

从click事件理解DOM事件流

事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这些函数的运行顺序?于是有了事件流的概念(事件捕捉,事件冒泡) 举个例子: <div id="outer"> <p id="inner">Click me!</p> </div> 为了看起来方便,先无视CSS样式,那么蓝色的

DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件

前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = function() { } DOM1 一般只有设计规范,没有设计跟事件相关的东西:所以直接跳过 DOM2 element.addEventListener(‘click’, function() { }, false) DOM3 element.addEventLIstener(‘keyup’,

JavaScript&amp;jQuery.DOM事件监听器

DOM是事件监听器 DOM事件监听器予许一个事件触发多个方法,在实际工作中应用比较多. <!DOCTYPE html><html> <head> <title>DOM事件监听器1</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&q

看懂此文,不再困惑于javascript中的事件绑定、事件冒泡、事件捕获和事件执行顺序

最近一个项目基于3维skyline平台,进行javascript二次开发.对skyline事件的设计真是无语至极,不堪折磨啊!抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定.在js代码中绑定.下面的方式1.方式2属于在html中绑定事件,方式3.方式4和方式5属于在js代码中绑定事件,其中方法5是最推荐的做法. 方式1: HTML的DOM元素

javascript中的事件冒泡、事件捕获和事件执行顺序

谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. DOM事件标准定义了两种事件流,这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响.这两种事件流分别是捕获和冒泡.和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选择实现了捕获事件流,微软则实现了冒泡事件流.幸运的是,W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式. 1事件传播--冒泡与捕

整理之DOM事件阶段、冒泡与捕获、事件委托、ie事件和dom模型事件、鼠标事件

整理之DOM事件阶段 本文主要解决的问题: 事件流 DOM事件流的三个阶段 先理解流的概念 在现今的JavaScript中随处可见.比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流.都是流的一种生动体现.用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 事件流分事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其