javascript事件

✪憑星月✪

已于 2022-05-24 22:13:25 修改

阅读量88

点赞数

分类专栏： javascript学习笔记文章标签： javascript 开发语言 ecmascript

于 2022-05-22 15:49:29 首次发布

本文链接：https://blog.csdn.net/qq_61716556/article/details/124849477

版权

javascript学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

事件简介

事件类型

事件类型是一个用来说明发生什么类型事件的字符串。例如onmousemove onclick。事件类型是一个字符串，实际上也可以说事件类型就是事件名字。

事件源:

事件源是发生的事件或与之相关的对象。window的onload事件,按钮的onclick事件都具有指定的对象。一般对象可以分为window,document,Element。

事件处理程序

事件处理程序或事件监听程序是处理或响应事件的函数。当特定的目标上发生了特定类型的事件时，浏览器会调用相应的事件处理程序。

事件对象

事件对象是与该事件相关并包含该事件详细信息的对象。事件对象可以作为事件处理函数的参数传递给函数。

为一个元素绑定事件

在未绑定事件处理函数时，在元素上发生了的事件不会触发函数，没有效果出现。需要为网页加上各种动态效果时需要为元素绑定事件处理函数。事件处理函数一般自定义，比如未按钮添加功能，功能类型根据实际效果可以有很大不同，比如轮播图的翻页，音乐的切换，背景图片的切换等。

<div id="box"></div>
  <script>
    var box=document.getElementById("box");
    box.onclick=function changeColor(){
      if(box.style.backgroundColor=="black")
      box.style.backgroundColor="red";
      else
      box.style.backgroundColor="black";
    }
    box.onmouseleave=changeColor();
  </script>

这是一个绑定点击事件的div。

我们可以获取事件元素，为事件元素的某一事件添加事件函数，来实现绑定事件操作。

我们也可以使用addEventListener方法来为事件元素绑定事件函数。虽然直接绑定事件函数和使用这个addEventListener都可以实现绑定事件，但为同一元素的同一事件直接绑定不同函数会使后者覆盖前者，使用addEventListener方法却不会发生覆盖现象。

这个方法需要三个参数。分别是事件类型的字符串，事件函数，冒泡传递还是捕获传递的布尔值。

注意：事件类型的字符串前面没有on作为前缀，如onclick只需要写click，但必须是字符串。

事件函数会在事件触发时执行，可以直接定义一个函数，也可以使用已经定义好的函数。

冒泡传递还是捕获传递需要根据布尔值确定，默认值false，冒泡传递。取值为ture时为捕获传递。

<div id="box"></div>
  <script>
    var box=document.getElementById("box");
    box.onclick=function changeColor(){
      if(box.style.backgroundColor=="black")
      box.style.backgroundColor="red";
      else
      box.style.backgroundColor="black";
    }
    //使用以下两个绑定方式可以区分两种方式的差别
    // box.onclick=function(){
    //   box.innerHTML="点击出现";
    // };//这里会覆盖了上一个onclick事件函数
    //-------------------------
    // box.addEventListener("click",function(){box.innerHTML="另一个函数执行"},false)
    // //addEventListener方法不会覆盖上一个绑定过的事件
  </script>

冒泡传递和捕获传递的区别：

当子元素父元素具有相同事件时，触发子元素的事件的同时父元素的同一事件也会触发。

在冒泡传递情况下，子元素的事件先触发，父元素的事件后触发。addEventListener第三个参数为false。

在捕获传递的情况下，父元素的事件先触发，子元素的事件后触发。addEventListener()第三个参数为ture。

<!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>测试</title>
  <link rel="stylesheet" href="">
  <style>
    div{
      width: 100px;
      height:100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="son"></div>
  </div>
  <script>
    var div=document.querySelector("div");
    var son=document.getElementById("son");
    // 这里为冒泡传递，先子后父
    // div.addEventListener("click",function(){console.log("父元素被点击"),false});
    // son.addEventListener("click",function(){console.log("子元素被点击")},false);
    // 这里为捕获传递，先父后子
    // div.addEventListener("click",function(){console.log("父元素被点击")},true);
    // son.addEventListener("click",function(){console.log("子元素被点击")},true);
    </script>
</body>
</html>

事件处理程序的返回值

自定义函数中指定事件处理程序(函数)的返回值可以阻止部分操作。如：在表单中提交按钮的事件处理程序中返回false使得浏览器不会执行提交操作。如果表单内容出错，可以通过返回false阻止提交。在输入框中指定onkeypress(后文文本事件中出现)返回false来阻止非法文本的输入。

键盘事件

按键分为辅助键，功能键，和字母数字键。

当按下或者释放按键时，会发生keydown,keyup事件。当持续按下按键时，会发生多个keydown事件，松开时发生一个keyup事件。

键盘事件的事件对象具有keyCode属性，指定按下按键的Unicode编码。值得注意的是，不论是否按住shift指定大写字母，字母的Unicode编码一样，都是大写字母。按住shift再点击数字来输出标点符号时产生的都是数字对应的Unicode编码，而不是那些标点符号对应的编码。

<!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>测试</title>
  <link rel="stylesheet" href="">
  <style>
    div{
      width: 100px;
      height:100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box">
  </div>
  <script>
    document.onkeydown=function(event){
      console.log(event.keyCode);
    };
    </script>
</body>
</html>

键盘事件对象具有多个属性,值为布尔值。如,metaKey,altKey,shiftKey,ctrlKey等。当对应的按键被按下时，这些属性的值为真，反之为假。其中的meta是win键(如图)。

    document.onkeydown=function(event){
      if(event.altKey)
      console.log("按下的是alt按键");
      else if(event.metaKey)
      console.log("按下的是meta按键");
      else if(event.ctrlKey)
      console.log("按下的是ctrl按键")
    };

属性key取值为按下的按键名的字符串。

    document.onkeydown=function(event){
      console.log(event.key);
    };

文本事件

文本框内容发生变化，会触发文本事件。文本事件有onchange(),textInput(),onkeypress()等

onchange事件，针对input type=text 只有文本改变并且焦点改变后才会触发。对于input type=range 来说，改变游标时就会生效。

    <input id="box" type="range" min="0" max="20" step="1">
    <span id="text"></span>
    <script>
    var box=document.getElementById("box");
    var text=document.getElementById("text");
    box.onchange=function(){
      text.innerHTML=box.value;
    }
    </script>

onkeypress事件在某元素中按下按键时触发。可以是文本框内输入字符，也可以是在document上按下任意按键。

textInput事件通过addEventListener方法赋予到某元素上。不存在ontextInput。针对文本改变的情况，backspace，换行都不会触发这个事件。针对文本改变，所以对于不能输入文本的元素不生效。

  var box=document.getElementById("box");
  // box.onkeypress=function(){
  //   console.log("输入成功");//针对换行仍有效
  // }
  box.addEventListener("textInput",function(){console.log("2");},false);
  //输入换行无效

oninput事件，相对于onchange，不需要移除焦点就可以触发。对于换行，回车等都可以检测并触发该事件。

  <input id="box" type="text">
  <script>
  var box=document.getElementById("box");
  box.oninput=function(){
    console.log("输入了内容");//不需要移除焦点
  }
  </script>

鼠标滚轮事件

onwheel是针对鼠标滚轮的事件，发生滚动时触发。不论是否页面存在滚动条，这一点与onscroll事件不一样。这个方法之前不被火狐浏览器支持，现在也可以在火狐浏览器上使用。

    document.onwheel=function(){console.log("发生滚动");}//鼠标滚轮发生滚动时触发
    document.onscroll=function(){console.log("页面滚动条发生滚动")}//页面滚动条发生滚动时触发

鼠标事件

click	高级事件，当用户按下并释放鼠标按键,或其他方式"激活"元素时触发(比如调用其他函数)
dbcilck	当用户双击鼠标时触发
contextmenu	可以取消的事件，当上下文菜单即将出现时触发。一般为鼠标右键触发。
focus	获得鼠标焦点时触发
blur	失去鼠标焦点时触发
mousedown	当用户按下鼠标按键时触发
mousemove	当用户移动鼠标时触发
mouseup	当鼠标松开时触发
mouseover	当鼠标进入元素时触发
mouseout	当鼠标离开元素时触发
mouseenter	类似mouseover，但不冒泡
mouseleave	类似mouseout，但不冒泡

实际使用这些事件时直接添加事件需要加上on，使用addEventListener添加事件时不需要加on。

<!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>测试</title>
  <link rel="stylesheet" href="">
  <style>
    div{
      width: 100px;
      height:100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <input type="text" name="" id="ipt">
  <script>
    var div=document.getElementById("box");
	var ipt=document.getElementById("ipt");
    div.onclick=function(){console.log("被点击了")}
    div.ondblclick=function(){console.log("被双击了");}
    div.onmousedown=function(){console.log("鼠标某键被按下");}
    div.onmousemove=function(){console.log("鼠标移动")}
    div.onmouseup=function(){console.log("鼠标某键松开了");}
    div.oncontextmenu=function(){console.log("菜单打开");};
    div.onmouseover=function(){console.log("鼠标进入")}
    div.onmouseout=function(){console.log("鼠标离开");}
	ipt.onfocus=function(){console.log("聚焦了");};
	ipt.onblur=function(){console.log("失焦了");};
  </script>
</body>
</html>

以上实际使用了多个事件，部分事件因效果重复而没有涉及。

文档加载事件load

window对象具有load事件。这个事件直到文档和所有图片加载完毕时才会发生。常常见于在head引入的script中，把其他语句包含，避免获取元素时元素尚未加载，获取元素失败。

移除事件

针对直接添加的on类事件可以通过直接赋值为null来移除事件。对于使用addEventListener方法注册的事件需要使用removeEventListener()方法。这个方法的参数和addEventListener类似，第一个参数是表示事件类型的字符串，第二个是需要从事件元素上移除的事件函数，第三个是指定是否冒泡的布尔值。需要注意的是，如果指定冒泡传递，就需要在移除时指定冒泡传递。同时设置两种传递方式需要分别移除。

由于笔者能力有限，本文内容如有不足或错误，欢迎指正。

✪憑星月✪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript事件

事件类型事件类型是一个用来说明发生什么类型事件的字符串。例如onmousemove onclick。事件类型是一个字符串，实际上也可以说事件类型就是事件名字。事件目标:事件目标是发生的事件或与之相关的对象。window的onload事件,按钮的onclick事件都具有指定的对象。一般对象可以分为window,document,Element。事件处理程序事件处理程序或事件监听程序是处理或响应事件的函数。当特定的目标上发生了特定类型的事件时，浏览器会调用相应的事件处理程序。事件对象是与
复制链接

扫一扫