js 事件对象相关笔记
事件对象
<div class="div">123</div>
<script>
var div = document.querySelector(".div")
div.onclick = function (event) {
console.log(event);
}
div.addEventListener('click', function (event) {
console.log(event);
})
</script>
重点
<div class="box">www</div>
<ul>
<li>abc1</li>
<li>abc2</li>
<li>abc3</li>
</ul>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
var box = document.querySelector(".box")
var ul = document.querySelector("ul")
box.addEventListener('click', function (e) {
console.log(e.target);
})
ul.addEventListener('click', function (event) {
console.log(event.target)
console.log(event.type);
// this指向的是谁绑定的事件
console.log(this);
})
// 阻止默认行为 让链接不跳转或者让添加按钮不添加
var a = document.querySelector("a")
a.addEventListener('click', function (eve) {
eve.preventDefault() //DOM标准写法
})
<div class="father">
<div class="son">son</div>
</div>
<script>
var son = document.querySelector(".son")
son.addEventListener('click', function (e) {
alert("00")
e.stopPropagation()
}, false)
var father = document.querySelector(".father")
father.addEventListener('click', function () {
alert("father")
}, false)
document.addEventListener('click', function () {
alert("987")
})
</script>
事件委托
<ul class="ul">
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
<li>12345</li>
</ul>
<script>
// 事件委托的核心原理 给父节点设置监听器 然后事件冒泡影响下面的子节点
var ul = document.querySelector(".ul")
ul.addEventListener('click', function (e) {
// alert("0000-")
e.target.style.backgroundColor = 'pink'
})
</script>
js 事件对象相关笔记的更多相关文章
- JavaScript学习06 JS事件对象
JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...
- JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习
JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...
- JS—事件对象
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...
- JS事件对象与事件委托
事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...
- JS 事件对象和事件冒泡
1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- js 事件对象
/* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...
- js 事件对象event
在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...
- JS:事件对象1
一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...
随机推荐
- java 面向对象(二十):类的结构:代码块
类的成员之四:代码块(初始化块)(重要性较属性.方法.构造器差一些)1.代码块的作用:用来初始化类.对象的信息2.分类:代码块要是使用修饰符,只能使用static分类:静态代码块 vs 非静态代码块3 ...
- SQLAlchemy01 /SQLAlchemy去连接数据库、ORM介绍、将ORM模型映射到数据库中
SQLAlchemy01 /SQLAlchemy去连接数据库.ORM介绍.将ORM模型映射到数据库中 目录 SQLAlchemy01 /SQLAlchemy去连接数据库.ORM介绍.将ORM模型映射到 ...
- 数据可视化之 图表篇(四) 那些精美的Power BI可视化图表
之前使用自定义图表,每次新打开一个新文件时,都需要重新添加,无法保存,在PowerBI 6月更新中,这个功能得到了很大改善,可以将自定义的图表固定在内置图表面板上了. 添加自定义图表后,右键>固 ...
- 浏览器常见攻击方式(XSS和CSRF)
常见的浏览器攻击分为两种,一种为XSS(跨站脚本攻击),另一种则为CSRF(跨站请求伪造). XSS(跨站脚本攻击) 定义 XSS 全称是 Cross Site Scripting,为了与“CSS”区 ...
- 安装 VsCode 插件安装以及配置
安装vscode 官方网站 https://code.visualstudio.com/ 下载后 1.双击vscode.exe 2.选择 我接受 3.一路下一步,遇到方框就选4.点击 安装按钮 v ...
- 没内鬼,来点干货!volatile和synchronized
题外话 这篇笔记是我<没内鬼>系列第二篇,其实我计划是把设计模式和多线程并发分为两个系列,统一叫<一起学系列>来系统的介绍 相关的知识,但是想到这篇笔记去年就写成了,一直不发心 ...
- Java设计模式 --- 七大常用设计模式示例归纳
设计模式分为三种类型,共23种: 创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式 行为型模式:模 ...
- python学习03-使用动态ua
在写爬虫的时候要使用到浏览器ua 分享一下今天学到的如何使用动态ua的进行爬取 1.简单的爬取网页信息 from urllib.request import urlopen #目标地址 url = & ...
- 好用的npm模块记录
标签: node node盛行的今天,前端开发已经离不开npm模块的使用,大名鼎鼎的如gulp,webpack等,此处不多说,除了它们有那么几个常用的npm模块是我喜欢并依赖它的,下面就是我平时工作中 ...
- 一分钟速学 | NMS, IOU 与 SoftMax
非极大抑制 NMS的英文是Non-maximum suppression的缩写. 简单的说,就是模型给出了多个重叠在一起的候选框,我们只需要保留一个就可以了.其他的重叠的候选框就删掉了,效果可见下图: ...