JavaScript 事件监听

最新推荐文章于 2023-08-17 16:26:32 发布

chy1984

最新推荐文章于 2023-08-17 16:26:32 发布

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/chy_18883701161/article/details/106145340

版权

JavaScript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

<!-- onload可以写在body中，也可以在js脚本中写成window.onload事件监听 -->
<body onload="alert('onload');">

  <!-- js不区分单引、双引，字符串用单引、双引均可 -->
  <button id="btn" onclick="alert('click');">click me</button>

  <script>
    // window.οnlοad=function(){
    //   alert("onload");
    // }

    var ele=document.getElementById("btn");
    
    // 以属性的形式设置事件监听。可以写匿名函数
    ele.onmouseover=function(){
      console.log("mouseover");
    }

    function out(){
      console.log("mouseout");
    }

    // 也可以调用，注意只写函数名，函数名后面不加()
    // 加()表示调用，只在加载页面时执行1次，起不到事件监听的作用
    ele.onmouseout=out;

  </script>

</body>

事件监听可以以属性的形式写在html标签中，但不推荐这样做，因为和html页面内容杂糅在一起，东一处西一处，不好维护。

html只写页面结构、内容，css写页面样式，js完成交互（事件监听）。

样式尽量写在.css文件、style标签中，js代码尽量写在.js文件、script标签中，好维护一些，不要与html页面内容杂糅在一起。

常见的事件监听

#键盘按键，不包括鼠标按键
onkeydown  #按键按下
onkeypress  #按键按住
onkeyup  #释放按键
#这3个事件组成一个onclick事件，onclick事件在onkeyup之后触发


#鼠标按键
onmousedown
onmouseup


onclick  #单击
ondblclick  #双击
#键盘按键、鼠标按键的单双击都算


onmousedown  #鼠标移入的一刹那
onmousemove  #鼠标在该元素上移动
onmouseout  #⿏标移出


#表单元素
onchange  #元素值（value）改变
onfocus  #聚焦
onblur  #失焦
onsubmit  #提交


#页面加载完成
onload  #常用于body元素
window.onload  #在js脚本中可用onload还要先getElement获取元素，可以直接用这个，更简单

此外还有媒体播放onplay、拖放ondrag等。

事件监听是全小写

事件的绑定、解绑

var app=document.getElementById("app");

function out(){
  console.log("mouseover");
}

// 绑定事件监听。参数：事件、处理事件的函数，函数可以使用匿名函数，但使用匿名函数解绑不了
app.addEventListener("mouseover",out);

// 解除事件监听
app.removeEventListener("mouseover",out);

onmouseover这些带on的事件监听，其实都是对addEventListener()的封装，已经设置好了事件

事件冒泡

<div id="father">
    <div id="son"></div>
</div>

事件默认会逐级冒泡，会被所有设置了该事件监听的祖先元素处理。

eg. 父元素、子元素都监听了鼠标移入事件，如果子元素发生鼠标移入事件，事件先被子元素处理，再冒泡到父元素，被父元素处理，因为子元素也是父元素的一部分，也算父元素发生了该事件。

可以在某一级取消事件冒泡，取消之后该事件不再往上一级冒泡

var son=document.getElementById("son");

son.onmouseover=function(){
  //....   // 处理事件
  event.cancelBubble=true;  //取消事件冒泡。Bubble 冒泡
}

event是js预定义的事件对象名，表示一个事件对象。

如果不想使用这个名称，可以在参数表末尾写一个形参表示事件对象。

事件会自动传入。

键盘事件、键码

有时候需要监听指定的按键，比如按Enter发送消息，那就需要判断按下的键是不是Enter。

键盘上的每个按键都对应一个键码，键码是一个数字，根据键码来判断按下的是哪个键。

<input type="text" id="input" />

<script>
  var input=document.getElementById("input");

  input.onkeydown=function(){
    if(event.keyCode==13)
      console.log("你按了Enter");
     
    // 监听组合键
    if(event.ctrlKey && event.keyCode==67)
      console.log("你按了Ctrl+C");
  }
</script>

键码表参考：
https://www.bejson.com/othertools/keycodes/

组合键：ctrlKey、shiftKey、altKey
均为布尔值，如果按住了ctrl，那ctrlKey的值就是true，以此类推。

鼠标事件

有时候需要监听鼠标事件，比如左键按下、获取单击位置的坐标

var app=document.getElementById("app");

// 按下鼠标按键时
app.onmousedown=function(){
  // 键盘是keyCode，鼠标是button。鼠标左键是0，中键（滚轮）是1，右键是2
  if(event.button==0){  
    // 在浏览器中的横纵坐标，以浏览器左上角书签栏下面的地方为原点
    console.log(event.clientX);
    console.log(event.clientY);

    // 在屏幕上的横纵坐标，以屏幕左上角为原点
    console.log(event.screenX);
    console.log(event.screenY);
  }
}


// 释放鼠标按键时
app.onmouseup=function(){
  if(event.button==0){
    // 点击点的横纵坐标
    console.log(event.clientX);
    console.log(event.clientY);

    console.log(event.screenX);
    console.log(event.screenY);
  }
}

如果要获取鼠标拖放的起止位置，监听mousedown获取开始位置坐标，监听mouseup获取结束位置坐标

chy1984

关注

1
点赞
踩
5

收藏

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

目录事件监听的使用方式常见的事件监听事件的绑定、解绑事件冒泡键盘事件、键码鼠标事件 事件监听的使用方式  <body onload="alert('onload');">  <button id="btn" onclick="alert('click');"&g
复制链接

扫一扫