js事件

最新推荐文章于 2021-06-22 22:59:03 发布
最新推荐文章于 2021-06-22 22:59:03 发布
阅读量223 收藏 2
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41340792/article/details/114259910
版权

文档碎片

1.创建50W个节点，添加到页面上。
50W个创建 50W次插入
2.先创建50W个节点，将50W节点插入到一个节点中，再将这个节点插入到页面中。

JS事件

1.什么是事件
一件事情发生了，对其进行处理或者响应。
2. 事件的三要素
事件源，事件类型，事件处理
比如：点击右上角的X，页面关闭。 事件源：X，事件类型：点击 事件处理：页面关闭。
谁引发的后续事件，谁就是事件源。

事件源：DOM节点（一般为元素节点）
事件类型
事件处理 函数（代码块）

事件类型：
1.鼠标事件
2.键盘事件
3.浏览器事件
4.表单事件

1.鼠标事件

click == 鼠标左键单击

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onclick = function() {
                console.log("鼠标左键单击");
            }
        }
    </script>

dbclick == 鼠标左键双击

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.ondbclick  = function() {
                console.log("鼠标左键双击");
            }
        }
    </script>

contextmenu == 鼠标右键单击

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.oncontextmenu   = function() {
                console.log("鼠标右键单击");
            }
        }
    </script>

mousewheel == 鼠标滚动

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onmousewheel  = function() {
                console.log("鼠标滚动");
            }
        }
    </script>

mousedown == 鼠标单击事件 不管是左键还是右键，还是滚动都可以触发

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onmousedown = function() {
                console.log("鼠标点击");
            }
        }
    </script>

button：用来表示咱们按下的是哪一个按键
0 左键
1 滚轮
2 右键

 <body>
    <div id="box"></div>
</body>
    <script>
        window.onload = function() {
             var box = document.getElementById("box");
            box.onmousedown = function(event) {
                var event = event || window.event;
                console.log(event.button);

                if (event.button == 0) {
                    console.log("鼠标左键按下");

                } else if (event.button == 1) {
                    console.log("鼠标滚轮按下");

                } else if (event.button == 2) {
                    console.log("鼠标右键按下");

                }
            }
        }
    </script>

在这里插入图片描述

mouseup == 鼠标抬起

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onmouseup = function() {
                console.log("鼠标抬起");
            }
        }
    </script>

mousemove == 鼠标移动

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onmousemove  = function() {
                console.log("鼠标移动");
            }
        }
    </script>

mouseover、mouseout会引发事件传播
mouseover == 鼠标移入

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onmouseover = function() {
                console.log("鼠标移入");
            }
        }
    </script>

mouseout == 鼠标移出

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onmouseout  = function() {
                console.log("鼠标移出");
            }
        }
    </script>

mouseenter == 鼠标移入

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onmouseenter  = function() {
                console.log("鼠标移入");
            }
        }
    </script>

mouseleave == 鼠标移出

    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onmouseleave  = function() {
                console.log("鼠标移出");
            }
        }
    </script>

2.键盘事件

不是所有的元素都能触发
表单元素(选中效果)，document ,window

keydown
键盘按下


<body>
    <input type="text">
</body>
<script>
        window.onload = function() {
            var inp = document.querySelector("input");
            inp.onkeydown = function(event) {
                var event = event || window.event;
                console.log("键盘按下");

            }
        }
    </script>

在这里插入图片描述

keypress
键盘按下
在文本框中输入的内容必须与你按下的键是一致的


<body>
    <input type="text">
</body>
<script>
        window.onload = function() {
            var inp = document.querySelector("input");
            inp.onkeypress = function(event) {
                var event = event || window.event;
                console.log("键盘按下");

            }
        }
    </script>

在这里插入图片描述

keyup
键盘抬起


<body>
    <input type="text">
</body>
<script>
        window.onload = function() {
            var inp = document.querySelector("input");
            inp.onkeyup = function(event) {
                var event = event || window.event;
                console.log("键盘抬起");
            }
        }
    </script>

在这里插入图片描述

3.浏览器事件

又称window事件

load 页面加载完毕后执行函数体

<script>
        window.onresize = function() {
            console.log("hhh");
        }
    </script>

scroll 页面滚动

<script>
		//当页面滚动时执行函数体
        window.onresize = function() {
            console.log("hhh");
        }
    </script>

resize 窗口尺寸改变

<script>
		//浏览器窗口大小发生变化时执行函数体
        window.onresize = function() {
            console.log("hhh");
        }
    </script>

offline 网络断开

<script>
		//浏览器断网时执行函数体
        window.onoffline = function() {
            console.log("hhh");
        }
    </script>

online 网络恢复

<script>
		//浏览器网络恢复时执行函数体
        window.ononline = function() {
            console.log("hhh");
        }
    </script>

4.表单事件

表单事件：
失去焦点
blur
获取焦点
focus
提交：
submit
重置：
reset
表单事件主要是表单元素和form标签的
change 表单内容发生改变时，而且已经失去焦点时触发。

<body>
    <input type="text">
</body>
<script>
        window.onload = function() {
            var inp = document.querySelector("input");
            inp.onchange = function() {
                console.log(inp.value);

            }
        }
    </script>

input 表单输入事件

<body>
    <input type="text">
</body>
<script>
        window.onload = function() {
            var inp = document.querySelector("input");
            inp.oninput = function() {
                console.log(inp.value);

            }
        }
    </script>

在这里插入图片描述

focus 获取焦点

<body>
    <input type="text">
</body>
<script>
        window.onload = function() {
            var inp = document.querySelector("input");
            inp.onfocus  = function() {
                console.log(inp.value);

            }
        }
    </script>

在这里插入图片描述

blur 失去焦点

<body>
    <input type="text">
</body>
<script>
        window.onload = function() {
            var inp = document.querySelector("input");
            inp.onblur   = function() {
                console.log(inp.value);

            }
        }
    </script>

在这里插入图片描述

submit 表单提交（submit与reset是针对表单内容的操作，所以事件源都是表单）

<body>
    <form>
        <input type="text">
        <input type="submit" value="提交">
    </form>
</body>
<script>
        window.onload = function() {
            var form = document.querySelector("form");
            form.onsubmit = function() {
                alert("表单提交了")
            }
        }
    </script>

reset 表单重置

<body>
    <form>
        <input type="text">
        <input type="reset" value="重置">
    </form>
</body>
<script>
        window.onload = function() {
            var form = document.querySelector("form");
            form.onreset= function() {
                alert("表单重置了")
            }
        }
    </script>

事件传播细化

分类：事件捕获、事件冒泡

  • 捕获：dom事件触发时，浏览器会从根节点开始由外到内进行事件传播（点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件）
  • 冒泡：与事件捕获相反，浏览器会从子节点开始由内到外进行事件传播
<body>
    <div id="div1">
        <h1 id="div2">
            <div id="div3"></div>
        </h1>
    </div>
</body>
 <script>
        window.onload = function() {
            var boxs = document.getElementsByTagName("div");
            for (var i = 0; i < boxs.length; i++) {
                boxs[i].index = i + 1;
                boxs[i].onclick = function(event) {
                    var event = event || window.event;
                    alert(this.getAttribute("id"));
                    //阻止事件传播，加上以下代码事件传播就阻止了
                    // if (event.stopPropagation) {
                    //     event.stopPropagation();
                    // } else {
                    //     event.cancelBubble = true;
                    // }
                }
            }
        }
    </script>

首先获取是div的元素节点
在标准浏览器中：
event.stopPropagation();
【注意】 书写在事件处理函数中
在IE低版本中：
event.cancelBubble = true;
兼容写法：

  if (event.stopPropagation) {
       event.stopPropagation();
   } else {
       event.cancelBubble = true;
   }

循环绑定事件：
1.资源浪费
2.新增的节点没有绑定事件，需要手动再绑定一次。

事件绑定三种方式

1.行内式

在标签中直接通过on+事件类型 属性 去绑定事件
1.一个方法需要多次引用，而且不符合 行为、结构、样式 相分离的原则。
2.当js的函数名更改，html标签内的方法也需要更改。
【注】使用行内式绑定事件时，JS要使用内嵌式，位置没有限制，但是绑定的事件不能是HTML页面加载完之后再执行JS（绑定事件不能写在window.οnlοad=function(){中）

<body>
    <div id="box" onclick="show()">点我一下</div>

</body>
<script>
        function show() {
            alert("我被点击了")
        }
    </script>

2.内联式

优：符合 行为、结构、样式 相分离的原则
缺：只能绑定一个同类事件
（1）直接绑定匿名函数

<body>
    <div id="box">点我一下</div>
</body>
<script>
        window.onload = function() {
        var box = document.getElementById("box");
        box.onclick = function() {
                    alert("我被点击了")
                }
         }
    </script>

（2）先定义函数，再去绑定

<body>
    <div id="box">点我一下</div>
</body>
<script>
        window.onload = function() {
        var box = document.getElementById("box");
        function change() {
               alert("我被点击了")
           }
         box.onclick = change;
    </script>

3.监听 addEventListener

优：符合 行为、结构、样式 相分离的原则，可以绑定多个同类事件
多个事件处理函数执行顺序是按照绑定顺序来的，先绑定先执行
语法：

事件源.addEventListener("事件名" , "事件处理函数" , ["布尔值"]);
//布尔值可选，为false 事件冒泡           true   事件捕获  
//阻止默认事件preventDefault()
//阻止事件冒泡stopPropagation()

在IE低版本不支持

<body>
    <div id="box">点我一下</div>
</body>
<script>
        window.onload = function() {
        var box = document.getElementById("box");
        function change() {
               alert("我被点击了")
           }
          function change1() {
                alert("我又被点击了")
            }
          box.addEventListener("click", change1);
          box.addEventListener("click", change);
    </script>

attachEvent()
IE低版本支持
语法：事件源.attachEvent(“on+事件类型”,事件处理函数);
多个事件处理函数的执行顺序是按照绑定顺序的倒序来的
先绑定后执行
对于非监听方式，可以直接将null赋值。

对于监听方式绑定
标准浏览器
removeEventListener(“事件类型”,事件处理函数)；
【注意】 如果你想要解绑事件，那么你在绑定事件时，一定要将函数单独定义。使用函数名的方式去绑定事件。

IE低版本
detachEvent(“on+事件类型”,事件处理函数);
对象可以看成 属性的集合 函数也是属性的一种。（属性和函数的集合）
事件对象主要包含一些事件的信息。

函数事件对象

元素节点.on+事件类型 = 匿名函数；

事件对象的产生：在事件绑定完成后，就自动生成了一个事件对象。

事件绑定函数，因为不是在代码中直接调用函数，所以没有办法直接传参.
浏览器会给咱们一个默认的参数，这个参数就是事件对象。

<body>
    <div id="box">点我一下</div>
</body>
<script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onclick = function(event) {
                console.log(event);

            }
        }
    </script>

在这里插入图片描述

获取事件对象：
在标准浏览器中。
直接在事件处理函数上定义一个形参。
会在事件触发的时候，由浏览器自动传递实参。

IE低版本
window.event
在标准浏览器下也可以使用

兼容写法：

 var event = event || window.event;

鼠标事件对象

属性：
button：用来表示咱们按下的是哪一个按键
0 左键
1 滚轮
2 右键

获取当前鼠标的位置

（原点不同）
clienX 可视窗口的左上角为原点
clienY
pageX 整个页面的左上角为原点
pageY

 	<style>
        body {
            width: 2000px;
            height: 2000px;
        }
        
        #box {
            width: 200px;
            height: 200px;
            background-color: teal;
        }
    </style>
    <body>
    <div id="box"></div>
	</body>
    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onclick = function(event) {
                console.log("clientX" + event.clientX);
                console.log("clientY" + event.clientY);
                console.log("pageX" + event.pageX);
                console.log("pageY" + event.pageY);
            }
        }
    </script>

在这里插入图片描述

screenX 电脑屏幕的左上角为原点
screenY
offsetX 以事件触发的元素为原点
offsetY

 	<style>
        body {
            width: 2000px;
            height: 2000px;
        }
        
        #box {
            width: 200px;
            height: 200px;
            background-color: teal;
        }
    </style>
    <body>
    <div id="box"></div>
	</body>
    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onclick = function(event) {
                console.log("screenX" + event.screenX);
                console.log("clientY" + event.screenY);
                console.log("offsetX " + event.offsetX);
                console.log("offsetY " + event.offsetY);
            }
        }
    </script>

在这里插入图片描述

获取元素尺寸

元素的占地面积
（宽高+内边距+边框） IE盒模型 设置的宽高就是元素的占地尺寸

offsetWidth
offsetHeight
元素的内容+内边距+边框

clientWidth
clientHeight
元素的内容 + 内边距

 	<style>
        body {
            width: 2000px;
            height: 2000px;
        }
        
        #box {
            width: 200px;
            height: 200px;
            background-color: teal;
            border: 10px solid burlywood;
            margin: 100px;
            padding: 40px;
        }
    </style>
    <body>
    <div id="box"></div>
	</body>
    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onclick = function(event) {
                console.log("offsetWidth " + box.offsetWidth);
                console.log("offsetHeight" + box.offsetHeight);
                console.log("clientWidth " + box.clientWidth);
                console.log("clientHeight " + box.clientHeight);
            }
        }
    </script>

在这里插入图片描述

一个元素对于参考系的坐标位置。
offsetParent
语法：元素.offsetParent
作用：拿到该元素获取偏移量时的参考父级
默认以body为参考系，如果父辈里有定位属性，则获取该父辈元素。

offsetLeft offsetTop
语法：元素.offsetLeft 元素.offsetTop
作用：拿到元素相对于参考系的相对偏移量。

 	<style>
        body {
            width: 2000px;
            height: 2000px;
        }
        
        #box {
            width: 200px;
            height: 200px;
            background-color: teal;
            border: 10px solid burlywood;
            margin: 100px;
            padding: 40px;
        }
    </style>
    <body>
    <div id="index">
        <div id="box"></div>
    </div>
	</body>
    <script>
        window.onload = function() {
            var box = document.getElementById("box");
            box.onclick = function(event) {
                 console.log("offsetLeft  " + box.offsetLeft);
                console.log("offsetTop " + box.offsetTop);
                console.log("offsetParent " + box.offsetParent);
            }
        }
    </script>

在这里插入图片描述

BOM
innerWidth
innerHeight

DOM 文档 html的元素尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight

键盘事件对象

判断你按下的是哪个键

属性：
key：你按下的是哪个键 区分大小写。
在IE低版本不适用

<script>
        window.onkeydown = function(event) {
            console.log(event.key);

        }
    </script>

在这里插入图片描述

keycode:
以编码格式返回 不区分大小写。
空格 32
回车（Enter） 13

<script>
        window.onkeydown = function(event) {
            console.log(event.keyCode);

        }
    </script>

在火狐低版本使用which属性。

尽量用keycode去判断你按下的键位。

altkey 判断是否按下alt键
shiftkey 判断是否按下shift键
ctrlKey 判断是否按下ctrl键
metaKey 判断是否按下 window win键 苹果系统（mac） comment键

以上四个值返回是布尔值，IE低版本不支持。

事件委托

原理：冒泡
步骤：
1.找到要操作的节点的共同的父节点或者祖先节点。
2.将事件添加到父节点上。
3.找到事件目标，判断事件目标是否是想要触发的对象，如果是，则触发响应的事件。

获取焦点：
元素节点.focus()
默认行为：
a标签 自带点击效果
form 表单自己会提交
框选
鼠标右键菜单

阻止浏览器默认行为

要在你阻止的行为中添加阻止方法。

标准浏览器：
event.preventDefault();
IE低版本：
event.returnValue = false;
兼容写法：

   if(event.preventDefault){
              event.preventDefault();
          }else{
              event.returnValue = false;
          }
半塘潮汐
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jem.js:Javascript 事件管理器
06-04
jem.js（Javascript 事件管理器） 这是一个 Javascipt 库，可帮助我们编写事件驱动的 Javascript 代码。 没有依赖项，没有 jQuery，没有其他库。 这与 DOM 无关。 jem.js 用于您的自定义事件。 欢迎任何形式的...
EventDispatcher,js事件派发器,javascript事件派发器
12-28
在标题提到的"EventDispatcher, js事件派发器, javascript事件派发器"中，我们可以理解这是一个JavaScript实现的事件派发器，可能是作者的原创工作。用户可以通过GitHub上的问题跟踪系统（Issue）报告任何发现的错误...
JS事件
a_靖的博客
12-17 480
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 事件绑定:平时绑定事件的三种方法。 1.嵌入dom <button onclick="open()">按钮</button> <script>function open(){}</script> 2.直接绑定 <button id="bt...
事件冒泡和事件捕获
m0_50520143的博客
04-02 312
什么是事件 JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者） 什么是事件流 事件流描述的就是从页面中接收事件的顺序。而早期的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。 事件冒泡、事件捕获 IE提出的事件流是事件
JavaScript事件学习小结（三）js事件对象
10-22
主要介绍了JavaScript事件学习小结（三）js事件对象的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
javascript事件思维导图
12-30
全面，直观javascript的事件
js事件监听机制(事件捕获)总结
12-04
JavaScript事件监听机制是前端开发中不可或缺的一部分，它用于处理页面元素的各种交互，如点击、鼠标移动等。在本文中，我们将深入探讨事件监听，特别是事件捕获这一概念，以及如何在不同的浏览器环境中实现兼容。 ...
JavaScript事件学习小结(二)js事件处理程序
10-22
主要介绍了JavaScript事件学习小结(二)js事件处理程序的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
JavaScript 事件冒泡应用实例分析
10-29
在一些传统的小型WEB应用开发过程中，JavaScript通常只是拿来做表单验证而以，所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况，又或者事件冒泡对最终实现效果影响不大，可忽略。
理解JS事件循环
10-23
主要帮助大家理解JS事件循环，深入浅出的讲解了javascript事件循环，感兴趣的小伙伴们可以参考一下
JavaScript程序设计——事件处理实验报告.docx
11-11
实验报告详细介绍了JavaScript事件处理的相关知识，这在Web开发中是非常关键的一部分，因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明： 1. **JavaScript事件基本概念**： - **事件**：是用户...
JS 事件
专栏
03-06 1462
Events are actions that can be detected by JavaScript.JS可以察觉到事件有动作 Events事件By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaSc
js 事件
shimengren1994的博客
05-12 155
js事件代表的是用户和页面的交互行为，一般都是绑定在dom元素上的。js的事件流表示的是从页面中接收事件的顺序。有两种事件流：1.事件冒泡：事件开始由最具体的元素然后逐级向上传播到较为不具体的点；2.事件捕获：事件从最不具体的点然后一级级往下到最具体的元素。dom的事件流包括三个阶段：事件捕获阶段，处于目标阶段以及事件冒泡阶段。js的事件处理程序:1.html事件处理程序eg &lt;div on...
Js 事件
qq_38256266的博客
06-22 132
事件1、什么是事件2、事件的组成3、事件对象4、offset系列5、事件类型6、事件对象兼容写法7、事件绑定的方式 1、什么是事件 js中鼠标点击，鼠标滑过都是事件。 2、事件的组成 事件源：（谁触发的事件） 事件类型：（触发事件类型） 事件处理函数: function(){ } （触发后要干的事） 注意：事件处理函数中有一个this，它代表事件源。 3、事件对象 3.1 概念 事件触发时，记录了一系列与该事件相关的信息 3.2 事件对象的获取 在事件处理函数的第一个形参位置，写e
JavaScript事件
最新发布
09-09
JavaScript事件是指在Web页面中，通过JavaScript代码来侦测和响应用户的操作或系统的事件。事件可以是用户的鼠标点击、键盘按键、页面加载完成等等。事件驱动式是指JavaScript代码通过侦测到这些事件，并执行相应的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值