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. React Hooks: useEffect All In One

    React Hooks: useEffect All In One useEffect https://reactjs.org/docs/hooks-effect.html https://react ...

  2. nest.js tutorials

    nest.js tutorials A progressive Node.js framework https://docs.nestjs.com//firststeps nest.js CLI ht ...

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

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

  4. redux & multi dispatch & async await

    redux & multi dispatch & async await 同时发送多个 action, 怎么保证按序返回数据 dispatch multi actions http:/ ...

  5. API 注解 & Java API annotation

    API 注解 & Java API annotation 注解 annotation

  6. DOM事件对象用法

    分为三个阶段:事件捕获阶段.目标阶段.事件冒泡阶段. 事件捕获老版本浏览器(IE<=8)不支持,但是事件冒泡可以放心使用. 事件处理程序 一共四类写法,基本都见过,看下写法就知道怎么回事儿了. ...

  7. [转]基于ROS平台的移动机器人-4-通过ROS利用键盘控制小车移动

    原文出处: https://blog.csdn.net/Forrest_Z/article/details/55002484 准备工作 1.下载串口通信的ROS包 (1)cd ~/catkin_ws/ ...

  8. Go的包

    目录 go的包 一.包的创建规则 二.包的导入规则 三.包的函数调用 go的包 一.包的创建规则 一个包就是一个文件夹. 同一个包(文件夹)下,所有go文件都只能用同一个package,也就是每个文件 ...

  9. Linux没有ens33解决方案

    一.前言 运行环境:window10+VMware14+Centos7 博主最近遇到一个比较郁闷的问题,在虚拟机上操作Linux系统查看IP的时候,发现没有ens33或者eth0了,试了很多办法都没有 ...

  10. java中ArrayList 和 LinkedList 有什么区别

    转: java中ArrayList 和 LinkedList 有什么区别 ArrayList和LinkedList都实现了List接口,有以下的不同点:1.ArrayList是基于索引的数据接口,它的 ...