javascript中的事件问题的总结

一.什么是事件?

  事件就是DOM和浏览器之间的交互行为(只要触发了这个行为,也就相当于触发了事件),我们可以通过事件监听来绑定事件,例如:box.onclick=function(){},如果我们点击了这个盒子,就触发了盒子的click事件,同样会把事件绑定给这个方法,让其执行某一些特定的操作。(事件是浏览器默认给的,与生俱来的,绑定事件时不过是给某一特定元素绑定对应的事件名以及方法,让其执行特定的方法)

事件绑定:就是给某一个元素的相关事件行为绑定方法

  -> DOM 0级事件

   

  -> DOM 2级事件:

   

二.DOM 0级与DOM 2级事件的区别:

  1.DOM 0级属于给当前元素的某一个私有的属性赋值:box.click=...

    1).我们通过事件的监听处理程序 onclick属性=function(){}这种形式绑定的事件,叫做DOM 0级事件

    2).所有的DOM 0级事件都是在冒泡,执行的事件处理函数

    3).只能给当前元素的某一个事件绑定一个方法,绑定多个的时候,后边绑定的会将前边的覆盖掉

    4).我们所说的事件是文档和浏览器的交互行为,而文档是DOM,DOM包含了html和document

    5).移除事件监听的处理程序就是直接访问DOM对象的事件监听属性,然后讲处理事件的函数设置为null,比如:

      

  2.DOM2级属于通过原型链的查找机制,找到EventTarget.prototype的addEventListen这个方法,执行这个方法,把需要绑定的函数放在当前元素的事件池中。

    1).可以给当前元素的某一事件类型绑定多个不同的方法,触发事件,这些绑定的方法会按照在事件池中的顺序(和绑定的的顺序相同)依次把方法执行(IE

低版本有区别)

    2).DOM 2中有一些单独的事件,这些事件不是元素的私有属性,所以只有DOM2的绑定方式才会给这些事件绑定方法,例如:DOMContentLoaded...

    3).DOM 2级事件处理事件函数的执行时间是在捕获阶段执行还是在冒泡阶段执行

    4).DOM2级事件的事件监听,是通过DOM元素的原型链查找事件对象上的原型上的addEventListener实现的监听事件

    5).移除事件监听,是通过removeEventListener实现的移除事件监听(标准浏览器)

    6).如果第三个参数不传参的话,我们默认是false,也就是在冒泡阶段发生的

    7).事件处理程序中的this是当前触发事件的元素对象

  注:1.在IE浏览器中是不同的,IE中的DOM 2级事件,是通过attachEvent()实现的事件监听和detachEvent()事件移除监听,只支持两个参数,将所有事件都定义在冒泡阶段执行,IE浏览器以及IE8以前,即使是DOM 2级事件,也只是支持事件的处理函数,在冒泡阶段执行。

    2.IE中的事件处理程序的this是window

三.事件流:

  事件的触发执行分为三个步骤:事件捕获阶段->捕获事件源->事件冒泡阶段
  事件的默认传播机制:
    ->捕获阶段:从外向内依次查找元素
    ->目标阶段:当前事件源本身的操作
    ->冒泡阶段:从内到外依次触发相关的行为(我们最常用的就是冒泡阶段)

  利用事件传播机制可以实现事件委托。

四.事件的相关兼容处理:

  ele.addEventListener(type,fn,[bool]);  DOM 2级 绑定事件

  ele.removeEventListener(type,fn,[bool]);   DOM 2级 移除事件

  ele.attachEvent(‘on‘+type,fn);   DOM 2级 IE中绑定事件

  ele.detachEvent(‘on‘+type,fn); DOM 2级 IE中移除事件

  

  e=e||window.event;  获取事件对象

  e.target=e.target||e.srcElement;  获取事件源

  e.stopPropagation?e.stopPropagation():e.cancelBubble=true;  阻止事件传播

  e.preventDefault?e.preventDefault():e.returnValue=false;  阻止事件冒泡

  e.pageX=e.pageX||(document.documentElement.scrollLeft||document.body.scrollLeft)+e.clientX;

  e.pageY=e.pageY||(document.documentElement.scrollTop||document.body.scrollTop)+e.clientY;

  IE6~8中DOM 2级事件绑定存在的问题:

    1).this指向问题,默认的this指向window;

    2).重复问题,绑定事件的时候,能够重复给同一元素的同一行为,绑定同一事件处理程序;

    3).顺序混乱,给元素绑定事件处理程序后,执行的先后顺序与绑定的先后顺序不一致;

时间: 2024-10-01 00:22:56

javascript中的事件问题的总结的相关文章

javascript中的事件

在javascript中的事件有三个方面的知识,一是事件流,二是事件处理程序,三是事件对象.下面就我个人的一点理解,分别讲述一下这三个方面的内容. 第一.事件流 事件流指的是事件按照一定的顺序触发.它有两个顺序,分别是自上而下和自下而上. 自上而下的叫做事件捕获,事件捕获指的是事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递.在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useC

javaScript中的事件三

javaScript中的事件三 先看两种错误的写法,他们的目的都是:添加两个事件: 错误方式一: window.onload=function (){ alert('event 1'); } window.onload=function (){ alert('event 2') } 错误方式二: window.onload=function (){ var obj=document.getElementById("but"); obj.onclick=function(){ alert

javascript中奇怪事件

javascript中奇怪事件 为啥叫奇怪事件了,应该是我目前掌握的知识暂时不能解释这种现象滴呀(也许可以用事件流的概念来解释滴呀) 看布局: #hideInfo{ height:100px; width:100px; background:green; position:absolute; top:20px; left:-90px; } #hideInfo span{ height:100px; width:100px; background:blue; position:absolute;

了解javascript中的事件(一)

零.寒暄 由于刚入职,近期事情繁多,今天好不容易中期答辩完事,晚上有一些时间,来给大家分享一篇博文. 这段时间每天写js接触事件比较多,自己会使用,但是用的时候比较混乱,现在系统的整理下,好了,闲话不多说,谈正事! 一.事件概念 什么是事件?说白了,事件是文档或浏览器中发生的特定交互瞬间!比如鼠标点击,滑过等等. 二.事件流 事件流就是描述了页面中接受事件的顺序.在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐,出现了一个坑爹的情况,那就是他们对事件流的解释出现了两中截然相反的定义.

JavaScript 进阶教程一 JavaScript 中的事件流 - 事件冒泡和事件捕获

先看下面的示例代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JavaScript 中的事件冒泡与事件捕获</title> </head> <body> <div id="Red" style="width:200px;height:200px;background-color:red;padding:2

javascript中的事件与事件处理

在js中事件处理的过程分为三步: 1.发生事件 2.启动事件处理程序 3.事件处理程序做出反应 事件处理程序的调用 1.在javascript中 在javascript中调用事件处理程序,首先要获得要处理对象的引用,然后将要执行的处理函数赋值给对应的事件 2.在html中 在html中分配事件处理程序,只需要在html标记中添加相应的事件,并在其中指定要执行的代码或函数名即可 DOM事件模型: DOM结构是一个树形结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根节点直接的路径传播,

JavaScript中的事件对象

JavaScript中的事件对象 JavaScript中的事件对象是非常重要的,恐怕是我们在项目中使用的最多的了.在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含这所有与事件有关的信息.下面将会讲到DOM中的事件对象.IE中的事件对象以及跨浏览器的事件对象三个部分. 对于事件处理程序,大家可以看我的博文<JavaScript中的五种事件处理程序>. 第一部分:DOM事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中,无论是HMTL特性.DOM0级还是

javascript中定义事件的三种方式

在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使用addEvenListener()方法 三种方法的比较 (1)在第二.三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以. (2)首选第二.三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容. 一些语法细节 (1)在第一种方法中,onclick大小写

了解javascript中的事件(二)

零.寒暄 这篇博客本该出现在两个月以前,但是种种原因,搁浅了.两个月的时间,改变了许多人也改变了许多事,回头看看自己两个月前写的代码,居然有很多可笑之处,这也算是一种成长吧.实习的几个月里,全身心的投入工作,效率奇高,同时,离开学校的这段日子让我充分感受了这个社会的残酷.好酒需陈酿,来的早不如来的巧,今天跟大家分享下javascript中事件的下半部分. 如需查看本文的上一篇,请猛击了解javascript中的事件(一),注:后文如无特殊说明,提到的参考之前的博客,也是指这篇文章. 本文主要谈一

深入理解javascript中的事件循环event-loop

前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准? 为了利用多核CPU的计算能力,HTML