js事件详解

最新推荐文章于 2024-08-14 17:15:24 发布
最新推荐文章于 2024-08-14 17:15:24 发布
阅读量913 收藏 7
点赞数 4
文章标签： JavaScript 前端 事件 事件流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43954563/article/details/89220689
版权

事件

  1. 事件流

    事件流描述的是从页面中接收事件的顺序

    • 事件冒泡

      IE事件为事件冒泡，即事件由最具体的文档层层向上传播，相当于每层都包含了这个事件

      <html>
	<head>
		<title>事件冒泡</title>
	</head>
	<body>
		<div>Click me</div>
	</body>
</html>

      比如点击最里面的盒子，这个点击事件便会沿着DOM这个流向上传播

      div->body->html->document

      有的浏览器将一直冒泡到window对象

    • 事件捕获

      以上面代码为例，在事件捕获阶段，document这个对象首先接收到click事件，然后沿DOM树传播到实际目标

      document->html->body->div

      DOM事件流

      事件流包括三个阶段：

      1. 事件捕获阶段

      2. 处于目标阶段

      3. 事件冒泡阶段

        其实相当于将上面俩部分合起来，当你点击div时，系统捕获你这个行为是从上到下，这个行为的引发事件是从下到上，通俗易懂

        注意捕获目标阶段在body就停止了，然后是处于目标阶段，当然的处于目标阶段也被包含到事件冒泡阶段的一部分

  2. 事件类型

    事件类型比较多，这里大概列举一下，需要时自己查

    • UI事件

    • 焦点事件（元素获得或失去焦点）

    • 鼠标事件

    • 滚轮事件

    • 文本事件

    • 键盘事件

    • 合成事件

    • 变动事件

    • 变动名称事件

      UI

      load,当元素加载完在元素上触发

      unload 当元素卸载完毕后在元素上触发，只要用户从一个页面切换到另一个页面就会触发，用途：清除引用，防止内存泄漏

      abort 当用户停止下载且没有下载完毕时触发

      error javaScript加载错误时触发，比如图像加载错误

      resize 当窗口或框架大小变化时在window触发

      scroll 当用户滚动带滚动条的内容时在该元素上触发

      焦点事件

      blur 元素失去焦点时触发，不会冒泡

      DOMFocusIn 元素获得焦点时触发，冒泡

      focus 获得焦点时触发，不冒泡

      focusin 获得焦点时触发，冒泡

      focusout 失去焦点时触发

      成对存在，历史版本问题

      焦点从一个元素移到另一个元素上发生的事件

      focusout->focusin

      blur->DOMFocusOut

      focus->DOMFocusIn

      鼠标与滚轮事件

      click 最普通的点击事件

      dblclick 双击按钮

      mousedown按下任意鼠标键触发

      mouseenter鼠标光标首次移到元素内部触发，不冒泡

      mouseleave

      mousemove鼠标在元素内部移动时重复触发

      mouseout鼠标位于一个元素上方，然后移到另一个元素时触发

      mouseover鼠标位于一个元素外部，首次移动到另一个元素边界内触发

      mouseup 释放鼠标按钮触发

      坐标位置：clientX clientY，视口中水平与垂直位置

      ​ pageX pageY 页面中位置，不止视口

      ​ screenX screenY 相对于整个电脑屏幕的位置

  3. 事件委托

    事件委托又叫事件代理，其中与事件冒泡有着不可分割的联系，原理就是利用事件冒泡来实现

    <ul>
	<li>first</li>
	<li>second</li>
	<li>third</li>
</ul>

    看这一段代码，我们平时想为每一个li都添加一个点击事件，就设置三个onlick事件，这样不仅不美观，而且占用内存，影响页面加载。而利用事件冒泡就可以很好解决这个问题。我们可以直接在ul标签上添加一个onlick事件，因为每一个li都是位于ul下边，根据事件冒泡原理这个点击事件会一层一层上去，最终处理事件的是ul里面的函数，避免了代码繁杂

    1. 事件绑定

      • 使用DOM操作

        var a=document.getelemetbyid(id);
a.onlick=functon(){};

      • 直接在html标签中绑定

        <div onlick="fun()"></div>
js:fun(){}

      • 利用添加事件函数(事件监听函数)

        elementObject.addEventListener(eventName,handle,useCapture);

        参数 obj为点击的元素对象，ev为事件类型注意要去掉事件的on，只写 click、dblclick、mouseover这样的事件，fn为事件运行的函数。

        elementObject：DOM对象（即DOM元素 ）

        eventName：事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等

        handle：事件句柄函数，即用来处理事件的函数。

        useCapture：Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

        事件移除

        • useCapture设为false

        • 移除事件监听器

          btn2.removeEventListener("click",fn1,false)
web前端工程
关注
javascript事件详解
01-20
系统介绍了javascript事件，包括平常理解不透彻的捕获，冒泡等机制，值得一看
JS事件详解(下)
01-08
JavaScript中的事件机制是Web开发中不可或缺的一部分，它允许开发者对用户与页面交互作出响应。在本文中，我们将深入探讨事件的传播、冒泡与捕获、阻止事件传播以及事件委托等概念。 首先，事件的传播是指当一个...
JavaScript事件详解
weixin_34212189的博客
03-11 52
1.事件传播机制：事件冒泡，事件捕获。 2.注册事件处理程序方式: 设置html标签属性为事件处理程序，文档元素的事件处理程序属性，名字由“on”后面跟着事件名组成，例如：onclick,onmouseover，用法如下 1 <div id="div1" onClick="console.log('div1');"><di...
JavaScript基础(33)_鼠标滚轮滚动事件、键盘事件
最新发布
no15870678621的博客
08-14 682
js鼠标滚轮滚动事件、键盘事件
最详细的JavaScript和事件解读
Chaos的迷之blog
03-30 660
写的比较全吧，有些地方是略过了，不过可以很轻松的搜到，也有一些链接可以直接查看，还是很不错的，以后用得到的。 里面的demo好像不太能看？直接戳进原帖会更直观。 转自：http://www.codeceo.com/article/javascript-event-anay.html 与浏览器进行交互的时候浏览器就会触发各种事件。比如当我们打开某一个网页的时候，浏览
理解DOM中的事件流
weixin_33895657的博客
10-16 119
2019独角兽企业重金招聘Python工程师标准>>> ...
JS事件
weixin_41697424的博客
11-15 286
事件的调用方式 1、行内调用  &lt;div onclick="alert('单击div2了...')"&gt; 2、函数调用   &lt;button onclick="btn();"&gt;            然后在script中写函数,         function  btn(){             alert("我进来了...");         } 3、js函数指...
js事件详解-0-1-2级模型.pdf
09-27
标题提到的“js事件详解-0-1-2级模型”涉及到了JavaScript中事件的分层模型。JavaScript事件模型是前端开发中处理用户交互的核心机制之一，主要包括了事件捕获、目标阶段和事件冒泡三个阶段，这个模型被广泛地理解为...
学习js的事件详解
01-11
学习js的事件详解，含原生及jquery实现。
js oncontextmenu事件使用详解
01-19
当用户在 <div> 元素 上右击鼠标时执行 JavaScript ： 用oncontextmenu事件单禁用右键菜单 onconTextmenu=window.event.returnValue=false;右键菜单禁用，用这个可以禁止复制。 在<body>中加
事件冒泡和事件捕获
m0_50520143的博客
04-02 332
什么是事件 JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以使用监听器（或事件处理程序）来预定事件，以便事件发生时执行相应的代码。通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者） 什么是事件流 事件流描述的就是从页面中接收事件的顺序。而早期的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Netscape的事件流就是事件捕获。 事件冒泡、事件捕获 IE提出的事件流是事件
js 事件
shimengren1994的博客
05-12 164
js事件代表的是用户和页面的交互行为，一般都是绑定在dom元素上的。js的事件流表示的是从页面中接收事件的顺序。有两种事件流：1.事件冒泡：事件开始由最具体的元素然后逐级向上传播到较为不具体的点；2.事件捕获：事件从最不具体的点然后一级级往下到最具体的元素。dom的事件流包括三个阶段：事件捕获阶段，处于目标阶段以及事件冒泡阶段。js的事件处理程序:1.html事件处理程序eg &lt;div on...
js 常见事件
weixin_30709809的博客
05-07 122
a.窗口事件,只在body和frameset元素中才有效onload 页面或图片加载完成时onunload 用户离开页面时 b.表单元素事件,在表单元素中才有效onchange 框内容改变时onsubmit 点击提交按钮时onreset 重新点击鼠标按键时onselect 文本被选择时onblur 元素失去焦点时onfocus ...
js事件
快乐八哥的博客
02-02 355
js事件，我这里主要谈谈这三种，冒泡事件，委托事件，以及事件监听。 所谓的冒泡事件，通俗一点就是，一个泡泡往上冒，当往上面的节点事件与目标节点事件（这里是p）一致时，也会发生。 直接上货吧。老样子，先把html放上来，要明白的是这里的节点树是： body>div>p，都添加了onclick事件，目标函数都是add(),赋予的参数不一样 body>div.maopao 这里是要放的内容块
JS事件详解
ksx2333的博客
04-02 96
本文的主要内容是关于js的事件详解，包括如何绑定事件，事件冒泡和事件捕获等等.......
JavaScript事件详解与应用
"JavaScript事件与描述" JavaScript是一种广泛应用于网页和网络应用的脚本语言，它可以直接嵌入到HTML文档中，与HTML紧密结合，提供动态交互功能。JavaScript并不局限于特定的机器或操作系统，因此它是跨平台的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值