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 ...
随机推荐
- free website generator by google
free website generator by google https://sites.google.com/view/webgeeker-xyz/首页 https://sites.google ...
- hackr.io & Programming Courses & Programming Tutorials
hackr.io & Programming Courses & Programming Tutorials the Best Programming Courses & Tu ...
- 11月16日NGK公链第13期官方快讯！
- JavaScriptBOM操作
BOM(浏览器对象模型)主要用于管理浏览器窗口,它提供了大量独立的.可以与浏览器窗口进行互动的功能,这些功能与任何网页内容无关.浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对 ...
- Ping 的工作原理你懂了，那 ICMP 你懂不懂？
计算机网络我也连载了很多篇了,大家可以在我的公众号「程序员cxuan」 或者我的 github 系统学习. 计算机网络第一篇,聊一聊网络基础 :计算机网络基础知识总结 计算机网络第二篇,聊一聊 TCP ...
- 谈一下HashMap的底层原理是什么？
底层原理:Map + 无序 + 键唯一 + 哈希表 (数组+Entry)+ 存取值 1.HashMap是Map接口的实现类.实现HashMap对数据的操作,允许有一个null键,多个null值. Co ...
- python进阶（11）生成器
生成器 利用迭代器,我们可以在每次迭代获取数据(通过next()方法)时按照特定的规律进行生成.但是我们在实现一个迭代器时,关于当前迭代到的状态需要我们自己记录,进而才能根据当前状态生成下一个数据. ...
- 第40天学习打卡（静态代理 Lambda表达式 线程状态 线程同步 同步方法）
静态代理 package com.kuang.demo03; //静态代理模式总结 //真实对象和代理对象都要实现同一个接口 //代理对象要代理真实角色 //好处: //代理对象可以做很多真实对象 ...
- 后端程序员之路 3、fastcgi、fastcgi++
CGI与FastCGI - wanghetao - 博客园http://www.cnblogs.com/wanghetao/p/3934350.html eddic/fastcgipp: A C++ ...
- 学习java之基础语法（三）
学习java之基础语法(三) java运算符 计算机的最基本用途之一就是执行数学运算,作为一门计算机语言,Java也提供了一套丰富的运算符来操纵变量.我们可以把运算符分成以下几组: 算术运算符 关系运 ...