JavaScript事件

最新推荐文章于 2023-04-24 14:09:01 发布

努力做一只合格的前端攻城狮

最新推荐文章于 2023-04-24 14:09:01 发布

阅读量2.1k

点赞数 6

分类专栏： Javascript 文章标签： javascript 前端 firefox

本文链接：https://blog.csdn.net/shao_xuan_/article/details/121705510

版权

Javascript 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

JavaScript事件

注册事件
删除事件
事件对象
事件对象的使用
事件对象的常见属性和方法
阻止事件冒泡
鼠标事件
鼠标事件对象
键盘事件的常用方法
键盘事件对象

注册事件

在JavaScript中，注册事件（绑定事件）有两种方式，即传统方式注册事件和事件监听方式注册事件。

1、传统方式

元素对象.事件 = 事件的处理程序;
// 示例
oBtn.onclick = function () {  }

注意：该方式注册事件的特点在于注册事件的唯一性，即同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数。

2、事件监听方式

由于不同浏览器采用的事件流实现方式不同，事件监听的实现存在兼容性问题。通常根据浏览器的内核，可以把浏览器划分为两大类，一类是早期版本的IE浏览器（如IE 6~IE 8），一类是遵循W3C标准的浏览器（以下简称标准浏览器）。

注意：该方式注册事件的特点在于可以给同一个DOM对象的同一个事件添加多个事件处理程序。

早期IE内核的浏览器，事件监听方式如下：

DOM对象.attachEvent(type, callback);

type:DOM对象绑定的事件类型，如onclick.。

callback：事件的处理程序。

标准浏览器，包括IE8版本以上的IE浏览器，以及新版的Firefox、Chrome等浏览器，事件监听方式如下：

DOM对象.addEventListener(type, callback, [capture]);

type：DOM对象绑定的事件类型，如click。

callback：事件的处理程序。

capture：默认为false，表示冒泡阶段完成事件处理，true为捕获阶段完成事件处理。

删除事件

事件监听的移除也需要考虑兼容性问题，示例代码如下。

DOM对象.onclick = null;                        	     // 传统方式删除事件
DOM对象.detachEvent(type, callback);	     // 早期版本IE浏览器
DOM对象.removeEventListener(type, callback);  // 标准浏览器

事件对象

当一个事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是event。只有有了事件event才会存在，它是系统自动创建的，不需要传递参数。

事件对象的使用

在标准浏览器中会将一个event对象直接传入到事件处理程序中，而早期版本的IE浏览器（IE 6~IE 8）中，仅能通过window.event才能获取事件对象。

var 事件对象 = window.event        	// 早期IE内核浏览器
DOM对象.事件 = function (event) {}	// W3C内核浏览器

注意：因为在事件触发时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。所以，在事件处理函数中需要用一个形参来接收事件对象event。

事件对象的常见属性和方法

在事件发生后，事件对象event中会包含一些所有事件都有的属性和方法。所有事件基本上都包括的常用的属性和方法如下表所示。

属性	说明	浏览器
e.target	返回触发事件的对象	标准浏览器
e.srcElement	返回触发事件的对象	非标准IE 6-IE 8使用
e.type	返回事件的类型	所有浏览器
e.stopPropagation()	阻止事件冒泡	标准浏览器
e.cancelBubble	阻止事件冒泡	非标准IE 6-IE 8使用
e.preventDefault()	阻止默认事件（默认行为）	标准浏览器
e.returnValue	阻止默认事件（默认行为）	非标准IE 6-IE 8使用

对比e.target和this的区别

在事件处理函数中，e.target返回的是触发事件的对象，而this返回的是绑定事件的对象。因为e.target支持IE9以上，所以编写以下代码，处理兼容性问题。

div.onclick = function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;
  console.log(target);
}

阻止默认行为

在实际开发中，为了使程序更加严谨，想要确定含有默认行为的标签符合要求后，才能执行默认行为时，可利用事件对象的preventDefault()方法和returnValue属性，禁止所有浏览器执行元素的默认行为。需要注意的是，只有事件对象的cancelable属性设置为true，才可以使用preventDefault()方法取消其默认行为。

阻止事件冒泡

可以利用事件对象调用stopPropagation()方法和设置cancelBubble属性，实现禁止所有浏览器的事件冒泡行为。

if (window.event) {		// 早期版本的浏览器
  window.event.cancelBubble = true;
} else {				// 标准浏览器
  e.stopPropagation();
}

鼠标事件

鼠标是计算机的一种输入设备，也是计算机显示系统纵横坐标定位的指示器，所以鼠标事件是Web开发中最常用的一类事件。常见的鼠标事件如下表所示：

事件名称	事件触发时机
onclick	单击鼠标左键时触发
onfocus	获得鼠标指针焦点触发
onblur	失去鼠标指针焦点触发
onmouseover	鼠标指针经过时触发
onmouseout	鼠标指针离开时触发
onmousedown	当按下任意鼠标按键时触发
onmouseup	当释放任意鼠标按键时触发
onmousemove	在元素内当鼠标指针移动时持续触发

禁止鼠标右击菜单

contextmenu主要控制应该何时显示上下文菜单，主要应用于程序员取消默认的上下文菜单，示例代码如下。

document.addEventListener('contextmenu', function (e) {
  e.preventDefault();
})

禁止鼠标选中
selectstart事件是鼠标开始选择文字时就会触发，如果禁止鼠标选中，需要禁止该事件的默认行为，示例代码如下。

document.addEventListener('selectstart', function (e) {
  e.preventDefault();
})

鼠标事件对象

鼠标事件对象MouseEvent，是跟鼠标事件相关的一系列信息的集合，可以用来获取当前鼠标的位置信息，鼠标事件位置属性如下表所示。

位置属性（只读）	描述
clientX	鼠标指针位于浏览器页面当前窗口可视区的水平坐标（X轴坐标）
clientY	鼠标指针位于浏览器页面当前窗口可视区的垂直坐标（Y轴坐标）
pageX	鼠标指针位于文档的水平坐标（X轴坐标），IE 6~IE 8不兼容
pageY	鼠标指针位于文档的垂直坐标（Y轴坐标），IE 6~IE 8不兼容
screenX	鼠标指针位于屏幕的水平坐标（X轴坐标）
screenY	鼠标指针位于屏幕的垂直坐标（Y轴坐标）

IE 6~IE 8浏览器中不兼容pageX和pageY属性，在项目开发时需要对IE 6~IE 8浏览器进行兼容处理，示例代码如下所示。

var pageX = event.pageX || event.clientX + (document.body.scrollLeft ||document.documentElement.scrollLeft)
var pageY = event.pageY || event.clientY + (document.body.scrollTop ||document.documentElement.scrollTop)

图片跟随鼠标移动并在下方显示坐标

案例需求：简单实现图片跟随鼠标移动的效果（不考虑兼容性）。

案例分析：需要使用鼠标指针移动事件mousemove，每次鼠标移动，都会获得最新的鼠标指针坐标，把这个x和y坐标作为图片的top和left 值就可以实现图片的移动。

效果展示
在这里插入图片描述
代码实现

<!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>
</head>
<style>
    div{
        /* width: 100px;
        height: 100px; */
        /* display: block; */
        /* background-color: aqua; */
        position: absolute;
        top:2px;
        cursor:pointer;
    }
    img{
        width: 70px;
        height: 50px;
        position: absolute;
        top:2px;
    }
</style>
<body>
    <img src="../../2021-9-25/2021-11-26/code/images/angel.gif" alt="">
    <div></div>
    <script>
        var pic1 = document.querySelector('img');
        document.addEventListener('mousemove',function(e){
            var e = e||window.event;
            var x = e.pageX;
            var y = e.pageY;
            pic1.style.left = x+'px';
            pic1.style.top = y+'px'
        })
    </script>
    <script>
        var pic = document.querySelector('div');
        document.addEventListener('mousemove',function(e){
            var x = e.pageX;
            var y = e.pageY;
            pic.style.left = x+'px';
            pic.style.top = y+50+'px';
            

            var z = ('('+x+','+y+')');
            pic.innerText = z;
        })
    </script>
</body>
</html>

键盘事件的常用方法

键盘事件是指用户在使用键盘时触发的事件。例如，用户按Esc键关闭打开的状态栏，按Enter键直接完成光标的上下切换等。常用的键盘事件如下表所示。

事件名称	事件触发时机
keypress	某个键盘按键被按下时触发，不识别功能键，如Ctrl、Shift、箭头等
keydown	某个键盘按键被按下时触发
keyup	某个键盘按键被松开时触发

注意
keypress事件保存的按键值是ASCII码，keydown和keyup事件保存的按键值是虚拟键码，keydown和keypress如果按住不放的话，会重复触发该对应事件。keyup和keydown事件不区分字母大小写，而keypress区分字母大小写。

键盘事件对象

键盘事件对象KeyBoardEvent，是跟键盘事件相关的一系列信息的集合，根据键盘事件对象中的keyCode属性可以得到相应的ASCII码值，进而可以判断用户按下了哪个键。

演示

<!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>
</head>
<body>
    <script>
        document.addEventListener('keypress',function(e){
            console.log('keypress');
            console.log(e.keyCode);
            console.log(e);

        })

        document.addEventListener('keydown',function(e){
            console.log('keydown');
            console.log(e.keyCode);
            console.log(e);
        })

        document.addEventListener('keyup',function(e){
            console.log('keyup');
            console.log(e.keyCode);
            console.log(e);
        })
    </script>
</body>
</html>

在这里插入图片描述
文本框提示信息
案例需求：在现实生活中，我们经常会使用快递单号查询功能，查看商品的物流信息状态。有时在用户输入单号时，网站为了让用户看清楚输入的内容，会在文本框上方显示一个提示栏，将用户输入的数字放大。

案例分析：当用户在文本框中输入内容时，文本框上面自动显示大号字的内容。如果用户输入为空，需要隐藏大号字内容。

成果展示

在这里插入图片描述
代码实现

<!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>
</head>
<style>
    .search{
        position: relative;
        width: 300px;
        margin: 100px auto;
    }
    .con{
        display: none;
        position: absolute;
        top: -40px;
        left: 80px;
        width: 171px;
        border: solid 1px rgba(0,0,0,.2);
        box-shadow: 0 2px 4px rgba(0,0,0,.2);
        padding: 5px 0;
        font-size: 18px;;
        line-height: 20px;
        color: #333;
    }
    .con::before{
        content:'';
        width: 0;
        height: 0;
        position: absolute;
        top: 28px;
        left: 18px;
        border: 8px solid #000;
        border-color: #fff transparent transparent;
        border-style: solid dashed dashed;
    }
</style>
<body>
    <div class="search">
        <div class="con"></div>
        <label for="">
            快递单号：
            <input type="text" placeholder="请输入快递单号" class="num">
        </label>
    </div>
    <script>
        var con = document.querySelector('.con');
        var num = document.querySelector('.num');
        num.addEventListener('keyup',function(){
            if(this.value==''){
                con.style.display = 'none';
            }else{
                con.style.display = 'block';
                con.innerText = this.value;
            }
        })

        //给input注册焦点事件
        num.addEventListener('blur',function(){
            con.style.display = 'none';
        })
        num.addEventListener('focus',function(){
            if(this.value!==''){
                con.style.display = 'block';
            }
        })
    </script>
</body>
</html>

努力做一只合格的前端攻城狮

关注

6
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript事件

JavaScript事件注册事件删除事件事件对象事件对象的使用事件对象的常见属性和方法阻止事件冒泡鼠标事件鼠标事件对象键盘事件的常用方法键盘事件对象注册事件在JavaScript中，注册事件（绑定事件）有两种方式，即传统方式注册事件和事件监听方式注册事件。1、传统方式元素对象.事件 = 事件的处理程序;// 示例oBtn.onclick = function () { }注意：该方式注册事件的特点在于注册事件的唯一性，即同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前
复制链接

扫一扫