【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()方法和removeEventListener()方法来处理指定和删除事件处理程序,这里添加的事件处理程序也是在其依附的元素的作用域中运行。DOM2级方法的好处是可以添加多个事件处理程序。需要注意的是通过addEventListener()添加的事件只能使用removeEventListener()来移除,而且移除时传入的参数与添加时使用的参数要相同。

var btn = document.getElementById(‘myBtn‘);
var handler = function(){
    alert(this.id);
}

btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false);

原文地址:https://www.cnblogs.com/huangrui-dori/p/10436333.html

时间: 2024-11-05 17:24:38

【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件的相关文章

DOM0级与DOM2级的区别

1.DOM0级和DOM2级的共同优点: 能添加多个事件处理程序,按顺序执行,HTML事件处理程序无法做到~ 2.关于dom0级和dom2级的区别 DOM0级事件处理:同时绑定几个不同的事件,例如在绑定onclick的基础上再绑定一个onmouseover为按钮2设置背景颜色(这里注意不能onclick.onmouseover事件都设为alert弹出哦,可能有冲突,dom0和dom2都不能成功):但是不能同时绑定多个相同的事件,比如onclick:会覆盖,只会执行最后一个的函数: DOM2级事件处

【事件】封装touch触摸事件 --- DOM2级、单点触控

//封装touch触摸事件 --- DOM2级.单点触控 if (!Object.prototype.addTouchEvents) { Object.defineProperty(Object.prototype, 'addTouchEvents', { value: function(Obj) { var noop = function() {}; var defaults = { start: noop, //开始 move: noop, //移动 end: noop, //结束 left

设计模式之观察者模式 DOM0级和DOM2级封装

DEM0级: var Observer = (function() { /* 声明一个空对象,存储事件和触发事件 */ var obj = {}; return { // 添加事件---事件名,事件处理程序 add: function(name, fn) { // 将事件写入对象 obj[name] = fn; }, // 触发事件---事件名,参数 trigger: function(name, args = []) { obj[name].apply(obj, args); } }; })(

Javascript知识点记录(三)设计模式

Javascript设计模式记录,这个方面确实是没写过,工作中也没有用到js设计模式的地方. 单例模式 保证一个类仅有一个实例,并提供一个访问它的全局访问点.例如:线程池,全局缓存,登录浮窗. 首先我们需要把单例的逻辑代码单独提取,然后使用惰性单例的方式,也就是返回方法.只有在点击的时候,才会进行执行. javascript的单例,跟类不一样.无需创建多余的构造函数这些,直接创建全局变量即可. !(function () { //管理单例的逻辑代码,如果没有数据则创建,有数据则返回 var ge

一步步学习javascript基础篇(8):细说事件

终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能阅读了.有了事件,我们可以通过键盘或是鼠标和页面交互了,通过我们不同的操作页面给出不同的响应.好了,开始我们今天的分析吧. DOM0级事件处理方式 什么是DOM0级? 其实世上本来没有DOM0级,叫的人多了就有了DOM0级. 在1998 年 10 月 DOM1级规范成为 W3C 的推荐标准,在此之前

《JAVASCRIPT高级程序设计》事件处理程序和事件类型

一.事件流 谈到事件,首要要理解事件流的概念:事件流是指从页面接受事件的顺序:“DOM2级事件”规定事件流包括三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段.目前大部分的浏览器的事件流是事件冒泡,即最开始由具体的元素接收事件,然后逐级传播到不具体的节点,直到传播到windows对象:另一种事件流是事件捕获,目前使用得比较少,是指文档对象先接收到事件,然后逐级向下,一直传播到事件的实际目标. 二.事件处理程序 1.两种表示方式 <input type="button" valu

js学习笔记:事件——事件流、事件处理程序、事件对象

Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 事件流 事件流描述的是从页面中接受事件的顺序. 事件冒泡 IE的事件流叫做事件冒泡,即事件开始是由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档). 如果点击了页面中的一个div元素,那么这个click事件可能会按照如下顺序传播: < div> < body> < html> docume

jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // 获取匹配元素集合中的第一个元素的宽度值,内容宽度,不含padding .height() // 获取匹配元素集合中的第一个元素的高度值,内容高度,不含padding 注意:这个方法不接受任何参数..css(‘width’)(或.css(‘height’))和 .width()(或.height()

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

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