我们知道在JS中常用的事件有:
- 页面事件:load;
- 焦点事件:focus,blur;
- 鼠标事件:click,mouseout,mouseover,mousemove等;
- 键盘事件:keydown,keyup,keypress;
- form表单事件:reset,submit;
- 内容变化事件:change,input
那JS中“事件对象”,到底是个什么东西?
首先,什么是事件呢?
首先说JS就是为了实现一些动态的操作,而用户会有时候想去实现一些功能,如提交表单,鼠标点击等,就要在浏览器中触发这个事件,然后浏览器会感知(或者说捕获)到用户的这个行为,就会去响应处理这个事件。这个就称之为事件。
那么说,产生事件对象的原因是什么?
事件的触发,大部分情况下是用户想去操作的一种行为,也就是说,我们并不能确定用户什么时间触发;而且,由于事件的传播机制,我们甚至不能确定事件具体触发在哪个节点;这是一件令人很头疼的事情;
为了解决这个问题,在事件发生以后,系统会调用我们写好的事件处理程序(一段代码)来解决。
由此,引出了什么是事件对象?
系统会在调用处理程序时,把有关事件发生的一切信息,封装成一个对象,作为参数,传送给监听函数(事件处理程序)。那么说这个对象,称之为事件对象。
根据事件类型的不同,事件对象中包含的信息也有所不同;如点击事件中,包含鼠标点击的横纵坐标位置,键盘事件中,包含键盘的键值等;
<body> <div id="div"> <p>pppp</p> </div> <input type="text" value="" id="i"> </body> <script> var d = document.getElementById('div'); //鼠标事件 d.addEventListener('click',function(e){ console.log(e); }); var i = document.getElementById('i'); //键盘事件 i.addEventListener('keydown',k); function k(e){ console.log(e); } </script>
现在了解了事件对象的含义后,我们来看看事件对象中都有哪些属性和方法?
(1) 普通属性:
event.bubbles: 返回一个布尔值,表示当前事件是否会冒泡;
event.eventPhase:返回一个整数值,表示事件流在传播阶段的位置
0:事件目前没有发生。
1:事件目前处于捕获阶段。
2:事件到达目标节点。
3:事件处于冒泡阶段。
event.type: 返回一个字符串,表示事件类型,大小写敏感;
event.timeStamp: 返回一个毫秒时间戳,表示事件发生的时间;
clientX、clientY : 获取鼠标事件触发的X,Y坐标
事件对象
(2) 事件代理/委托属性:
event.target:对事件触发的引用,返回触发事件发生的那个节点。(重点)
event.currentTarget:返回事件当前所在的节点,即正在执行的监听函数所绑定的那个节点。(了解即可)
var d = document.getElementById('d'); d.onclick = function(e){ //返回事件节点 console.log(e.currentTarget); //返回触发节点 console.log(e.target); }
事件代理(事件委托)的含义:由于事件会在冒泡阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件。这个方法叫做事件的代理也叫事件代理或者事件委托。
<head> <title></title> <meta charset="UTF-8"> <style> div{padding: 40px} #div3{width: 300px;height: 300px;border: 1px solid red;} #div2{width: 200px;height: 200px;border: 1px solid red;} #div1{width: 100px;height: 100px;border: 1px solid red} </style> </head> <body> <div id="div3">div3 <div id="div2">div2 <div id="div1">div1</div> </div> </div> </body> <script> var d = document.getElementById('div3'); d.onclick = function(e){ e.target.style.background = 'red'; } </script>
根据上面的代码可以得到三个div的位置大概如下:点击每个div,每个div的整体就会变成红色。主要是通过e.target返回了点击触发的该节点。
(3)阻止浏览器默认行为和阻止事件传播的方法event.preventDefault():该方法 阻止浏览器会执行当前事件的默认行为,比如点击链接后,浏览器跳转到指定页面;或者按一下空格键,页面向下滚动一段距离。event.stopPropagation():该方法 阻止事件在DOM结构中继续传播,防止再触发定义在别的节点上的监听函数。
<body> <div id="div2">2 <div id="div1">1 <a id="a" href="百度2下">我的皎月闻越想闻</a> </div> </div> </body> <script> var d2 = document.getElementById('div2'); var d1 = document.getElementById('div1'); var a = document.getElementById('a'); d2.onclick = function(e){ alert('d2'); } d1.onclick = function(e){ alert('d1'); } a.onclick = function(e){ //阻止事件传播 e.stopPropagation(); alert('a'); //阻止浏览器默认行为 e.preventDefault(); } </script>
使用事件对象,实现一个简单的小案例:跟着鼠标飞的div(通过修改事件对象的XY值)
<body> <div id="div2">2 <div id="div1">1 <a id="a" href="百度2下">我的皎月闻越想闻</a> </div> </div> </body> <script> var d2 = document.getElementById('div2'); var d1 = document.getElementById('div1'); var a = document.getElementById('a'); d2.onclick = function(e){ alert('d2'); } d1.onclick = function(e){ alert('d1'); } a.onclick = function(e){ //阻止事件传播 e.stopPropagation(); alert('a'); //阻止浏览器默认行为 e.preventDefault(); } </script>
点击前(不动)
点击后(跟着鼠标走)
总结
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]