`
myfreespace
  • 浏览: 229016 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js中的事件类型 冒泡和捕获

阅读更多

js和html页面之间的交互是通过用户和浏览器之间的操作页面时引发的事件来处理的。

事件流:当你在页面触发一个点击事件后,页面上不仅仅有一个元素响应该事件而是多个元素响应同一个事件,因为元素是在容器中的。事件发生的顺序就是事件流,不同的浏览器对事件流的处理不同。ie和mozilla都是冒泡性事件处理机制,事件从最特定的目标到不特定的目标,而捕获事件处理正好相反。

DOM事件流:dom同时支持两种事件模型,但捕获性事件先开始,从document开始也结束于document,dom模型的独特之处在于文本也可以触发事件。

事件处理函数 监听函数:

用于响应某个事件而调用的函数成为事件处理函数,像click load mouseover 或者dom中称为事件监听函数。

1,在js中分配事件处理函数

 

var oDiv = document.getElementById("divone");
oDiv.onclick =  function() {
   alert('who are you?');
}//用这个方法处理函数名必须小写。onclick

 2,在html页面中分配只要在标签中添加

 

<div onclick="alert('I come from beijing')"></div>//这种写法大小写任意 onClick OnClick都可以

 在IE中,每个元素和window对象都有两个方法,attachEvent() detachEvent() 添加和移除事件。

 

var fnClick = function() {
   alert('add or delete");
}

var oDiv = document.getElementById('div');
oDiv.attachEvent.("onclick",fnClick);
//可以对一个事件添加多个处理函数
oDiv.detachEvent("onclick",fnClick);

 Dom的方法是 addEventListener() 和removeEventListener() 该函数需要三个参数 第三个参数是处理函数的阶段,true是冒泡阶段,false是捕获阶段。

 

 

0
7
分享到:
评论

相关推荐

    javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...

    JS中绑定事件顺序(事件冒泡与事件捕获区别)

    JavaScript中的事件处理机制是网页交互的核心,其中包括了两种主要的事件传播模式:事件冒泡(Bubbling)和事件捕获(Cropping)。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到最外层的节点。而事件捕获则...

    JS冒泡事件与事件捕获实例详解

    冒泡事件和事件捕获是JavaScript中处理事件传播的两种主要模型,它们定义了事件在DOM树中传播的顺序。在实际的Web开发中,深入理解这两种模型对于正确处理事件,避免潜在的问题至关重要。 冒泡事件是指当一个事件在...

    事件冒泡及捕获

    事件冒泡和事件捕获是两种不同的事件处理机制,它们决定了事件如何在DOM(Document Object Model)层次结构中传播。了解这两者对于优化事件处理性能和编写高效代码至关重要。 事件冒泡是从最具体的节点(通常是DOM...

    JS中事件冒泡和事件捕获介绍

    谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免。 事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。 事件冒泡阶段:...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    尽管在实际应用中事件捕获使用较少,但它有助于在事件到达目标元素之前进行预处理。 下面的代码展示了事件捕获的例子: ```javascript window.onload = function() { let box = document.getElementById("box...

    一篇文章让你彻底弄懂JS的事件冒泡和事件捕获

    事件触发时序问题中的两个重要概念是事件冒泡(event bubbling)和事件捕获(event capturing)。这两个术语描述了事件流(event flow)在DOM树中的传播顺序。 事件冒泡是指当一个元素上的事件被触发后,该事件会...

    2022年生动详细解释javascript的冒泡和捕获.docx

    JavaScript中的事件冒泡和事件捕获是事件处理的重要概念,它们在DOM(文档对象模型)中定义了事件触发的顺序。事件冒泡和捕获是两种不同的事件传播机制,它们在不同浏览器的历史发展中曾导致兼容性问题,但现在已经...

    简析JavaScript事件、以及捕获和冒泡

    本文将深入探讨JavaScript事件机制,特别是事件的捕获和冒泡阶段。 首先,理解JavaScript事件的基础概念至关重要。事件是用户或浏览器在与网页交互时发生的动作,比如点击按钮、页面加载或滚动等。当这些事件发生时...

    js之事件冒泡,事件捕获,事件委托

    事件冒泡、事件捕获和事件委托是JavaScript事件模型中的三个重要概念。 首先,事件捕获是一种事件处理机制,它从DOM树的根节点(window对象)开始,向下遍历到目标元素。这种机制使得事件首先在最不具体的节点(即...

    JS html事件冒泡和事件捕获操作示例

    本文实例讲述了JS html事件冒泡和事件捕获操作。分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下。 1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发...

    【JavaScript源代码】基于事件冒泡、事件捕获和事件委托详解.docx

    在JavaScript中,事件处理是网页交互的核心部分,而事件冒泡、事件捕获和事件委托则是JavaScript事件模型中的三个重要概念。理解这三个概念对于优化网页性能和编写高效代码至关重要。 事件冒泡是指事件从最深的节点...

    javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    本文主要探讨了JavaScript中事件绑定的几种方式,以及事件冒泡和事件捕获机制。 1. **事件绑定方式**: - **方式1:内联事件绑定**。这是最基础的绑定方式,直接在HTML元素的`onclick`、`onblur`等属性中写入...

    js之事件冒泡和事件捕获详细介绍

    (1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。  IE 5.5: div -&gt; body -&gt; document  IE 6.0: div -&gt; body -&gt; html -&gt; document  Mozilla 1.0: div -&gt; body -&gt; ...

    js事件监听机制(事件捕获)总结

    无论是事件捕获还是冒泡阶段,事件对象都提供了大量的信息,如事件类型、触发事件的目标元素以及事件触发时的坐标等。合理地利用这些信息,可以开发出更加动态和交互式的Web应用。 最后,了解并正确使用事件监听...

    【JavaScript源代码】JavaScript中事件冒泡机制示例详析.docx

    JavaScript中的事件冒泡机制是DOM事件处理的核心概念之一,它涉及到事件在DOM树中的传播方式。事件流主要有三种阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始,沿着树向下...

Global site tag (gtag.js) - Google Analytics