js中的DOM事件

最新推荐文章于 2023-11-13 19:18:32 发布

蜡笔小连

最新推荐文章于 2023-11-13 19:18:32 发布

阅读量162

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/jyyqxrm/article/details/120208083

版权

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间
事件三要素
事件目标：发生的事件与之相关的对象
事件处理程序：处理或相应事件的函数
事件对象：与特定事件相关且包含有关该事件详细信息的对象

事件流

页面接收事件的顺序

1.事件冒泡（IE事件）
事件由一个具体的元素接收，然后又逐步传递到不具体的节点
(当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发)
特点：从内往外传递
阻止事件冒泡：event.stopPropagation();在哪个元素要阻止就在哪个元素里添加
2.事件捕获
事件由不太具体的节点接收到，然后传递到具体的节点上
特点：从外往内传递

事件处理程序

事件就是用户或浏览器自身执行的某种动作，响应某个事件的函数为事件处理程序，事件处理程序以"on"开头
作用：绑定事件
例如：onclick，onmouseover，onload …
节点：可以是div，也可以是button…等

1.非IE事件处理程序
addEventListener()
绑定事件监听器
参数：1.事件类型（click，mouseover 等）
          2.事件处理函数；当绑定的事件被触发时要执行的操作
           3.boolean？用来决定事件流类型，事件冒泡false ，事件捕获true
removeEventListener()
作用：移除事件
参数：1.要删除的事件名
            2.事件处理函数
            3.boolean？事件冒泡false ，事件捕获true

2.IE事件处理程序
attachEvent()
作用：事件绑定
参数：事件处理程序名称
           事件处理函数
detachEvent()
作用：事件移除
参数：事件处理程序名称
           事件处理函数
           事件处理程序都被添加到冒泡阶段

事件类型

1.UI事件

	触发条件
load	在页面完全加载后会在window上触发这个事件，如果是图像加载完成后会在img元素上触发window.onload
unload	在页面完全卸载后会在window上触发这个事件
select	当用户选择文本框中的字符时会触发
resize	当浏览器窗口被调整宽高时会触发会重复触发
scroll	滚动条滚动时会触发会重复触发

2.焦点事件

	触发条件
blur	元素失去焦点的时候触发
focus	元素获得焦点的时候触发，不支持冒泡

3.鼠标事件

	触发条件
click	点击鼠标的主按钮点击触控板
dblclick	双击鼠标的主要按钮
mousedowm	任意鼠标按钮按下时触发
mouseup	任意鼠标按钮抬起（释放）时触发
mousemove	鼠标在元素内部移动时会重复触发
mousewheel	滚轮事件
mouseover	鼠标位于元素外部，将其首次移入另一个元素边界之内时触发（支持子元素）
mouseenter	鼠标光标从元素外部首次移动到元素范围内激发，不冒泡（不支持子元素）
mouseout	在位于元素上方的鼠标光标移入到另外一个元素中（支持子元素）
mouseleave	在位于元素上方的鼠标光标移动到元素范围之外时触发（不支持资源）

4.键盘事件

	触发条件
keydown	按下键盘任意键触发，如果按住不放会重复触发
keypress	按下键盘字符键触发，如果按住不放会重复触发
keyup	释放按键时触发

事件对象

当事件的响应函数被触发时，浏览器每次都会讲一个事件对象作为实参传递给响应函数
在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘的哪个键被按下…
event对象的属性都是只读属性

属性	类型	说明
type	String	事件类型，需要一个函数，处理多个事件时，可使用该属性
bubbles	Boolean	事件是否冒泡
cancelable	Boolean	是否可取消事件默认行为
target	Element	事件目标
…

事件对象实例——获取鼠标坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            width: 300px;
            height: 200px;
            border: 2px solid black;
            margin-bottom: 10px;
        }
        #box2{
            width: 300px;
            height: 30px;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>
<script>
    //当鼠标在box1中移动时，在box2中显示鼠标的坐标
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    box1.onmousemove=function(event){
        //clientX可以获取鼠标指针的水平坐标
        //clientY可以获取鼠标指针的垂直坐标
        var x = event.clientX;
        var y = event.clientY;
        //在box2中显示鼠标坐标
        box2.innerHTML = "x="+x+",y="+y;
    }
</script>

蜡笔小连

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中的DOM事件

事件就是文档或浏览器窗口中发生的一些特定的交互瞬间事件三要素事件目标：发生的事件与之相关的对象事件处理程序：处理或相应事件的函数事件对象：与特定事件相关且包含有关该事件详细信息的对象事件流页面接收事件的顺序1.冒泡事件（IE事件）事件由一个具体的元素接收，然后又逐步传递到不具体的节点(当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发)特点：从内往外传递阻止事件冒泡：event.stopPropagation();在哪个元素要阻止就在哪个元素里添加2.事件捕获事件由不太具
复制链接

扫一扫