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 ...
随机推荐
- TypeScript & LeetCode
TypeScript & LeetCode TypeScript In Action TypeScript 复杂类型 编写复杂的 TypeScript 类型 // 方法「只可能」有两种类型签名 ...
- color recognition by image
color recognition by image 通过图像进行颜色识别 https://imagecolorpicker.com/ unknown color origin pic grey bl ...
- classnames & React & taro
classnames & React & taro classnames https://www.npmjs.com/package/classnames demo https://g ...
- import script module
import script module .mjs <script type="module"> import {addTextToBody} from './util ...
- 「NGK每日快讯」12.17日NGK第44期官方快讯!
- K8S部署Redis Cluster集群
kubernetes部署单节点redis: https://www.cnblogs.com/zisefeizhu/p/14282299.html Redis 介绍 • Redis代表REmote DI ...
- LoveWord
个人喜欢的句子汇总! 我告诉你我喜欢你,并不是一定要和你在一起,只是希望今后的你,在遭遇人生低谷的时候,不要灰心,至少曾经有人被你的魅力所吸引,曾经是,以后也会是----村上村树
- 带你认识webpack
一.webpack是什么 webpack是一种前端资源构建工具,一个静态模块打包器(module bundler).在webpack看来,前端的所有资源文件(js/json/css/img/less/ ...
- linux文件权限的查看和修改（转）
原文链接:https://www.cnblogs.com/sxdcgaq8080/p/7498906.html 命令: chmod 777 scan_record.js 格式: chmod 权限数字 ...
- idea加载maven项目遇见的坑---2
idea每次加载完一个maven项目,都需要重新配置 file>>>Settings 然后继续找 还有就是配置项目的时候 配置项目jdk 最后需要注意,有时候你会发现都设置完了,但是 ...