js事件处理

最新推荐文章于 2024-04-17 09:49:43 发布

娄笙悦

最新推荐文章于 2024-04-17 09:49:43 发布

阅读量639

点赞数 2

分类专栏：方法-技巧与案例文章标签： js事件详解冒泡捕捉

本文链接：https://blog.csdn.net/weixin_41424247/article/details/78848550

版权

方法-技巧与案例专栏收录该内容

28 篇文章 0 订阅

订阅专栏

事件的概念

指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。

事件处理过程3步骤

事件产生
事件对象event，在触发DOM上的某个事件的时候，会产生一个事件对象event，而在这个对象当中会包含着所有与事件有关的信息。
这个event对象通常含有一些重要的信息，比如：

srcElement
target
childNodes
innerHTML
innerText
nodeName
tagName
clientX
clientY
offsetX
offsetY
pageX
pageY
screenX
screenY
……

2.启动事件处理程序
用户在页面中进行的点击这个动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称。
即：click、mousemove、load等都是事件的名称。
响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。

onclick
ondblclick
onmousedown
onmouseup
onmousemove
onmouseover
onmouseout
onkeypress
onkeydown
onkeyup
……
onload
onresize
onscroll
……
onblur
onfocus
onchange
onsubmit
……

3.事件处理程序作出响应
通俗话语就是“对dom上的事件调用相应的处理程序，以实现所需功能”。

事件注册与移除监听器

给dom添加（注册）或者移除监听器，通常用以下方法实现（注意浏览器之间的区别）：

element.attachEvent(‘onclick’, observer); // IE
element.detachEvent(‘onclick’, observer); // IE
element.addEventListener(‘click’, observer, useCapture);
element.removeEventListener(‘click’, observer, useCapture);
//observer : function 回调函数
//useCapture :bolean[false](true 捕捉事件，false 冒泡事件)

事件触发流程

这里有两种机制（冒泡、捕获），一种是从树叶顺着枝干找树根，另一种则是通过顺根找到树叶。
默认方式是：冒泡机制

这里写图片描述

来几个小案例

获取按键信息

<input type="text" onkeydown="keyPressEvent(event)">
<script>
    function keyPressEvent(event){
        console.log(event); //当按下Enter的时候，能打印一系列跟该事件有关的信息
    }
</script>

利用onresize设置移动端rem单位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式rem设置</title>
    <meta name="viewport" content="width:device-width,maxin-scale:1.0,minxin-scale:1.0,initial-scale=1.0">
    <style>
        * {  margin: 0;  padding: 0;  }
        .box{  width: 20rem;  height:4rem;  background-color: red;  }
    </style>
</head>
<body>
<div class="box">hello world!</div>
<script>
    document.documentElement.style.fontSize = 24 / 640 * document.documentElement.clientWidth + 'px';
    window.onresize = function(){
        document.documentElement.style.fontSize = 24 / 640 * document.documentElement.clientWidth + 'px';
    };
</script>
</body>
</html>

娄笙悦

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js事件处理

事件的概念指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便事件发生的时候执行相应的代码。事件处理过程3步骤事件产生事件对象event，在触发DOM上的某个事件的时候，会产生一个事件对象event，而在这个对象当中会包含着所有与事件有关的信息。这个event对象通常含有一些重要的信息，比如：srcElementtargetchildN
复制链接

扫一扫