javascript中的常见事件

威猛的卡桑

已于 2022-11-04 17:49:35 修改

阅读量878

点赞数

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

于 2022-10-26 22:48:44 首次发布

本文链接：https://blog.csdn.net/wdtn5656/article/details/127513494

版权

1.什么是事件

事件：为了捕获用户的行为，根据用户的行为来做出一些反应

事件的三要素：

1.事件源（你要把这个事件绑定在谁的身上）

2.事件的类型（你到底要加什么类型的事件，单击事件还是双击事件还是鼠标划入事件等。。。。）

3.事件的处理函数：当行为发生的时候所执行的函数

比如：btn.onclick = function(){}

btn=====事件源

click====事件类型

function就是事件处理函数

2.绑定事件

方式一：DOM 0级事件绑定

语法：事件源.on事件类型 = 事件处理函数

特点：同一个事件源的同一个事件类型只能绑定一个事件处理函数，如果绑定了多个，后者会把前者给覆盖。

<body>
    <button>点我</button>
</body>
var btn = document.querySelector('button')
 btn.onclick = function(){
 console.log(1111);
}

方式二：DOM 2级事件绑定（事件侦听器语法）

标准浏览器

语法：事件源.addEventListener('事件类型','事件处理函数')

特点：同一个事件源的同一个事件类型绑定了多个事件处理函数，顺序绑定，顺序执行

IE低版本浏览器

语法：事件源.attachEvent(‘on事件类型’，‘事件处理函数‘)

特点：也可以绑定多个，但是是顺序绑定，倒序执行。

<body>
    <button>点我</button>
</body>
 btn.addEventListener('click',function(){
    console.log('1213');
    })
    btn.addEventListener('click',function(){
        console.log('1344');
    })

3.事件的解绑

解绑的语法：

dom 0级

事件源.on事件类型 = null

<body>
    <button>点我</button>

    <button class="btn2">解绑</button>
</body>
var btn=document.querySelector('button')
var btn2=document.querySelector('.btn2')
//先进行绑定
btn.onclick=function(){
    console.log('我被点击了');
}
btn2.onclick=function(){
    btn.onclick=null
    console.log('解绑成功');
}

dom2级解绑

语法：事件源.removeEventListener('事件类型',要解绑的事件处理函数)

注意：

只要带了function就是重新定义了一个函数，

所以需要把函数拿出来写成一个有名字的函数，绑定和解绑的时候都是用这个函数名字即可。

<body>
    <button>点我</button>
    <button class="btn2">解绑</button>
</body>
 var btn = document.querySelector('button')
    var btn2=document.querySelector('.btn2')
    btn.onclick = function () {
        console.log('我被点击了');
    }
    var fn = function () {
        console.log('我被执行了');
    }
    btn2.onclick = function () {
        btn.removeEventListener('click', fn())
        console.log('已经解绑');
    }

4.函数在内存中的运行情况

基本数据类型：存储在栈空间

复杂数据类型：变量名一般会存储在栈空间，数据会存储在堆空间，最后会把堆空间的地址给到变量名。

5.常见的事件类型

常见的事件类型：

鼠标事件

键盘事件

浏览器事件

表单事件

触摸事件（移动端）

等有很多事件种类

1. 鼠标事件：

依赖于鼠标行为而触发的一些事件类型

1.click====鼠标左键单击

2.dblclick====鼠标左键双击，双击执行1次，单击执行2次

3.contextmenu====鼠标的右键单击

4.mousedown====鼠标按下

5.mouseup====鼠标抬起

6.mousemove===鼠标移动，大概1s会触发60次左右

7.mouseover=====鼠标移入===子元素也会触发

8.mouseout=====鼠标移出===子元素也会触发

9.mouseenter====鼠标移入===子元素不会触发

10.mouseleave====鼠标移除===子元素不会触发

    var btn = document.querySelector('button')
    btn.onclick = function () {
        console.log('单击事件');
    }
    btn.ondblclick = function () {
        console.log('双击事件');
    }
    btn.oncontextmenu = function () {
        console.log('右键');
    }
    btn.onmousedown = function () {
        console.log('鼠标按下');
    }
    btn.onmouseup = function () {
        console.log('鼠标抬起');
    }
    btn.onmousemove = function () {
        console.log('鼠标移动');
    }
    btn.onmouseover = function () {
        console.log('鼠标移入');
    }
    btn.onmouseout = function () {
        console.log('鼠标移出');
    }
    btn.onmouseenter = function () {
        console.log('enter鼠标移入');
    }
    btn.onmouseleave = function () {
        console.log('leave鼠标移出');
    }

2.键盘事件：

依赖键盘行为触发的事件

所有的元素都可以绑定键盘事件，但是不一定都能触发。，

所以一般键盘事件都选择绑定在window、document、表单元素等可以选择的元素上

1.keydown======只要键盘按下了，就触发

2.keyup=====只要键盘抬起了，就触发

3.keypress====键盘键入事件

按下的按键真的会出现文本内容才可以,比如按上下左右键就不会触发

按下的内容必须要和出现的内容是一致的才可以

但是：回车键可以触发

<body>
    <div>hh</div>
    <input type="text">
</body>
    var inp = document.querySelector('input')
    inp.onkeydown=function(){
        console.log('按下了');
    }

3.表单事件：依赖于表单行为触发的事件

1.focus======表单聚焦事件（得到焦点就触发）

2.blur======表单失焦事件（失去焦点就触发）

3.change=====表单内容改变事件（聚焦和失焦的时候内容不一致就会触发）

4.input事件====表单输入事件（实时触发，只要有输入行为或者删除行为就触发）

5.submit事件====表单提交事件（只有form才有提交行为，所以需要绑定给form）

6.reset事件====表达的重置事件（只有form才有重置行为。所以需要绑定给form）

<body>
    <form action="">
        <input type="text">
        <input type="submit">
        <input type="reset">
    </form>
</body>
 var form = document.querySelector('form')
    form.onsubmit=function(){
        console.log('提交了');
    }
    form.onreset=function(){
        console.log('重置了');
    }

6.事件对象

1）事件对象：在事件对象当中会存储一些本次事件发生的时候产生的相关信息

事件对象是一个对象数据类型。

如何获取到事件对象呢：

直接在事件处理函数的位置书写一个形参即可，这个形参的名字可以随便去起，在事件触发的时候形参的值由浏览器自动进行赋值。

这个形参的名字可以随便去起,但是我们一般推荐用以下几个名字event eve evn e

ie低版本获取到事件对象的语法：window.event

如果需要考虑兼容问题语法：e = e || window.event

2）鼠标相关信息

一般我们都要拿到鼠标的坐标点

方案一：client

语法：事件对象.clientX 事件对象.clientY

得到的是：鼠标相对于浏览器可视窗口左上角的坐标点

方案二：page

语法：事件对象.pageX 事件对象.pageY

得到的是：鼠标相对于文档流左上角的坐标点

方案三：offset

语法：事件对象.offsetX 事件对象.offsetY

得到的是：鼠标相对于准确触发事件的元素左上角的坐标点

3）事件对象之键盘相关信息

事件对象.keyCode======可以得到你按下的键盘的编码

事件对象中以下4个信息

1.shiftkey

2.ctrlKey

3.altkey

4.metakey===代表的是window键

默认情况下以上4个信息都是false，当你按下对应键的时候结果就变成true。

<body>
    <input type="text">
</body>
var inp = document.querySelector('input')
    inp.onkeydown = function (e) {
        //要按组合键a(a=65),shift,ctrl才会打印结果1111
        if (e.keyCode === 65 && e.shiftKey===true && e.ctrlKey) {
            console.log('1111');
        }
    }

4）事件的传播

事件的传播机制（事件传播的3个阶段）

捕获====从window到目标的过程

目标===你准确触发事件的元素

冒泡===从目标到window的过程

默认值是冒泡，怎么改成捕获呢？（要想改只有在标准浏览器和dom2级绑定的语法中才可以）

在dom2级中，事件侦听器其实可以传递3个参数，第一个是事件类型，第二个是事件处理函数，第三个参数就可以决定是捕获还是冒泡

值写为true表示捕获

值写为false表示冒泡===默认值

注意：事件传播传播的是行为，当前行为是按照html结构走的。

7）阻止事件的传播

阻止冒泡的场景：

当父子元素都有格子的同类型事件。需求：点谁得到谁的背景颜色的色值。

阻止事件传播：

标准浏览器：事件对象.stopPropagation()

ie浏览器：事件对象.cancelBubble = true

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

<script>
    var bigboxEle=document.querySelector('.bigbox')
    var box=document.querySelector('.box')
    box.addEventListener('click',function(e){
        e.stopPropagation()
        console.log('dfb');
    })
    bigboxEle.onclick=function(){
        console.log('hbh');
    }
</script>

默认行为：不需要你绑定，天生存在的行为

超链接

form标签的提交行为

阻止默认行为(方案一)：

标准浏览器：事件对象.preventDefault()

ie低版本：事件对象.rerurnValue = false

阻止默认行为（方案二）：

直接写 return false

注意：这句写在最后，因为它有终止语句执行的作用。

<body>
    <a href="">aaaa</a>
    <form action="">
        <input type="text">
        <input type="submit">
    </form>
</body>

    var aEle = document.querySelector('a')
    var formEle = document.querySelector('form')
    aEle.onclick = function (e) {
         //a标签的默认跳转功能被阻止
         e.preventDefault()
         console.log('a');
         //return false
    }