JS事件详解(上)

js 同时被 2 个专栏收录
2 篇文章 0 订阅
4 篇文章 1 订阅

在这里插入图片描述

一.什么是事件

01.事件的概念

事件是发生并得到处理的操作,即:事情来了,然后处理。
如:
 1、电话铃声响起(事件发生) ---需要接电话(事件处理) 
 2、学生举手请教问题(事件发生) —需要解答(事件处理) 
 3、9点半提醒大家开始上课(事件发生)---打开直播开始上课(事件处理) 
 4、按钮被点击了(事件发生), ---网页会反馈(事件处理)

---- 事件绑定 :在这里插入图片描述---- 事件绑定:
在这里插入图片描述

1.1 事件绑定模型:

  • JavaScript 有两种事件绑定模型:内联模型、外联(脚本)模型.

事件绑定—内联模式

  • 这种模型是最传统接单的一种处理事件的方法。在内联模型中,事件处理函 数是 HTML 标签的一个属性,用于处理指定事件。虽然内联在早期使用较多,但 它是和 HTML 混写的, 并没有与 HTML分离。

在这里插入图片描述

事件绑定—外联(脚本)模式

  • 由于内联模型违反了 HTML 与 JavaScript 代码层次分离的原则。为了解决这个问题,我们可以在 JavaScript中处理事件。这种处理方式就是外联(脚本)模型。
    在这里插入图片描述

二.常见事件类型

JavaScript 可以处理的事件类型为:⿏标事件、键盘事件、HTML 事件。

  1. ⿏标事件⻚⾯所有标签都可以触发

    click: 当用户单击鼠标按钮或按下回车键时触发 
    dblclick: 当用户双击主鼠标按钮时触发。 
    mousedown:当用户按下了鼠标还未弹起时触发。 
    mouseup: 当用户释放鼠标按钮时触发。 
    mouseover: 当鼠标移到某个元素上方时触发。 
    mouseout: 当鼠标移出某个元素上方时触发。 
    mousemove: 当鼠标指针在元素上移动时触发。
    
  2. 键盘事件表单和全局window)

    keydown: 当用户按下键盘上任意键触发,如果按住不放,会重复触发。
    keypress: 当用户按下键盘上的字符键触发,如果按住不放,会重复触发。 
    keyup: 当用户按下了鼠标还未弹起时触发。
    
  3. HTML事件(window事件,全局window)

    load: 当页面完全加载后在 window 上面触发,或当框架集加载完毕后在框架集上触发。 
    unload:当页面完全卸载后在 window 上面触发,或当框架集卸载后在框架集上触发。 
    scroll: 当用户滚动带滚动条的元素时触发。 
    resize: 当窗口或框架的大小变化时在 window 或框架上触发。
    
  4. HTML事件(表单事件)

    blur: 当页面或元素失去焦点时在 window 及相关元素上触发。 
    focus: 当页面或者元素获得焦点时在 window 及相关元素上面触发。 
    select: 当用户选择文本框(input 或 textarea)中的一个或多个字符触发。 
    change: 当文本框(input 或 textarea)内容改变且失去焦点后触发。 
    submit: 当用户点击提交按钮在<form>元素上触发。 
    reset: 当用户点击重置按钮在<form>元素上触发。
    

三.事件对象

事件对象(番茄炒蛋)在这里插入图片描述

顶级国民料理:番茄+鸡蛋+调味料=番茄炒蛋

在这里插入图片描述
3.1 事件对象(如何产⽣)
在这里插入图片描述

那么问题来了:如何拿到事件对象呢?

3.2 拿到事件对象

  • 事件绑定
    元素节点.on + 事件类型 = 匿名函数;
    事件对象:一旦完成事件绑定操作,就会产生一个事件对象(系统根据事件绑定自动生成的)。
    【注】当点击按钮以后,系统会调用这个函数,系统会自动将事件对象,传入到函数的第一个参数。
    【注】但问题是,点击按钮以后,函数是我们自己调用的么?
  • 标准写法:
    在这里插入图片描述

四. 时间对象属性

  • button属性(⿏标事件)
    在这里插入图片描述
/*
            button
                0 左键
                1 滚轮
                2 右键
        */

        window.onload = function(){
            document.onmousedown = function(ev){
                var e = ev || window.event;
                alert(e.button);//0或者1或者2
            }
    }
  • 获取⿏标坐标的属性

      clientX clientY 原点位置,窗口可视区域左上角为原点 
      pageX pageY     原点位置,整个页面的左上角(带滚动高度) 
      screenX screenY 原点位置,整个屏幕的左上角 
      offsetX offsetY 相对于当前被按下标签的左上角
    
  • 修改键属性

      有时,我们需要通过键盘上的某些键来配合⿏标来触发⼀些特殊的事件。
      这些键为:Shfit、Ctrl、Alt 和 Meat(Windows中就是Windows 键,苹果机中是command 键),
      它们经常被⽤来修改⿏标事件和⾏为,所以叫修改键。
    

在这里插入图片描述

  • 键盘事件对象属性(键码)

      在发生 keydown 和 keyup 事件时,event对象的keyCode属性,keyCode属性的值
     与ASCII 码中对应大写字母或数字的编码相同。字母中大小写不影响。
    
      //keyCode 键码只在keydown下支持(支持全键盘)
      //【注】键码返回当前按下键的ASCII值,但是统一返回大写字母的ASCII码值		
      //跨浏览器兼容:var which = e.which || e.keycode;
       window.onkeydown = function(ev){
            var e = ev || window.event;
            //alert(e.keycode);
            var which = e.which || e.keycode;
            alert(which);
        }
  • 键盘事件对象属性(字符码)

     Firefox、Chrome和Safari的event 对象都支持一个charCode属性,
     这个属性只有在发生 keypress 事件时才包含值,而且这个值是按下的那个键所代表字符的 ASCII 编码。此时的keyCode通常等于0。
    
	  //keyCode 键码只在keypress下支持(只支持字符键)
      //【注】键码返回当前按下键的ASCII值,区分大小写
      //跨浏览器兼容:var which = e.charCode || e.which;
 		window.onkeypress = function(ev){
            var e = ev || window.event;
            //alert(e.keycode);
            var which =  e.charCode || e.which;
            alert(which);
        }

五. 事件监听器

在这里插入图片描述

  • 浏览器兼容IE8以下
  function addEvent(node,eventType,funcName){
            if(node.addEventListener){
                node.addEventListener(eventType,funcName,false);
            }else{
                node.attachEvent("on" + eventType,funcName);
            }
        }
        function removeEvent(node,eventType,funcName){
            if (node.removeEventListener) {
                node.removeEventListener(eventType,funcName);
            }else{
                node.detachEvent("on" + eventType,funcName);
            }
        }

六. mouseenter和mouseleave的区别

类似mouseover,它们两者之间的差别是mouseenter 不会冒泡(bubble),也就是说当指针从它的⼦层物理空间移到它的物理空间上时不会触发,
同理类似mouseout,它们两者之间的差别是mouseleave 不会冒泡(bubble),也就是说当指针从它的⼦层物理空间移到它的物理空间上时不会触发

【注】在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件。有时候,我们需要使用,mouseenter事件来防止子元素的冒泡,这就涉及到事件兼容性的问题了。
在这里插入图片描述

结: 以上就是js事件的重点,希望对正在学习的各位有所帮助,整理不易,看到的大佬和小伙伴们帮忙点点赞关注一哈据说长得好看的人点都点赞了😄),谢谢

©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页

打赏作者

抱着猫睡觉的鱼_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值