dom事件操作1

事件对象

概述

-> 事件对象
-> 为什么需要事件对象
键盘事件, 鼠标事件会在触发的时候 得到很多的数据, 例键盘按下的是什么键(组合件)再比如鼠标移动时候的坐标是什么…
为了好使用这些数据, 浏览器帮我们将生成的这些数据进行 “打包”, 将其打包一个对象.
-> 怎么使用事件对象呢?
1> 怎么拿到对象
在事件触发( 人执行某一个预定义行为的时候 )的时候, 浏览器会检查是否提前注册过事件处理函数, 一旦注册了函数, 浏览器就会将函数调用一下.

数据是浏览器收集的，函数也是浏览器调用的，所以实际上浏览器在调用函数的时候给函数传入了一个参数, 这个参数就是事件对象.
所以要拿到事件对象:
1) 在函数参数中写上形参
2) 使用 arguments 
2> 这些属性有什么用
键盘事件: keyCode, 键盘的键位码
案例: 在页面上利用键盘的 wsad 控制小盒子的移动
1> 盒子要移动: 上下左右 的移动
绝对定位, 利用 left 与 top 控制盒子的位置
2> 只有文本框可以获得键盘事件, 那么如何在全页面中监视键盘事件呢?
将事件注册到 document 上

什么是事件

什么是事件( event ), 我们向浏览器做一件事情, 浏览器给我们一个反应. 浏览器时时对我们的行为有一个监视, 浏览器知道我们做的所有事情: 鼠标与键盘的操作.正常情况, 浏览器什么也不说.

浏览器会有很多的默认行为, 如果我们需要在我们进行操作的时候, 浏览器来响应我们的自定义行为那么我们就需要 注册事件. 就是告诉浏览器我们在执行某某行为的时候调用某一个函数.

简单的说事件的操作步骤

找到元素

注册事件: 元素.on事件名 = 函数

在用户执行某一个行为的时候, 函数就会调用

语法的说明注意事项及this指向说明

语法的说明:
1> 事件相关的函数( 事件处理函数 )可以单独的写, 也可以直接在注册事件的时候赋值.
2> 我们需要注意的是, 同一个事件只允许注册一次. 重复给 onxxxx 赋值只会覆盖以前的函数.
3> 我们可以给同一个元素注册多个事件: 例如鼠标进入与离开.
4> 事件的书写也可以直接写到 onclick 标签属性中( 了解为主 ). 属性值就是一个匿名函数.
5> 关于 this, this 就是 “这一个, 它”, 在代码中它的表示是容易出错的.
如果一个对象的方法调用了, 在方法中 this 就是这个对象本身
var o = {
method: function () {
console.log( this );
}
};
// o.method = function () { … };

因为我们的事件是被注册到 元素上, 事件处理函数中的 this 就是这个元素
        btn.onclick = function () {
            // this 就是 btn
        };

事件处理函数中的 this 就是这个触发事件的元素

常用事件

鼠标类:

​ click 单击事件: 是按下与抬起组合在一起叫单击
dblclick 双击事件
mousedown 鼠标按下事件
mouseup 鼠标抬起事件
mouseenter 鼠标进入事件 不冒泡
mouseleave 鼠标离开事件 不冒泡
mouseover 鼠标进入事件 冒泡
mouseout 鼠标离开事件 冒泡
mousemove 鼠标移动事件

简单的说 enter 组不会冒泡, over 组会冒泡 

1
2
3
4
5
function func() {
            alert( '我们自己定义的行为给执行了, 哈哈哈哈哈哈\n呵呵呵呵\n嘻嘻嘻嘻' );
        }
var btn = document.getElementsByTagName( 'button' )[ 0 ];
 btn.onclick = func;   // 注意不是 func() 的返回值赋值给 onclick

键盘类事件:

keypress 击键事件: 键盘按下与抬起组合到一起叫击键
keydown 键盘按下
keyup 键盘抬起
keyCode 键盘的键位码
在事件处理函数中如果需要使用当前的 元素 一般都会使用 this 来代替
onchange 值发生改变事件(文本改变并失去焦点)
onblur 失去焦点事件
onresize 当浏览器窗口大小发生变化是触发事件
onscroll 当浏览器滚动时

滚轮事件

在谷歌浏览器中 滚轮事件是 onmousewheel
在火狐浏览器中 滚轮事件是 onDOMMouseScroll

input事件

focus()获取焦点 事件
oninput 文本框内容发生改变事件

追加点击事件

元素.addEventListener( ‘事件的类型’, 事件处理函数 )

事件的移除

传统移除 btn.onclick = null;
元素.removeEventListener( ‘事件的类型’, 要移除的函数 )

取消事件的默认行为

form 表单的提交
a 标签的跳转

我们要想办法取消事件的默认行为
只需要在事件处理函数中返回 false 即可

问题:
1> 代码规范.
2> 表单案例一定要有 form 标签, 没有 form 标签是不会提交的.

var btn = document.querySelector( ‘input’ );
btn.onclick = function () {
alert( ‘点击提交’ );
return false; // 在点击按钮事件触发后, 不会执行事件的默认行为. 即不会提交
};

事件冒泡

冒泡[ 重点 ]
描述:




我们点击 里面的 div, 问是点击的 里面的 div 还是点击的 外面的 div 呢?

​ 我们的 html 结构是一个嵌套关系的时候, 如果对里面的元素触发事件, 那么也相当于对外面的元素触发事件，那么这个过程不是我们注册事件才会实现, 而是浏览器对事件处理的基本原理, 不是因为我们注册了事件才有这个效果, 而是原本就有这个特征, 我们注册了事件才可以观察到.

 这样事件的触发会 从里往外 自动的传递, 我们将其称为事件的冒泡.

​ 有些浏览器( 老 ), 我们在嵌套标签中触发事件的时候, 事件执行会 从 外 往 里. 那么将其称为 事件的捕获.

​ 由于 js 不断发展, 为了实现向下兼容. js 的事件语法中支持控制让事件以冒泡的形式传递 还是 以捕获的形式传递.

语法:
    元素.addEventListener( '事件的类型', 事件处理函数[, 是否捕获 ] );
该语法的第三个参数是可选参数, 提供一个 boolean 值
1> 如果不传入, 或传入的是 false, 表示采用冒泡的方式传递事件
2> 如果传入的是 true 则以捕获的形式进行传递事件

事件冒泡

事件的触发会 从里往外 自动的传递, 我们将其称为事件的冒泡.

利用事件冒泡来实现事件代理
代理( delegate, 委托 ), 自己要做, 但是不做, 让另一个对象帮你做, 那么这个对象就是你的 代理.
事件代理, 就是原本应该触发你的事件, 但是触发的是别人的事件, 让这个事件来给你完成任务.

案例:
列表鼠标悬浮高量
思考: 冒泡在这个案例中, 存在什么特征? 就是每一次鼠标进入与离开, 都会被外层的 div 所察觉.
思考: 如果不给里面的所有 div 注册鼠标进入与离开的事件, 外层 容器的事件会 触发么? 会

考虑, 如果在事件的传递过程中, 可以得到最早触发事件的元素( 事件的源头 ).
如果可以得到这个源头, 我们的 代码 会怎么样?

事件处理函数中的事件对象, 有一个属性叫 target, 就是我们事件的源头.

事件捕获

事件执行会 从 外 往 里. 那么将其称为 事件的捕获.

事件处理函数中的事件对象, 有一个属性叫 target, 就是我们事件的源头.

target,属性

事件处理函数中的事件对象, 有一个属性叫 target, 就是我们事件的源头.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .list div {
            width: 300px;
            height: 20px;
            border: 1px solid #ccc;
            background-color: rgba( 0,0,0,0.3 );
        }
    
    </style>
</head>
<body>
    <div class="list">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <script>
        var list = document.querySelector( '.list' );

        list.onmouseover = function ( e ) {
            // console.log( '进入事件触发了' );
            // console.log( e );

            // var div = 源头;
            var div = e.target;
            div.style.backgroundColor = 'red';
        };
        list.onmouseout = function ( e ) {
            // console.log( '离开事件触发了' );
            // console.log( e );

            // var div = 源头;
            var div = e.target;
            div.style.backgroundColor = '';
        };
        
    </script>
</body>
</html>

取消事件的默认行为

return false

取消事件冒泡

stopPropagation()

1
2
3
4
span.onclick = function ( e ) {
            alert( 'span' );
            e.stopPropagation(); // 阻止了事件向上传递( 没有冒泡了 )
        };
javascript API笔记
#dom操作
dom事件操作1
http://www.dwyblog.cn/2020/01/10/dom事件操作/
作者
幸福来敲门
发布于
2020年1月10日
许可协议