js中event事件对象

最新推荐文章于 2024-01-29 21:35:47 发布

麸or莘

最新推荐文章于 2024-01-29 21:35:47 发布

阅读量2.9k

点赞数 1

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/Y_I_M_I_l_u_c_k/article/details/123495812

版权

1. event事件

概念： Event 对象代表事件的状态，当dom tree中某个事件被触发的时候，会同时自动产生一个用来描述事件所有的相关信息（比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。）的对象，这个对象就是event（事件对象）。

2. Event事件对象的使用

通过函数传参数的形式来使用

2.1 event常用的属性和方法

2.1.1 type属性

type属性用来获得当前触发事件的类型，是只读属性

2.1.2 bubnles属性

bubbles属性用来获得当前触发事件类型是否冒泡，如果当前事件类型支持冒泡则返回true，否则返回false

注意： bubbles属性是该事件是否冒泡。和事件处理机制无关！！！

2.1.3 eventPhase属性

事件传导至当前节点时出于什么时的状态。

1：事件处于捕获状态

2：事件处于真正的触发者

3: 事件处于冒泡状态

备注：两张图的不同在于图一的事件监听函数开启了事件捕获状态

2.1.4 target属性和currentTarfet

target：事件真正的触发者

currentTarget: 返回事件的监听者（触发的事件绑定到了那个节点，就返回谁）

总结：事件冒泡会影响到上一级元素的target属性，但是currenTarget只会受到改区间的事件监听者的控制

2.1.5 button属性

button 返回事件被触发时，那个鼠标按钮被点击。

e.button= 0|1|2

0：鼠标左键

1：鼠标中键

2：鼠标右键

从左到右

2.1.6 key和keyCode

key指的是我们按了键盘上的哪个键

keyCode返回的是keydown和keyup事件发生的时候按键的代码，以及keypress事件的Unicode字符（ASCll码值）；（firefox2不支持event.keyCode,可以用event.which替代）

2.1.7 获取当前坐标的属性

event事件获取当前坐标
clientX	鼠标相对于浏览器左上角x轴的坐标；不随滚动条滚动而改变
client	Y 鼠标相对于浏览器左上角y轴的坐标；不随滚动条滚动而改变
pageX	鼠标相对于浏览器文档左上角x轴的坐标；随滚动条滚动而改变，定点为文档的左上角，被卷进去也是默认按照被卷去的文档定位
pageY	鼠标相对于浏览器文档左上角y轴的坐标；随滚动条滚动而改变
screenX	鼠标相对于显示器屏幕左上角x轴的坐标
screenY	鼠标相对于显示器屏幕左上角y轴的坐标
offsetX	鼠标相对于事件源左上角X轴的坐标
offsetY	鼠标相对于事件源左上角Y轴的坐标

获取当前事件的相关属性

offsetLeft	获取事件源左边到Y轴零点的坐标
offsetTop	获取事件源上方到X轴零点的坐标
offsetWidth	水平方向 width + 左右padding + 左右border-width
offsetHeight	垂直方向 height + 上下padding + 上下border-width
clientWidth	水平方向 width + 左右padding
clientHeight	垂直方向 height + 上下padding
scrollWidth	元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth
scrollHeight	元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight

代码展示：

    document.getElementById("father").addEventListener("click",function(e){
      console.log("father:"+"我的宽度是300px,高度是300px,我的padding是50px,我的border是10px")
      console.log("clieX:"+e.clientX+" clieY:"+e.clientY+"<br>");
      console.log("pageX:"+e.pageX+"pageY:"+e.pageY+"<br>");
      console.log("screenX:"+e.screenX+" offsetY:"+e.screenY+"<br>");
      console.log("offsetX:"+e.offsetX+" offsetY:"+e.offsetY+"<br>");
      console.log("关于元素偏移量的计算")
      console.log("fatherLeft:"+this.offsetLeft+" fatherTop:"+this.offsetTop+"<br>");
      console.log("fatherclientWidth:"+this.clientWidth+" fatherclientHeight:"+this.clientHeight+"<br>");
      console.log("fatheroffsetWidth:"+this.offsetWidth+" fatheroffsetHeight:"+this.offsetHeight+"<br>");
      console.log("fatherscrollWidth:"+this.scrollWidth+" fatherscrollHeight:"+this.scrollHeight+"<br>");
    })
    }
  </script>
</head>
<body>
  <div id="father">
  111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    <!-- <div id="son"></div> -->
  </div>

运行结果：

3. event中常用的方法

stopPropgation()：阻止冒泡

preventDefault()：默认阻止行为

  <script>
    window.onload = function(){
      document.getElementById("a").addEventListener("click",function(e){        
        e.preventDefault()
      })
    }

  </script>

<a href="http://baidu.com " id="a">百度</a> //阻止默认链接跳转

4. 滚轮事件

onmousewheel就是鼠标滚动事件，mouse鼠标，wheel就是轮子。

event参数最最重要的事就event.wheelDelta属性，表示滚动的方向。这是浏览器的规定：

鼠标往上滚， 120

鼠标往下滚， -120

5. 文档事件

5.1 加载成功\失败事件：load\error

load事件指的是：节点加载成功时自动发生回调事件

error事件值得是：节点加载失败时自动发生的回调事件

5.2 当DOM加载完成时触发事件：DOMContentLoaded

DOMContentLoaded事件和load事件的区别是触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。

DOM文档加载的步骤为:
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。 //DOMContentLoaded执行
加载图片等外部文件。
页面加载完毕。 //load执行

5.3 文档加载状态判断事件：readystatechange

众所周知，document节点中拥有一个属性叫做readyState。其拥有三个可能值：

loading：加载DOM中文件

interactive：加载外部资源

complete：加载完成

而readystatechange事件正是在这个状态发生改变时调用的事件。

麸or莘

关注

1
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
js中event事件对象

event事件/clienX/clienY/offsetX/offsetY/pageX/pageY/screenX/screenY/stopPropgation()/preventDefault()
复制链接

扫一扫