DOM事件探秘

#事件流

事件捕获:由document向事件触发的元素捕获

事件冒泡:由触发事件的元素向上级触发

#事件处理程序

HTML事件处理程序

<input type="button" value="按钮" onclick="alert(‘hello world‘)"></input>

或者

<script type="text/javascript">
    function showMes(){
        alert(‘hello world‘);
    }
</script>
<body>
    <input type="button" value="按钮" onclick="showMes()"></input>
</body>

DOM0级事件处理程序

<script type="text/javascript">
    document.getElementById(‘btn‘).onclick=function(){
        alert(‘hello world‘);
    }

</script>
<body>
    <input type="button" value="按钮" id="btn"></input>
</body>

#DOM2级事件处理程序

定义了两个方法:

addEventListener()添加事件

removeEventListener()移除事件

三个参数设置;事件名称,处理方法(函数),布尔值-----冒泡(false)或捕获(true)

btn3.addEventListener(‘click‘,showMes,false);

注意:

1、若事件名称有on,则需去掉on。onclick -----> click,onmouseover -----> mouseover等等;

2、false 兼容所有浏览器-----事件冒泡流

3.通过addEventListener添加的事件只能通过removeEventListener来删除。---参数要一样

btn.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致,删除事件

4:dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。

btn3.addEventListener(‘click‘,showMes,false);

btn3.addEventListener(‘click‘,showMes,function(){alert(this.value);},false);

特别的:
1.DOM 2级事件处理程序无法删除匿名函数,只有将匿名函数命名化或赋值化才可以删除
2.IE不支持该事件

<input type="button" value="按钮" id="btn"></input>
    <script type="text/javascript">
    function Mes() {
        alert(‘hello world‘);
    }
    var btn = document.getElementById(‘btn‘);
    btn.addEventListener(‘click‘, Mes, false);
    btn.addEventListener(‘mouseover‘,function(){
        alert(this.type);
    },false);
    </script>

#什么是事件对象?在触发DOM上的事件时都会产生一个对象
事件对象EVENT
①DOM中的事件对象 属性
(1)、type属性用于获取事件类型
(2)、target属性用于获取事件目标
(3)、stopPropagation()方法 用于阻止事件冒泡
(4)、preventDefault() 方法 阻止事件的默认行为
如果一个div里面有一个button,button和div都绑定了click事件,如果是事件冒泡,那么点击button的时候,首先触发button的处理函数,然后触发div的处理函数。(由内而外)
如果有时候不想冒泡,也就是不希望div的事件被触发,那么需要阻止事件冒泡。stopPropagation()方法
如果需要阻止a标签的默认属性跳转,可以使用阻止事件的默认行为preventDefault()方法

时间: 2024-10-01 06:20:15

DOM事件探秘的相关文章

DOM事件探秘之事件流与事件处理程序

1.事件流:描述的是从页面中接受事件的顺序 ①.事件冒泡流:即时间最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档).      栗子:若<body><div><input type="button"/></div></body>次结构,点击按钮时,默认点了按钮的容器 默认点了body,默认点了html,默认点了document. ②.事件捕获:不太具体的节点应该更早接收到事

二、JavaScript语言--事件处理--DOM事件探秘

第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netscape:事件捕获流 事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). 事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 第二章 事件处理程序 1.HTML事件处理程序 HTML事件的缺点:HTML和JS代

QQ面板拖拽(慕课网DOM事件探秘)(下)

2.鼠标事件坐标获取 function fnDown(event) { var event = event || window.event; var oDrag = document.getElementById("loginPanel"); //光标按下时光标和面板之间的距离: var disX = event.clientX - oDrag.offsetLeft; var disY = event.clientY - oDrag.offsetTop; //移动 document.o

DOM事件

在慕课网上学习了DOM事件探秘课程,特此整理了一下笔记. 慕课网DOM事件探秘课程地址:http://www.imooc.com/learn/138 事件 是文档或浏览器窗口中发生的特定的交互瞬间.[JavaScript <------>HTML] 事件流 描述的是从页面中接受事件的顺序 (IE:事件冒泡流 / Netscape事件捕获流) 事件的三个阶段 事件的三个阶段分别是:捕获阶段.目标阶段.冒泡阶段 事件冒泡流:即事件最开始由最具体的无素(文档中嵌套层次最深的那个节点)接收,然后逐级向

慕课网课程学习--JS事件探秘

事件流 事件冒泡(IE):事件最先被最具体的元素(文档中嵌套层次最深的节点)接受,然后逐级向上传播至最不具体的节点(.. -> body ->html -> document): 事件捕获(网景):不具体的节点更早接收到事件,最具体的节点最后接收到事件,和事件冒泡相反. 事件处理程序 1.HTML事件处理程序 原理:把事件直接在HTML结构中的HTML元素上. 方法一. <input type="button" value="click" o

从click事件理解DOM事件流

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

DOM事件模型学习笔记

下面的内容属于阅读笔记,其中涉及大量内容来自于PPK的博客的内容,如果你要跟随我的脚步领略大家风采,那么就从Introduction to Events开始阅读吧. 现代的前端开发应该是会严格遵守 html 展示文档内容构成,css 渲染页面效果,javascript 提供交互 浏览器提供交互行为可以追溯到Netscape公司在其第二个版本中支持javascript语言,随后其与微软之间的浏览器大战,以及w3c标准制定的落后,导致至今一直被诟病的浏览器兼容问题,而这些不兼容中关于DOM事件模型的

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

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

DOM 事件深入浅出(一)

在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文就将带大家深入浅出地了解DOM事件的那些属性和方法. 首先在介绍DOM事件之前我们先来认识下DOM的不同级别.针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级别与DOM事件 DOM级别一共可以分为4个级别:DOM0级,DOM1级,DOM2级和 DOM3级,而DOM事件分为3个级