JS中dom操作的事件
Click--点击事件
优先级：dom.onclick 高于标签上的onClick属性
监听事件 --不会覆盖前面的事件效果
dom.addEventListener() 括号里面有三个参数
1.事件类型 2.回调函数，执行事件后触发的操作 3.决定事件是冒泡还是捕获 默认值是false（冒泡） true（捕获）
事件冒泡：事件从内部像外传播，外层元素如果有相同的事件，也会触发
通过innerHTML改变元素内容时，会清除内部原有的绑定事件。
循环绑定事件时，动态添加的元素没有事件
事件委托
将子元素的事件委托给父元素执行，父元素执行事件时，通过事件对象Event，来判断是哪个子元素触发的事件（事件源）
<body>
<ul id="list"></ul>
</body>
<script>
var list=document.getElementById('list');
list.addEventListener("click",function(e){
//e.target e.srcElement src=source
//触发事件的子元素，就是e.srcElement
if (e.srcElement.tagName=="BUTTON") {
e.srcElement.parentNode.remove();
}
})
</script>
mouseover 鼠标经过
mouseout 鼠标移出
mouseenter 鼠标进入
mouseleave 鼠标离开
JS中dom操作的事件的更多相关文章
- 5月16日上课笔记-js中DOM操作
一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...
- JS的DOM操作及动画
JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- JS的DOM操作语法
整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- js的dom操作（整理）（转）
js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...
- js的DOM操作整理（整理）
js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...
- js中如何操作json数据
一.要想熟练的操作json数据,就先要了解json数据的结构,json有两种结构:对象和数组. 1.对象 一个对象以“{”开始,“}”结束.每个“名称”后跟一个“:”:“‘名称/值’ 对”之间使用“, ...
- js中的点击事件（click）的实现方式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- Js为Dom元素绑定事件须知
为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...
随机推荐
- website i18n and L10n all in one
website i18n and L10n all in one Localization & Internationalization 本地化 & 国际化 https://www.w ...
- auto open Chrome DevTools in the command line
auto open Chrome DevTools in the command line --auto-open-devtools-for-tabs # macOS $ /Applications/ ...
- js assert
js assert console.assert The console.assert() method writes an error message to the console if the a ...
- 18_MySQL之HAVING字句的使用
本节涉及的sql语句: -- HAVING -- 错误示例 SELECT deptno FROM t_emp WHERE AVG(sal)>=2000 GROUP BY deptno; 因为wh ...
- PyTorch 自定义数据集
准备数据 准备 COCO128 数据集,其是 COCO train2017 前 128 个数据.按 YOLOv5 组织的目录: $ tree ~/datasets/coco128 -L 2 /home ...
- Linux进程管理工具Supervisor的安装配置
目录 Linux进程管理工具Supervisor的安装配置 简介 安装Python包管理工具 安装Supervisor 配置 配置文件参数说明 配置进程管理 启动supervisor 控制进程 交互终 ...
- 第46天学习打卡（四大函数式接口 Stream流式计算 ForkJoin 异步回调 JMM Volatile）
小结与扩展 池的最大的大小如何去设置! 了解:IO密集型,CPU密集型:(调优) //1.CPU密集型 几核就是几个线程 可以保持效率最高 //2.IO密集型判断你的程序中十分耗IO的线程,只要大于 ...
- nacos--配置中心之客户端
nacos提供com.alibaba.nacos.api.config.ConfigService作为客户端的API用于发布,订阅,获取配置信息: ConfigService获取配置信息流程: 优先使 ...
- 箭头函数this的指向
箭头函数的this 什么是箭头函数,箭头函数是es6的新特性,其出现就是为了更好的表示(代替)回调函数 // 箭头函数 (arg1, arg2) => {} // 当箭头函数只有一个参数 arg ...
- kali 将家目录下的中文文件名修改成英文
修改vim ~/.config/user-dirs.dirs 打开`文件,删除那些中文目录 在目录下创建英文目录 重启 参考 https://elementaryos.stackexchange.co ...