Dom0级事件和Dom2级事件

1.Dom0级事件:

注册obj.onclick=function () {}; (1.使用简单,2.跨浏览器);

删除obj.onclick=null;

2.Dom2级事件(比0级优点:多个处理函数不会被覆盖):

成员 -> addEventListener注册事件   removeEventListener移出事件;

三个参数 -> 1事件名(都不能带on),2处理函数,3布尔值涉及嵌套元素的事件触发顺序(true按捕获流的顺序调用,false按事件冒泡流的顺序调用);

(IE下用attachEvent和detachEvent但是没有第三个布尔事件流选择参数,并且事件名称要加“on”);

Dom2级事件的优点:

obj.addEventListener("click", Func1, false);

obj.addEventListener("click", Func2, false);

obj.addEventListener("click", Func3, false);

执行顺序Func1->Func2->Func3;

obj.onclick =  Func1

obj.onclick =  Func2

obj.onclick =  Func3

执行顺序Func3;

时间: 2024-10-14 09:58:03

Dom0级事件和Dom2级事件的相关文章

【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件

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

DOM0级事件处理、DOM2级事件处理

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 &l

JS:Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

1.HTML事件处理程序 某个元素支持的某种事件,可以通过一个与相应事件处理程序同名的HTML特性指定.这个特性的值应该是能够执行的JS代码.例如:按钮单击是要执行一些js代码,可以像下面: <input type="button" value="click me" onclick="showMessage()" /> 在js中就可以像下面一样处理: <script> function showMessage(){ ale

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

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

javaScirpt事件详解-原生事件基础(一)

# 事件 > JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间,通过监听特定事件的发生,你能响应相关的操作.**图片引用:UI Events** # 事件流 主要是当时的IE团队提出的事件流逝是事件冒泡流,而Netscape提出的是事件捕获流, 可以使用DOM2级定义的*addEventListener()*方法来处理在冒泡或者捕获阶段调用事件处理程序. ## 事件冒泡 即事件开始时由最具体的元素(文档中嵌套最深的节点)接收,然后逐级

事件委托与键盘事件

1.fn()与fn的区别? fn():执行里面的函数 fn:  将函数的内容赋给谁 2.事件委托的解析 onmouseenter,onmouseleave与onmouseover,onmouseout的区别? onmouseenter获取的事件源(target)是元素的本身,所以他没有事件冒泡的机制 onmouseover获取的事件源(target)是为他的子级,当改变事件源的时候也是改变子级(同时也让自己拥有了父级的事件)从而就会产生冒泡机制: 3.dom0级与dom2级的区别? 1.dom2

JavaScript的事件对象_键盘事件

用户在使用键盘时会触发键盘事件.“DOM2 级事件”最初规定了键盘事件,结果又删除了相应的内容.最终还是使用最初的键盘事件,不过 IE9 已经率先支持“DOM3”级键盘事件. 一.键码 在发生 keydown 和 keyup 事件时,event 对象的 keyCode 属性中会包含一个代码,与键盘上一个特定的键对应.对数字字母字符集,keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同.字母中大小写不影响. <script type="text/javascript&q

DOM事件对象、IE事件对象、旧浏览器事件对象的JavaScript区别

事件流: 事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). 事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. DOM2级事件处理程序: .addEventListener();      .removeEventListener(); 在IE浏览器中不起作用!IE事件处理程序: .attachEvent();     .detachEvent(); 跨浏览器常用事件处理程序: var eventUt

JS 事件(5)——事件类型——UI事件

UI事件 UI(User Interface,用户界面)事件,指的是那些不一定与用户操作有关的事件. UI事件包括load.unload.abort.error.select.resize.scroll. 这些事件在DOM2级事件中都归为HTML事件:要确定浏览器是否支持DOM2级事件中规定的HTML事件,可以使用如下代码: 1 var isSupported = document.implementation.hasFeature("HTMLEvents", "2.0&qu