您的当前位置:首页正文

JavaScript事件处理的方式(三种)_javascript技巧

2023-12-06 来源:站点网
导读Javascript中事件处理事件处理分为三个阶段:捕获 - 处理 - 起泡。以点击按钮为例:捕获阶段:由外层到内层,首先调用给Window注册的click捕获阶段监听方法,然后document、body、一层层的父节点,一直到按钮本身。处理阶段:调用按钮本身的click监听方法。起泡阶段:从按钮开始,从内层到外层,依次调用各级父节点的起泡阶段监听方法,直到Window。但是,对于IE8及更低版本IE,不支持捕获阶段,因此捕获阶段的事件监听目前尚不通用。通常的事件处理方法形式为:[javascr
最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,特此分享到脚本之家平台供大家参考下!

一、什么是JavaScript事件?

事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了。

事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面加载完成,或者是用户滚动窗口或改变窗口大小。说白了,事件是文档或浏览器中发生的特定交互瞬间!

通过使用JavaScript,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应。

二、事件流

事件流就是描述了页面中接受事件的顺序,在浏览器发展的初期,两大浏览器厂商IE和Netscape互掐,出现了一个坑爹的情况,那就是他们对事件流的解释出现了两中截然相反的定义。也就是我们所熟悉的:IE的事件冒泡,Netscape的事件捕获。先来一张图,简要的看下结构:

1、事件冒泡

事件冒泡即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的节点(文档)。拿上面的图来说明,就是当点击text部分时,先由text处的元素接收,然后逐级传播至window,即执行6-7-8-9-10的过程。

2、事件捕获

事件捕获即事件最早由不太具体的节点接收,而最具体的节点最后接收到事件。同理,在上面的模型中,就是点击text部分时,先由window接收,然后逐级传播至text元素,即执行1-2-3-4-5的过程。

具体在代码中怎样表现呢?后面给出!

三、Javascript事件处理程序的3种方式

产生了事件,我们就要去处理他,Javascript事件处理程序主要有3种方式:

1、HTML事件处理程序

即我们直接在HTML代码中添加事件处理程序,如下面这段代码:


站点网还为您提供以下相关内容希望对您有帮助:

事件处理机制

JavaScript中事件处理 事件处理分为三个阶段:捕获 - 处理 - 起泡。以点击按钮为例: 捕获阶段: 由外层到内层,首先调用给Window注册的click捕获阶段监听方法,然后document、body、一层层的父节点,一直到按钮本身。

请简单说明javascript中处理事件的步骤

3、DOM2级事件处理程序 DOM2也是对特定的对象添加事件处理程序(具体可查看马海祥博客的《JavaScript对象属性的基础教程指南》相关介绍),但是主要涉及到两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和 rem...

在javascript中,如何进行事件绑定?并举例说明。

另一种方式是通过JavaScript代码使用DOM 0级事件处理程序来绑定事件。这种方法是通过将函数赋值给元素的事件处理属性来实现的。例如:javascript var btn = document.getElementById("myButton");btn.onclick = function() { ...

javascript:;怎么解决?

这样可以避免使用“javascript:;”标记,并使JavaScript代码更加易于维护和管理;3、使用事件绑定:可以使用事件绑定来执行所需的JavaScript代码,而不需要使用“javascript:;”标记。例如,可以使用jQuery的“click”方法来绑定一个...

请说明JavaScript中处理事件的步骤

事件处理程序的方式了:1. 设置HTML标签属性为事件处理程序 文档元素的事件处理程序属性,其名字由“on”后面跟着事件名组成,例如:onclick、onmouseover。当然了,这种形式只能为DOM元素注册事件处理程序。实例:<!DOCTYPE HTML> test #div...

javascript的事件处理?

第一种方式存在浏览器兼容性问题,有些浏览器会默认把事件对象作为第一个参数传递到函数,有些则不会,遇到这种情况,只要直接获取event对象即可(下面是兼容所有浏览器的代码):function handler(e){ var e=e||event;cons...

javascript 事件

(1)单击事件onClick 当用户单击鼠标按钮时,产生onClick事件。同时onClick指定的事件处理程序或代码将被调用执行。通常在下列基本对象中产生:button(按钮对象)checkbox(复选框)或(检查列表框)radio (单选钮)reset ...

使用Javascript如何实现自定义事件机制

因此确定事件绑定时三个参数分别为:事件类型、事件处理函数、事件处理函数执行上下文。那么事件绑定要干什么呢,其实很简单,事件绑定只用将相应的事件名称和事件处理函数记录下来即可。我的实现如下:{ /** * 绑定事件 * * @param {...

JavaScript登录验证form表单的事件触 发方式,有哪几种?

有三种。JavaScript在form表单中使用button按钮实现submit提交方法,需要的朋友参考下吧使layui.jsform可主动验证表单是否通过。

js事件是什么意思

JavaScript 事件处理程序(也称为事件监听器)是指用于处理 JavaScript 代码与特定 HTML 元素相关联的函数。事件处理程序可以侦听各种事件类型,包括鼠标事件、键盘事件等。一旦特定事件触发,事件监听器将自动检测并执行相关的 ...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

精彩推荐

更多阅读

Top