dom0级事件绑定冒泡阶段

2024-10-02

JS Event事件流（冒泡机制、捕获机制、事件绑定）

1.事件流事件流:从页面中接收事件的顺序.也就是说当一个事件产生时,这个事件的传播过程,就是事件流. IE的事件流 IE中的事件流叫事件冒泡:事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档).对于html来说,就是当一个元素产生了一个事件,它会把这个事件传递给它的父元素,父元素接收到了之后,还要继续传递给它的上一级元素,就这样一直传播到document对象(亲测现在的浏览器到window对象,只有IE8及下不这样): 再多说一句,现在的浏览器默认是采用的是事件

DOM0级事件绑定之js的onclick事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <body> <form action=""> <input type="text" name="username"> <

关于DOM事件流、DOM0级事件与DOM2级事件

一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流流的概念,在现今的 JavaScript 中随处可见.比如说 React 中的单向数据流,Node 中的流,还有 DOM 事件流,都是流的一种生动体现.至于流的具体概念,用术语说流是对输入输出设备的抽象.以程序的角度说,流是具有方向的数据. 三.事件流浏览器在为当前页面与用户做交互的过程中,比如点击鼠标左键,会出现这个左键是怎么传到页面上,还有怎么响应

事件流程以及dom2级事件绑定

事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直到顶层元素(注:高级浏览器的顶层元素是window,ie8以下的浏览器顶层元素是document) DOM2级事件绑定方式高级浏览器绑定方式: 元素.addEventListener(type, handler, boolean); //绑定 type 事件类型字符串

Dom0级事件

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type ="text/css"&

探讨Js的事件的冒泡阶段

近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢? 从概念上来说,事件的捕获就是从最外层也就是从html标签开始向内一层层的寻找目标元素,直到捕获到目标为止.而事件的冒泡就是从目标开始,向上一层层的冒泡,直到最上一级为止. 单从概论上来说,可能不是那么的清楚,所以我们直接上代码. <div id="div1"> <di

dom0级事件和dom2级事件

dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button type="button">返回上面进行开通</button> </a> var btn=$('#hash').get(0); btn.onclick=function(){ alert('111'); }; btn.onclick=function(){ a

JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;

JavaScript事件基础学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向什么是事件事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. HTML事件语法:<tag 事件=“执行脚本”></tag> 功能:在HTML元素上绑定事件. 说明:执行脚本可以是一个函数的调用. DOM0级事件语法: ele.事件=执行脚本功能:在DOM0对象上绑定事件说明:执行脚本可以是一个匿名函数,也可以是一

DOM0级事件误区－addEventListener

百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖概念如下: 同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数其实不然,官方讲解:添加的事件不会覆盖已存在的事件. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </hea

测试DOM0级事件和DOM2级事件的堆叠

1. 问题如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { //符合W3C的事件模型 if (obj.addEventListener) { obj.addEventListener(evtype,fn,false); return obj; } //IE或Opera浏览器 if (!obj.functions) obj.functions={}; if

【20190226】JavaScript-知识点记录：dom0级事件，dom2级事件

DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行(也就是this引用当前元素): var btn = document.getElementById('myBtn'); btn.onclick = function(){ alert(this.id); }; DOM2级事件处理程序: 通过addEventListener()方法和removeEv

DOM0级事件处理和DOM2级事件处理

转自:http://www.cnblogs.com/holyson/p/3914406.html 0级DOM 分为2个:一是在标签内写onclick事件二是在JS写onlicke=function(){}函数 1) <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" > 2) document.getEle

js DOM0级事件和DOM2级事件

注册事件有两种方式,分别是DOM0级和DOM2级 DOM0级就是通过事件绑定的形式dom元素只能有(绑定)一个事件处理函数,他的特点是同一个元素绑定相同事件, 后面函数会覆盖前面的绑定: dom.on+type = 事件处理函数 dom.onclick = function(){} 函数里面是要执行的功能 btn.onclick = function() { alert('hehe'); } btn.onclick = function() { alert('hihi'); } // 绑定事件

js事件处理程序详解，html事件处理程序，dom0级事件处理程序，dom2级事件处理程序

博客搬迁,给你带来的不便,敬请谅解! http://www.suanliutudousi.com/2017/11/24/js%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e7%a8%8b%e5%ba%8f%e8%af%a6%e8%a7%a3%ef%bc%8chtml%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e7%a8%8b%e5%ba%8f%ef%bc%8cdom0%e7%ba%a7%e4%ba%8b%e4%bb%b6%e5%a4%84

javaScript事件机制深入学习(事件冒泡，事件捕获，事件绑定方式，移除事件方式，阻止浏览器默认行为，事件委托，模拟浏览器事件，自定义事件)

前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软件工程中被称为观察员模式的模型,支持页面的行为(JavaScript代码)与页面的外观(HTML和CSS代码)之间的松散耦合. 事件处理程序事件就是用户或浏览器自身执行的某种动作.诸如 click.load 和 mouseover,都是事件的名字. 而响应某个事件的函数就叫做事件处理程序(或事件侦

javascript中DOM0,DOM2,DOM3级事件模型解析

DOM 即文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示样式. DOM3级,顾名思义,有三种DOM. W3C协会早在1988年就开始了DOM标准的制定,W3C DOM标准可以分为DOM1,DOM2,DOM3三个版本. DOM1级主要定义的是HTML和XML文档的底层结构. DOM1 主要定义的是HTML和XML文档的底层结构.其实世上本来没有DOM0级,

关于DOM2级事件的事件捕获和事件冒泡

DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是从window元素开始,有的浏览器是从document开始,至于其中的差别我稍后会更新)开始,逐次进入dom内部,最后到达目标元素,依次执行绑定在其上的事件②.处于目标阶段,检测机制到达目标元素,按事件注册顺序执行绑定在目标元素上的事件.③.事件冒泡阶段,从目标元素出发,向外层元素冒泡,最后到达顶层

DOM0和D0M2级事件

1.DOM0级事件:on+事件类型 1.1.在html行内直接绑定, 1.2.在js中绑定 A.DOM0级事件和DOM0级事件相互之间会覆盖,比如以下代码执行后弹出jsDOM0级,js中绑定的事件覆盖了行内绑定的事件: 2.DOM2级事件: addEventListener(events,handler,boolean), removeEventListener(events,handler) 2.1.参数events是以空格间隔的事件类型,handler是事件处理程序,boolean表示是冒

DOM0、DOM2级事件

JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1')">第一项</span> 在js中绑定例如://<span onclick="alert('2')">第一项</span> var Ospan=document.getElementsByTagName('span')[0];Ospan

DOM0级与DOM2级

定义: 0级DOM 分为2个:一是在标签内写onclick事件二是在JS写onlicke=function(){}函数 1) <input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" > 2) document.getElementById("myButton").onclick = func

dom0级事件绑定冒泡阶段

热门专题