JavaScript全解析——DOM事件(上)
myzbx 2025-01-10 15:41 41 浏览
DOM 事件
●是指用户在某事务上由于某种行为所执行的操作; （对页面元素的某种操作）
●一个事件由哪几部分组成
○触发谁的事件：事件源
○触发什么事件：事件类型
○触发以后做什么：事件处理函数（事件处理程序）
var oDiv = document.querySelector('div')
oDiv.onclick = function () {}
// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv
// 触发什么事件 => onclick => 这个事件类型就是 click
// 触发之后做什么 => function () {} => 这个事件的处理函数●我们想要在点击 div 以后做什么事情，就把我们要做的事情写在事件处理函数里面
var oDiv = document.querySelector('div')
oDiv.onclick = function () {
console.log('你点击了 div')
}●当我们点击 div 的时候，就会执行事件处理函数内部的代码
●每点击一次，就会执行一次事件处理函数
事件绑定和事件解绑
事件绑定
●事件绑定有DOM 0级和DOM 2级
●没有DOM 1级
○DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型
DOM 0级事件绑定
●我们现在给一个注册事件都是使用 onxxx 的方式
●但是这个方式不是很好，只能给一个事件源的同一个事件类型, 只能绑定一个事件处理函数
●一旦写了第二个事件，那么第一个就被覆盖了
●语法：事件源.onclick = 事件处理程序（事件处理函数）
oDiv.onclick = function () {
console.log('我是第一个事件')
}
oDiv.onclick = function () {
console.log('我是第二个事件')
}●当你点击的时候，只会执行第二个，第一个就没有了
DOM 2级事件绑定 事件监听
标准浏览器
●使用 addEventListener 的方式添加。addEventListener : 非 IE 7 8 下使用
●语法： 元素.addEventListener('事件类型'， 事件处理函数， 冒泡还是捕获)
●可以给同一个事件源的同一个事件类型绑定多个事件处理函数
oDiv.addEventListener('click', function () {
console.log('我是第一个事件')
}, false)
oDiv.addEventListener('click', function () {
console.log('我是第二个事件')
}, false)●当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序执行
●先打印 我是第一个事件 再打印 我是第二个事件
●注意： 事件类型的时候不要写 on，点击事件就是 click，不是 onclick
IE低版本浏览器
●attachEvent ：IE 7 8 下使用
●语法： 元素.attachEvent('事件类型'， 事件处理函数)
●可以给同一个事件源的同一个事件类型绑定多个事件处理函数
oDiv.attachEvent('onclick', function () {
console.log('我是第一个事件')
})
oDiv.attachEvent('onclick', function () {
console.log('我是第二个事件')
})●当你点击 div 的时候，两个函数都会执行，并且会按照你注册的顺序倒叙执行
●先打印 我是第二个事件 再打印 我是第一个事件
●注意： 事件类型的时候要写 on，点击事件就行 onclick
两个方式的区别
●注册事件的时候事件类型参数的书写
○addEventListener ： 不用写 on
○attachEvent ： 要写 on
●参数个数
○addEventListener ： 一般是三个常用参数
○attachEvent ： 两个参数
●执行顺序
○addEventListener ： 顺序注册，顺序执行
○attachEvent ： 顺序注册，倒叙执行
●适用浏览器
○addEventListener ： 非 IE 7 8 的浏览器
○attachEvent ： IE 7 8 浏览器
事件解绑
DOM 0级事件解绑
●语法：事件源.on事件类型 = null
●因为赋值符号, 当你给这个事件类型赋值为 null 的时候，会把本身的事件处理函数覆盖
●当你再次触发行为的时候, 没有事件处理函数执行，相当于解绑了事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>事件解绑</button>
<div></div>
<script>
// 0. 获取元素
var div = document.getElementsByTagName('div')[0]
var btn = document.getElementsByTagName('button')[0]
// 1. DOM 0级 绑定事件
div.onclick = function() {
console.log('你好 世界')
}
btn.onclick = function() {
console.log('在这里操作解绑 div 的事件')
// 1. DOM 0级 事件解绑
div.onclick = null
console.log('解绑事件的代码执行完毕了')
}
</script>
</body>
</html>DOM 2级事件解绑
标准浏览器
●语法：事件源.removeEventListener('事件类型', 事件处理函数)
●注意：
○当你使用 DOM 2级 事件解绑的时候, 因为函数是一个复杂数据类型, 所以你在绑定的时候
○需要把函数单独书写出来, 以函数名的形式进行绑定和解绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>事件解绑</button>
<div></div>
<script>
// 0. 获取元素
var div = document.getElementsByTagName('div')[0]
var btn = document.getElementsByTagName('button')[0]
// DOM 2级 事件 标准浏览器
function a() {
console.log('我是事件处理函数')
}
div.addEventListener('click', a)
btn.onclick = function() {
console.log('在这里操作解绑 div 的事件')
// 2. DOM 2级 事件解绑 - 标准浏览器
//事件源.removeEventListener('事件类型', 事件处理函数)
div.removeEventListener('click', a)
console.log('解绑事件的代码执行完毕了')
}
</script>
</body>
</html>IE低版本浏览器
●语法：事件源.detachEvent('on事件类型', 事件处理函数)
●注意：
○当你使用 DOM 2级 事件解绑的时候, 因为函数是一个复杂数据类型, 所以你在绑定的时候
○需要把函数单独书写出来, 以函数名的形式进行绑定和解绑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>事件解绑</button>
<div></div>
<script>
// 0. 获取元素
var div = document.getElementsByTagName('div')[0]
var btn = document.getElementsByTagName('button')[0]
// DOM 2级 事件 IE 低版本
function b() {
console.log('IE 的事件处理函数')
}
div.attachEvent('onclick', b)
btn.onclick = function() {
console.log('在这里操作解绑 div 的事件')
//DOM 2级 事件解绑 - IE 低版本
div.detachEvent('onclick', b)
console.log('解绑事件的代码执行完毕了')
}
</script>
</body>
</html>相关推荐
- 以文本的方式绘制简单的SVG流程图——flowchart.js
-
介绍flowchart.js是在浏览器和终端中运行的流程图DSL和SVG渲染。节点和连接是分别定义的，因此可以重复使用节点，并可以快速更改连接。也可以在DSL中对节点和连接器样式进行细微的更改。Git...
- 全国首套构网型SVG在木垒投运
-
中新网新疆新闻1月5日电（翟文辉）12月29日，全国首套构网型SVG在新疆木垒华电220千伏四十个井子汇集站并网，本项目是新疆电网继阿克陶构网型储能后又一次构网型支撑项目示范。为全面响应国家“双碳”...
- Popmotion – 小巧，灵活的 JS 运动引擎
-
Popmotion是一个只有12KB的JavaScript运动引擎，可以用来实现动画，物理效果和输入跟踪。原生的DOM支持：CSS，SVG，SVG路径和DOM属性的支持，开箱即用。Popmoti...
- 零基础教你学前端——43、初识SVG
-
解决网站图标问题的最佳方案——SVG！SVG是一种基于XML语法的图像格式，英文全称是：ScalableVectorGraphics，即可缩放矢量图，是W3C的一项建议。我们用手机拍摄...
- 2.3 文件格式全解:PSD/JPG/PNG/SVG/GIF
-
2.3文件格式全解：PSD/JPG/PNG/SVG/GIF一、文件格式的核心意义文件格式是数字图像的存储规则，决定了：-信息保留程度（图层/透明度/动画）-压缩方式与画质损失-跨平台兼容性-...
- vite v6.3.2 发布!HMR 优化+CSS 增强+稳定性提升，前端开发再提速!
-
前言：Vite6.3.2来了！2025年4月18日，Vite团队正式发布了v6.3.2版本！虽然是一个小版本更新，但修复了多个关键问题，并带来了性能优化和稳定性提升，让开发体验更丝滑！如果你还...
- 一篇文章带你了解SVG 蒙版(Mask)
-
SVG蒙版功能可将蒙版应用于SVG形状。蒙版可确定SVG形状的哪些部分可见，以及具有什么透明度。运行效果可以将SVG蒙版视为剪切路径的更高级版本。一、简单的蒙版代码解析：本示例使用ID=mask1定义...
- SVG实现的流程图绘制
-
一、项目简介使用SVG技术实现的流程图绘制二、实现功能流程图块生成、连线、拖拽产生相应的xml和xpdl导入导出json数据放大缩小功能保存操作（选择、自动插入、开始结束、普通活动、子活动、块活动、路...
- 解锁国内 404 页面:Next.js 设置指南和 33 个有趣 SVG 资源分享
-
前言当我们访问网站时，如果访问到不存在的路径时，会出现404错误。为了避免给访问者带来不良体验，设计网站时通常会在页面上展示“404页面不存在”的提示，并引导用户进行返回首页等操作。因此在建立网...
- 交互设计师做好动画后，提交给开发的文档有哪些?
-
谢邀！简单的说一下自己的看法。首先从制作动画开始。目前制作动画的方式主要有：Gif动画视频动画Web动画，而Web动画又包括：CSS动画、JS动画（Canvas动画、原生JS动画API）、SVG动画等...
- Motion for Vue:为Vue量身定制的强大动画库
-
在前端开发中，动画效果是提升用户体验的重要手段。Vue生态系统中虽然有许多动画库，但真正能做到高性能、易用且功能丰富的并不多。今天，我们要介绍的是MotionforVue（motion-v），...
- Web开发人员的福音!8个实用的SVG工具
-
SVG可缩放矢量图形（ScalableVectorGraphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C在2000年8月制定的一种新的二维矢量图形格式...
- 一键画波浪线、一键多图片调色?这3个网站好玩到停不下来
-
作为一个经常收集网站的PPT设计师，无意中发现了一些超级有趣的网站。只要你动手能力足够强，就一定会利用它做出创意作品。不说废话，直接进入主题。1、炫酷的光线绘画网站http://weavesilk.c...
- vite 6.2.5 更新速递:告别SVG路径Bug，构建效率再提升!
-
Vite6.2.5更新公告2025年4月3日，Vite团队正式发布了Vite6.2.5版本！此次更新虽然是一个小版本迭代，但修复了一个关键问题，涉及SVG文件路径检查，对前端开发者尤...
- DrawSVG – SVG 路径动画 jQuery 插件
-
jQueryDrawSVG使用了jQuery内置的动画引擎实现SVG路径动画，用到了stroke-dasharray和stroke-dashoffset属性。DrawSVG是完全...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 基础教程 (29)
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 中级教程 (30)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)