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表示是冒泡还
是捕获,true表示捕获,flase表冒泡,默认冒泡。
B.DOM2级绑定事件不会覆盖自身,和DOM0级也能共存;
3、解绑事件:
3.1、DOM0级事件是将onclick属性指向一个函数,所以只需要修改onclick属性指向null即可
3.2、DOM2级事件是为对象添加了监听某种事件的监听器,解绑的时候由removeEventListener
需要指定事件的类型,和事件处理程序的名字,因此这个方法无法解绑匿名事件处理函数的事
件。因为具体指定了事件和事件处理函数,所以同个事件类型的不同事件处理程序不相互影响
,从程序最后的输出可以验证
3.3、DOM0级和DOM2共存,但是执行顺序是按照绑定先后进行的,比如以下代码中先绑定DOM2
事件,再绑定DOM0事件结果先执行DOM2再执行DOM0
DOM0和D0M2级事件的更多相关文章
- DOM0、DOM2级事件
JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...
- javascript中DOM0,DOM2,DOM3级事件模型解析
DOM 即 文档对象模型. 文档对象模型是一种与编程语言及平台无关的API(Application programming Interface),借助于它,程序能够动态地访问和修改文档内容.结构或显示 ...
- dom0级事件和dom2级事件
dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...
- Dom0级事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 测试DOM0级事件和DOM2级事件的堆叠
1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...
- 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件
DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行 ...
- JavaScript事件基础-10-2.HTML事件; DOM0级事件; 掌握常用的鼠标与键盘事件 ; 掌握this的指向;
JavaScript事件基础 学习目标 1.掌握什么是事件 2.掌握HTML事件 3.掌握DOM0级事件 4.掌握常用的鼠标与键盘事件 5.掌握this的指向 什么是事件 事件就是文档或浏览器窗口中发 ...
- 关于DOM事件流、DOM0级事件与DOM2级事件
一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...
- DOM0级事件误区-addEventListener
百度上很多篇文章讲解addEventListener DOM0级事件的时候讲解的都是覆盖 概念如下: 同一个元素的同一种事件只能绑定一个函数,否则后面的函数会覆盖之前的函数 其实不然,官方讲解:添加的 ...
随机推荐
- vue 回车自动登录
原理: 在密码输入框加入事件:@keyup.enter.native 登录button加入事件:@click 代码: pug 语法: el-form(ref="loginForm" ...
- bzoj 4650(洛谷 1117) [Noi2016]优秀的拆分——枚举长度的关键点+后缀数组
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4650 https://www.luogu.org/problemnew/show/P1117 ...
- 【linux】Linux软连接和硬链接
1.Linux链接概念 Linux链接分两种,一种被称为硬链接(Hard Link),另一种被称为符号链接(Symbolic Link).默认情况下,ln命令产生硬链接. [硬连接] 硬连接指通过索引 ...
- linux中set的用法
功能说明:设置shell.语 法:set [+-abCdefhHklmnpPtuvx]补充说明:用set 命令可以设置各种shell选项或者列 出shell变量.单个选项设置常用的特性.在某些选项之后 ...
- ssl证书(https) iis 配置安装
因客户给的 cer的文件 导入提示 失败,所以用 了 客户给的 crt的格式的证书. 安装证书操作如下:iis>>服务器证书>>右侧菜单-完成证书申请>>选择 本文 ...
- wxWidgets:入门
0. 介绍 wxWidgets是一个开源的跨平台的C++构架库(framework),它可以提供GUI和其它工具.目前的3.0.0版本支持所有版本的Windows.带GTK+或Motif的Unix和M ...
- Redis高速内存缓冲平台可视化监控之RedisLive配置实战
一.引用 这两天在弄Reids高速缓存平台的图形化监控,由于对于Python并不是很熟悉,安装过程中遇到了不少问题,包括: 1.python必备安装包的安装问题 2.Redis Live界面显示问题 ...
- Mybatis学习(3)关于mybatis全局配置文件SqlMapConfig.xml
比如针对我这个项目的mybatis全局配置文件SqlMapConfig.xml做一些说明: <?xml version="1.0" encoding="UTF-8& ...
- java web 程序---javabean代码,出现错误。奇怪,无法解释的运行问题
深夜吧.这个点11点半了 写了一个简单的javabean实例,发现没有任何代码书写的错误,但是问题就是程序运行会有问题,然后换一个包,重写一个,问题没了? 请问问题出现在哪里了?巧合?还是操作有误?这 ...
- java学习——构造类
package my_project; public class my_first_class { public static void main(String[] args) { // TODO A ...