有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

removeeventlistener(DOM的0级与2级事件)

javascript 炮渣日记 1周前 (11-23) 16次浏览 已收录 0个评论 扫描二维码
removeeventlistener(DOM的0级与2级事件)

html代码与样式

DOM共有4个级别:DOM0级、DOM1级、DOM2级和DOM3级。DOM事件共有3个级别:DOM0级事件处理,DOM2级事件处理和DOM3级事件处理,暂时了解即可

  • DOM的0级事件

1.DOM0级事件的绑定方式:

1.1直接写在元素标签内 <div id=”dv0″ onclick=”alert(‘标签内绑定事件’)”></div>

1.2通过获取元素绑定事件

document.getElementById(“dv0”).onclick = function () {

alert(“通过先获取此元素再绑定相应事件函数”);

}

2.DOM0级事件的特点

DOM0级事件就是将一个函数赋值给一个事件处理属性,因此DOM0级事件具有以下特点

2.1 相同dom元素的相同事件只能注册一个,注册多个相同事件时会被后面的事件覆盖掉,只执行最后一个相同的事件函数

removeeventlistener(DOM的0级与2级事件)

0级单击事件

0级事件本质原因是:0级事件就是为dom元素对象上的一个属性进行赋值,当赋值多次时以最后值为准,比如设置其背景色

removeeventlistener(DOM的0级与2级事件)

两次设置其背景色,第一次设置的被覆盖掉;0级事件时多次注册相同事件其原理与此类同

2.使用的是事件冒泡机制 注册的事件函数执行顺序是由内而外地执行

removeeventlistener(DOM的0级与2级事件)

事件冒泡:按钮在div中

  • DOM的2级事件

1.Dom2级事件绑定方式:对象.addEventListener(事件名称,事件处理函数,事件机制)

事件名称:名称为字符串类型,比如单击事件的click,名称没有on()

事件处理函数:就是function函数,函数中就是要执行的js代码

事件机制:布尔类型,其值 为true时是捕获机制 为false时是冒泡机制(默认机制)

removeeventlistener(DOM的0级与2级事件)

div注册单击事件

2.Dom2级事件的特点

2.1为相同对象注册多个相同事件,不会被覆盖

removeeventlistener(DOM的0级与2级事件)

注册同一个事件,了解即可

2.2可以设置触发机制即事件的冒泡/捕获机制(默认冒泡,不写最后一个参数或值为false)

removeeventlistener(DOM的0级与2级事件)

设置事件机制

事件机制为true时,单击按钮时先执行div的事件,再执行按钮的事件

2.3可以移除某个事件(前提是注册事件时事件函数不能为匿名函数)

移除方式: 对象.removeEventListener(事件名称,事件函数名称,事件机制)

removeeventlistener(DOM的0级与2级事件)

移除事件

3.在IE浏览器中IE8.0及以下不支持addEventListener这个绑定事件方法,需要使用对象.attachEvent()的方式绑定添加事件;移除事件使用对象.detachEvent()

removeeventlistener(DOM的0级与2级事件)

注意:事件名称需要加on IE8及以下浏览器绑定方式没有第三个参数不能设置捕获阶段

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址