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操作的事件的更多相关文章

  1. 5月16日上课笔记-js中DOM操作

    一.DOM操作 DOM节点的操作 增加 删除 修改 节点的信息: nodeName 获取节点的标签名 parentNode 获取父节点 childNodes IE忽略回车换行,chrome回车换行是文 ...

  2. JS的DOM操作及动画

    JS的DOM操作DOM:Document Object ModelBOM:Bowers(浏览器) Object Model找到元素:var a=document.getElementById(&quo ...

  3. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  4. JS的DOM操作语法

    整理了一下JS的DOM操作语法,这里做下记录. <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  5. js的dom操作（整理）（转）

    js的dom操作整理(整理)(转) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来来更加方便的进行dom操作 1.dom是什么? 对于JavaS ...

  6. js的DOM操作整理（整理）

    js的DOM操作整理(整理) 一.总结 一句话总结: dom操作有用原生js的dom操作,也可以用对js封装过的jquery等插件来更加方便的进行dom操作 1.dom是什么? 对于JavaScrip ...

  7. js中如何操作json数据

    一.要想熟练的操作json数据,就先要了解json数据的结构,json有两种结构:对象和数组. 1.对象 一个对象以“{”开始,“}”结束.每个“名称”后跟一个“:”:“‘名称/值’ 对”之间使用“, ...

  8. js中的点击事件（click）的实现方式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  9. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

随机推荐

  1. js uppercase the first letter of string

    js uppercase the first letter of string js String.toUpperCase `-webkit-border-image`.split(`-`).filt ...

  2. 如何使用 js 实现一个 Promise.all 方法 PromiseAll

    如何使用 js 实现一个 Promise.all 方法 PromiseAll Promise.all PromiseAll https://developer.mozilla.org/en-US/do ...

  3. DOMParser & SVG

    DOMParser & SVG js parse html to dom https://developer.mozilla.org/zh-CN/docs/Web/API/DOMParser ...

  4. PAUL ADAMS ARCHITECT：日本楼市仍保持稳定

    日本国土交通省从2008年11月开始,到2020年10月,连续追踪日本的公寓房价和日经指数两个数值的变动关联性,结果显示相关系数是0.935,也就是说在此期间,日本楼市和股市有着非常强的正相关. 保罗 ...

  5. django学习-1.开始hello world!

    1.前言 当你想走上测试开发之路,用python开发出一个web页面的时候,需要找一个支持python语言的web框架.django框架有丰富的文档和学习资料,也是非常成熟的web开发框架,想学pyt ...

  6. 国内源安装ROS2

    资料参考: https://www.mscto.com/op/428870.html 需要修正的一点是,使用如下的命令添加源: sudo sh -c 'echo "deb [arch=$(d ...

  7. nvidia-smi command not found Ubuntu 16.04

    issue:     nvidia-smi command not found Ubuntu 16.04 https://askubuntu.com/questions/902636/nvidia-s ...

  8. 2021-2-22：请你说下 CAP 理论并举例

    CAP CAP 理论是分布式系统中的一个老生常谈的理论了,最早由 Eric Brewer 在一个讲座中提出.在这个讲座中,在传统 ACID 理论以及当时比较流行但是比较抽象的的设计指导理论 BASE ...

  9. flask启动常见问题1:sqlalchemy.exc.ArgumentError: Mapper mapped class UserCode->data_system_user_email could not assemble any primary key columns for mapped table 'data_system_user_email'

    我的描述:当我编辑好flask以后,ORM映射数据库完成,启动项目时,发生现象: 解决: 看字面的意思是主键导致的错误,于是我查看了data_system_user_email的键参数配置,发现表没有 ...

  10. 不可不知的 JVM 预热

    一.JVM 架构基础 JVM 进程启动时,ClassLoader 会将需要的所有类加载到内存,主要分为以下三步: Bootstrap Class: 核心类库,由 "Bootstrap Cla ...