当前位置：首页 > news >正文

DOM--事件

news 来源：原创 2024/5/21 5:11:35

文章目录

- 2、事件（核心）
- - - 1、事件概述
    - - 解绑：
    - 2、事件类型
    - - 1、鼠标事件
      - 2、键盘事件。
      - 3、HTML事件。
    - 3、事件对象
    - - 1、鼠标的事件对象
      - 2、keycode(键码):
    - 4、其他事件
    - 5、事件中的this

2、事件（核心）

1、事件概述

事件：页面上的元素在某种状态（浏览器实现的）达成时，要执行的提前设定好程序，称之为事件句柄，简称事件。

三要素：

事件源
事件类型
事件处理程序

事件的绑定方式（三种）：

行内式（两种写法）：

1、直接在时间里面写处理程序

<div class='box' onclick='console.log('666666')'>点我</div>

2、调用外面的事件程序。

<div class='box' onclick='javaScript:myconsole.mylog()'>点我</div>

//<div class='box' οnclick='myconsole.mylog()'>点我</div>

    
<script>
    var myconsole={
        mylog:()=>{
            console.log('666666');
        }
    }
</script>

属性绑定

<style>
    .fa {
        width: 100px;
        height: 100px;
        background-color: pink;

    }
</style>    


<div class="fa">点我变色</div>
<script>
    var fa = document.querySelector('.fa');
    fa.onclick = function () {
        fa.style.backgroundColor = 'hotpink';
    }
</script>

只能绑定一个处理程序，后面的会覆盖前面的效果

给元素添加一个事件监听器（尽量使用这种）

addEventListener( )-----异步非阻塞函数

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>

<div>点我</div>

<script>
    var box = document.querySelector('div');
    box.addEventListener('click', function () {
        box.style.backgroundColor = 'blue';
        console.log('111111');
    })
    box.addEventListener('click', function () {
        box.style.backgroundColor = 'green';
        console.log('2222');

    })
</script>

点击一次后：打印11111 和2222，但是div颜色直接变成green。

IE浏览器的事件绑定（了解）：attachEvent

box.attachEvent('click', function () {
    console.log(3333);
})

兼容：

box.adde = box.addEventListener || box.attachEvent;
box.adde('click', function () {
    console.log(44444);
});

解绑：

解绑情况：强红包，点一次就不能点了。

属性、行内解绑

box.onclick=null;

监听解绑：里面必须存在两个属性，第一个表示事件类型，第二个表示解绑函数。

box.removeEventListener('click',fn1);  //绑多次，解绑对应函数fn1

2、事件类型

1、鼠标事件

鼠标事件	描述
click	单击鼠标按钮时触发；
dblclick	当用户双击主鼠标按钮时触发（鼠标第一次按下到第二次松开，鼠标指针在被选区域内部）；
mousedown	当用户按下鼠标还未弹起时触发；
mouseup	当用户释放鼠标按钮时触发；
mouseover	当鼠标移到某个元素上方时触发；
mouseout	当鼠标移出某个元素上方时触发；
mousemove	当鼠标指针在元素上移动时触发；（拖拽）
mouseenter	在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；
mouseleave	鼠标移出；

校招考试：事件链冒泡来记，父元素进入子元素触发吗？

onmouseover、onmouseout子元素会影响到父元素，而onmouseenter和onmouseleave 子元素不会影响父元素

2、键盘事件。

键盘事件	描述
keydown	当用户按下键盘上任意键时触发，如果按住不放，会重复触发；
keyup	当用户释放键盘上的键触发；
keypress	当用户按下键盘上的字符键时触发，如果按住不放，会重复触发；

3、HTML事件。

HTML事件	描述
load	当页面完全加载后在window上面触发，浏览器加载完毕：五大BOM的功能加载完毕后，或当框架集加载完毕后在框架集上触发；
unload	当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发；
select	当用户选择文本框（input或textarea）中的一个或多个字符触发；
change	当文本框（input或textarea）内容改变且失去焦点后触发；
input	输入；和keydown的区别是，输入内容了就触发了，而keydown必须是键盘输入才触发。

focus	当页面或者元素获得焦点时在window及相关元素上面触发；
blur	当页面或元素失去焦点时在window及相关元素上触发；

3、事件对象

1、鼠标的事件对象

鼠标的事件对象	描述
clientX	返回鼠标相当于浏览器窗口的x轴坐标
clientY	返回鼠标相当于浏览器窗口的y轴坐标
pageX	返回鼠标相当于整个网页文档的x轴坐标
pageY	返回鼠标相当于整个网页文档的y轴坐标
screenX	返回鼠标相当于屏幕的x轴坐标
screenY	返回鼠标相当于屏幕的y轴坐标
altKey	鼠标事件发生时，是否按下alt键,返回一个布尔
ctrlKey	鼠标事件发生时，是否按下ctrl键,返回一个布尔
metaKey	鼠标事件发生时，是否按下windows/commond键,返回一个布尔
movementX，movementY	返回一个位移值，单位为像素，表示当前位置与上一个
mousemove	事件之间的距离
offsetX/offsetY	相对于元素自己的x,y 跟他是否是定位的元素无关

2、keycode(键码):

左上右下：37 38 39 40

enter键：13

案例：

遍地生花：鼠标点下后出现一朵花：

<style>
    div {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0;
        left: 0;

    }

    img {
        width: 100%;
        height: 100%;
    }
</style>

<body>
    <div class="box"></div>

    <script>
        document.addEventListener('mousedown', function (e) {

            //动态生成盒子来装图片
            var box = document.createElement('div');
            var body = document.body;
            body.appendChild(box);
            //pageX，pageY得到鼠标距离文档的x，y坐标，这里要注意的是：设置给盒子偏移量时top取y坐标的值，left取x坐标的值，这里再减去盒子宽高的一半，使鼠标位于花朵的中间；
            box.style.top = (e.pageY - 50) + 'px';
            box.style.left = (e.pageX - 50) + 'px';
            //动态生成图片
            var img = document.createElement('img');
            box.appendChild(img);
            img.src = './image/flower2.png';
        })
    </script>
</body>

</html>

鼠标拖拽：盒子随鼠标变动位置。

<div class="login">点击拖拽我</div>

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

    div.addEventListener('mousedown', function (e) {
        var x = e.pageX - div.offsetLeft;
        var y = e.pageY - div.offsetTop;

        document.addEventListener('mousemove', move);

        function move(e) {
            div.style.left = (e.pageX - x) < 0 ? 0 : (e.pageX - x) + 'px';
            div.style.top = (e.pageY - y) < 0 ? 0 : (e.pageY - y) + 'px';
        }

        document.addEventListener('mouseup', function () {
            document.removeEventListener('mousemove', move);
        })
    })
</script>

4、其他事件

1、scroll
scroll：常用于绑定在window对象上,滚动鼠标时触发
window.οnscrοll=func

wheel ：鼠标的滚动。

2、load
load：等待网页资源下载完毕再执行。

img.onload 图片节点加载完毕不会调用要资源加载完毕就会调用。

window.onload：等待页面所有资源下载完成才执行,包括图片资源的下载，所以它是最慢的。

网页加载顺序：url–>下载页面–>domTree，cssTree并行–>渲染树renderTree–>绘制页面–>继续下载图片资源，下载完毕再放到页面上去onload。
domTree：domTree的形成，是先把元素翻译成的节点对象挂到 domTree上去，再把属性 img_src放到渲染树上去

每年都考的面试题:用户从地址栏输入网址按下回车到页面展示出来整个过程发生了什么?
答案:前端=>网络=>后端=>网络=>前端这4步都得分析

5、事件中的this

1.行内:

<button type="button" onclick="fn(this)">xxx</button>
<script type="text/javascript">
		function fn (e) {
			console.log(e,this)//btn和window
		}
</script>