关于javascript事件

合集下载

javascript的常用事件有哪些

javascript的常用事件有哪些

javascript的常⽤事件有哪些javascript常⽤事件:click、dblclick、mouseup、mouseout、keypress、keydown、keyup、error、load、resize、unload、blur、change、focus、reset等。

JavaScript 的⼀个基本特征就是事件驱动。

所谓事件驱动,就是当⽤户执⾏了某种操作或 Javascript 和 html 交互后导致了某种状态改变后,会因此⽽引发⼀系列程序的响应执⾏。

在这⾥,⽤户的操作称为事件,程序对事件作出的响应称为事件处理。

事件处理,是指程序对事件作出的响应。

事件,对 JavaScript 来说,就是⽤户与 Web 页⾯交互时产⽣的操作或 Javascript 和 html 交互后导致发⽣变化某种状态的事情,⽐如移动⿏标、按下某个键、单击按钮等操作以及表⽰ Ajax 的⼯作状态发⽣变化、表⽰动画已经完成运⾏等。

事件处理中涉及的程序称为事件处理程序。

事件处理程序通常定义为函数。

在 Web 页⾯中产⽣事件的界⾯元素,称为事件源。

在不同事件源上可以产⽣相同类型的事件,同⼀个事件源也可以产⽣不同类型的事件。

JS 程序通过指明事件类型和事件源,并对事件源绑定事件处理程序,这样,⼀旦事件源发⽣指定类型的事件,浏览器就会调⽤事件源所绑定的处理程序进⾏事件处理。

所以事件处理涉及的⼯作包括事件处理程序的定义及其绑定。

在 Web 页⾯中,⽤户可进⾏的操作有很多,⽽每⼀种操作都将产⽣⼀个事件。

下⾯给⼤家介绍⼀下javascript常⽤事件。

JavaScript 常⽤事件事件描述⿏标事件 click ⽤户单击⿏标时触发此事件dblclick ⽤户双击⿏标时触发此事件mousedown ⽤户按下⿏标时触发此事件mouseup ⽤户按下⿏标后松开⿏标时触发此事件mouseover 当⽤户将⿏标的光标移动到某对象范围的上⽅时触发此事件mousemove ⽤户移动⿏标时触发此事件mouseout 当⽤户⿏标的光标离开某对象范围时触发此事件mousewheel 当滚动⿏标滚轮时发⽣此事件,只针对 IE 和 Chrome 有效DOMMouseScroll 当滚动⿏标滚轮时发⽣此事件,针对标准浏览器有效键盘事件 keypress 当⽤户键盘上的某个字符键被按下时触发此事件keydown 当⽤户键盘上某个按键被按下时触发此事件keyup 当⽤户键盘上某个按键被按下后松开时触发此事件窗⼝事件 error 加载⽂件或图像发⽣错误时触发此事件load 页⾯内容加载完成时触发此事件resize 当浏览器的窗⼝⼤⼩被改变时触发此事件unload 当前页⾯关闭或退出时触发此事件表单事件 blur 当表单元素失去焦点时触发此事件click ⽤户单击复选框、单选框、普通按钮、提交按钮和重置按钮等按钮时触发此事件change 表单元素的内容发⽣改变并且元素失去焦点时触发此事件focus 当表单元素获得焦点时触发此事件reset ⽤户单击表单上的重置按钮时触发此事件select ⽤户选择了⼀个 input 或 textarea 表单元素中的⽂本时触发此事件submit ⽤户单击提交按钮提交表单时触发此事件。

第七章 JavaScript事件

第七章 JavaScript事件

Page 13
三、事件处理程序
前面我们已经介绍过,响应某个事件的函数就叫事件处理 程序。为事件绑定事件处理程序的方式主要有以下三种: HTML事件处理程序 该方法是直接在HTML标记中指定事件处理程序。如:
或者
例题7-2.html
7-2-1.html
Page 14
三、事件处理程序
* 缺点:HTML与JavaScript代码紧密耦合。如果要更换事件 处理程序,就用改动两个地方:HTML代码和JavaScript代 码。 DOM 0级事件处理程序 ☞ 添加事件处理程序:对象.事件=事件处理程序
二、事件流
单击<div>M事件流中,实际的目标(<div>元素)在捕获阶段捕获接收到事 件。这意味着在捕获阶段,事件从document到<html>再到<body>后就 停止了。下一个阶段是“处于目标”阶段,于是事件在<div>上发生, 并在事件处理中被看成冒泡阶段的一部分。然后,冒泡阶段发生,事 件又传播回文档。
Page 23
四、事件对象
属性/方法 preventDefault() stopImmediatePr opagation() 类型 读/写 说明 取消事件的默认行为,如果cancelable是true ,则可以使用这个方法 取消事件的进一步捕获或冒泡,同时阻止任何 事件处理程序被调用
Function 只读 Function 只读
也就是说,click事件首先在<div>元素上发生,而这个元素就是我们 单击的元素,然后,click事件沿着DOM树向上传播,在每一级节点上 都会发生,直至传播到document对象。如下图:
*所有现代浏览器都支持事件 冒泡,IE9、FF、Chrome、 Safari会将事件一直冒泡到 window对象。

js中event的用法

js中event的用法

js中event的用法在JavaScript中,事件(event)是指用户与网页或应用程序进行交互时发生的动作或操作。

通过捕捉事件,我们可以执行一些特定的代码来响应用户的操作。

在本文中,我们将介绍JS中事件的基本概念、事件的类型、事件监听器的使用、事件对象的属性和方法以及一些常见的事件示例。

事件的基本概念:在Web开发中,事件是指由用户执行的动作,比如点击鼠标、按下键盘、滚动页面等。

当这些事件发生时,我们可以捕捉并执行一些与之相关的代码。

事件可以在浏览器内部和页面元素之间进行传递。

在JS中,每个事件都有一个对应的事件处理器(event handler),用于处理该事件发生时要执行的代码。

事件的类型:在JS中,有各种各样的事件类型,可以满足不同的需求。

常见的事件类型包括:- 鼠标事件:比如点击(click)、双击(dblclick)、移动(mousemove)、进入(mouseover)和离开(mouseout)等。

- 键盘事件:比如按下一些键(keydown)或释放一些键(keyup)等。

- 表单事件:比如提交表单(submit)、改变输入内容(change)等。

- 页面事件:比如页面加载完成(load)、页面滚动(scroll)、窗口大小改变(resize)等。

- 多媒体事件:比如视频播放(play)和音频暂停(pause)等。

事件监听器的使用:要捕捉事件并执行相应的代码,我们可以使用事件监听器(event listener)或事件处理器。

事件监听器用于“监听”特定的事件,并指定当事件发生时要执行的代码。

在JS中,我们可以使用addEventListener(方法来添加事件监听器。

该方法接受三个参数:事件名称、事件处理函数和一个可选的布尔值,用于指定事件的传播方式。

下面是一个例子,展示如何使用addEventListener(方法来添加一个鼠标点击事件监听器:```javascriptdocument.addEventListener('click', functioalert('鼠标点击了页面!');});```事件对象的属性和方法:在事件处理函数中,我们可以通过事件对象(event object)来访问和操作事件的属性和方法。

20个javascript开发案列

20个javascript开发案列

题目:20个JavaScript开发案例在当今数字化和信息化的时代,JavaScript已经成为了前端开发的主流语言之一。

它可以帮助开发者实现网页的动态交互效果,为用户带来更加流畅和丰富的网页体验。

下面将介绍20个优秀的JavaScript 开发案例,展示了JavaScript在不同领域的应用和潜力。

一、基础开发案例1. 轮播图实现在网页设计中,轮播图是非常常见的元素,它可以吸引用户的注意力,增加网页的互动性。

使用JavaScript编写轮播图实现的案例可以展示其在网页交互方面的强大功能。

2. 视频播放器JavaScript也可以用于实现网页上的视频播放功能。

通过调用浏览器的API接口,开发者可以设计出功能完善的视频播放器,实现视频的加载、播放、暂停和控制等功能。

3. 表单验证在网页开发中,表单是常见的用户交互元素。

通过JavaScript开发表单验证功能,可以在用户输入信息时进行实时的验证,提高用户的输入准确性和网页的友好性。

4. 下拉菜单下拉菜单是网页导航和内容选择中的常见组件,使用JavaScript可以实现下拉菜单的动态展开和收缩效果,增加网页的交互性和美观性。

5. 弹窗效果JavaScript可以实现各种形式的弹窗效果,如提示框、确认框、模态框等,为用户提供更好的提示和交互体验。

二、数据可视化案例6. 图表库JavaScript拥有成熟的图表库,如Echarts、Highcharts等,可以快速实现各种类型的数据可视化,满足各种复杂的图表需求。

7. WebGL应用JavaScript也可以结合WebGL技术实现3D数据可视化应用,如三维地图、虚拟现实场景等,展现出JavaScript在数据可视化方面的强大潜力。

8. 大屏数据展示使用JavaScript编写大屏数据展示应用,可以实现数据的实时更新和动态展示,为企业、政府等提供直观的数据展示和分析功能。

9. 实时监控系统JavaScript在实时监控系统中的应用也很广泛,通过实时更新数据和动态图表展示,可以实现对各种设备、系统和环境的监控和分析。

js触发事件的方法

js触发事件的方法

js触发事件的方法JavaScript中,触发事件的方法是非常重要的,它可以让我们在页面上动态响应用户的行为,从而提高我们页面的交互性和用户体验。

在本篇文章中,我们将深入探讨JS触发事件的方法。

一、addEventListener()方法addEventListener()方法是JS中使用最多的事件绑定方法之一,它能够捕获指定事件类型的所有事件,并将它们处理成指定的回调函数。

我们来看一下使用addEventListener()方法的语法:element.addEventListener(event, function, useCapture)参数说明:event:必须。

字符串,表示要接收的事件类型,比如click、mousedown等。

function:必须。

事件触发时执行的回调函数。

useCapture:可选。

Boolean类型,表示是否使用事件捕获模式。

默认情况下为false,即使用事件冒泡模式。

二、onclick()方法onclick()方法是一种特殊的事件触发方法,它只能用于鼠标单击事件。

当鼠标单击元素时,onclick()方法会触发指定的回调函数。

我们来看一下onclick()方法的语法:element.onclick = function;参数说明:function:必须。

事件触发时执行的回调函数。

三、dispatchEvent()方法dispatchEvent()方法是JS中另一种触发事件的方法,它可以模拟任何类型的事件,如鼠标事件、键盘事件等等。

使用dispatchEvent()方法时需要先创建一个Event对象,然后通过dispatchEvent()方法触发该对象。

我们来看一下dispatchEvent()方法的语法:element.dispatchEvent(event)参数说明:event:必须。

Event对象,表示要触发的事件类型。

四、fireEvent()方法在IE浏览器中,我们可以使用fireEvent()方法来触发事件。

JS——各种事件

JS——各种事件

JS——各种事件⿏标事件⿏标事件指与⿏标相关的事件(滚轮),继承了MouseEvent接⼝。

问:⿏标事件有哪些?click , dblclick , mousedown , mouseup ,mousemove , mouseenter , mouseover , mouseout , mouseleave , contextmenu( 按下右键), wheel(滑轮滚动)【后⾯这两个也是,别忘记】mouseenter事件只触发⼀次,在⽗节点内部进⼊⼦节点,不会触发mouseenter事件,但是会触发mouseover事件。

mouseout事件和mouseleave事件,都是⿏标离开⼀个节点时触发。

两者的区别是,在⽗元素内部离开⼀个⼦元素时,mouseleave事件不会触发,⽽mouseout事件会触发。

(mouseover与mouseout这两个O字母开头的事件会受到⿏标在⼦⽗亲之间变化的影响)MouseEvent实例属性有哪些?MouseEvent接⼝继承了Event接⼝,所以拥有Event的所有属性和⽅法。

它还有⾃⼰的属性和⽅法。

screenX (屏幕), screenY , clientX(程序窗⼝),offsetX(返回⿏标位置与⽬标节点左侧的padding边缘的⽔平距离(单位像素)) , offsetY, clientY ,pageX,pageY(属性返回与⽂档上侧边缘的距离(单位像素)。

它们的返回值都包括⽂档不可见的部分。

这两个属性都是只读。

) ctrlKey (是否按下了ctrl键,返回布尔), shiftKey , altKey , button(左键的值为0,中间1,右键2)举个例⼦:实例⽅法:getModifierState:⽅法返回⼀个布尔值,表⽰有没有按下特定的功能键。

它的参数是⼀个表⽰的字符串wheel事件:WheelEvent 接⼝继承了 MouseEvent 实例,代表⿏标滚轮事件的实例对象。

JavaScript焦点事件、鼠标事件和滚轮事件使用详解

JavaScript焦点事件、鼠标事件和滚轮事件使用详解
如:
window.onmousemove = function() { clickX = event.clientX; clickY = event.clientY; var div = document.createElement("img"); div.src = "hhh.gif" div.style.position = "absolute"; div.style.width = '100px'; div.style.left = clickX + "px"; div.style.top = clickY + "px"; document.body.appendChild(div);
};
页面坐标位置pageX与pageY;
window.onclick = function() { clickX = event.pageX; clickY = event.pageY; var div = document.createElement("img"); div.src = "ppp.png" div.style.position = "absolute"; div.style.width = '100px'; div.style.left = clickX + "px"; div.style.top = clickY + "px"; document.body.appendChild(div);
// if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) { // return false; // } // return true; // } catch (e) { // return false; // } return false; }

JavaScript事件

JavaScript事件

JavaScript事件
事件是基于对象或面向对象语言中,执行程序的一种机制。

在一个事件中会存在事件源、事件处理者和事件触发者三个对象。

事件触发者触发了事件源,事件源就会给事件处理者发送一个执行信息,事件处理者获取信息后执行并将执行结果返回。

如单击一个按钮,显示一个对话框,其中鼠标为事件触发者,按钮为事件源,弹出对话框的程序为事件处理者。

在JavaScript事件机制中,通常以HTML标记作为事件源,如按钮、段落标记p等。

事件触发者可以是鼠标或键盘,事件处理者就是学习的JavaScript程序。

这也是前面提到的使用JavaScript的第三中方式。

JavaScript中常用的事件如表8-15所示:
上述表中,常用的事件有onClick、onChange和onLoad事件。

现在创建一个案例,演示JavaScript事件执行过程和原理。

打开记事本,输入下列代码:
</script>
<input type="button" onClick="winopen()" value="惠通科技公司" name="button">
将上述代码保存,名称为Event.html。

直接单击该网页,并在显示窗口中单击惠通科技公司,会显示如图8-6所示窗口:
图8-6 全屏显示窗口
在上述代码中,鼠标充当了事件触发者,按钮为事件源,JavaScript函数为事件处理者,在该函数中,主要使用Windows对象的open方法显示全屏窗口,其中方法moveTo用来设置显示窗口的坐标位置,resizeTo方法表示窗口的大小。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

A 事件流(event flow )
事件模型分为两种:冒泡型事件、捕获型事件。

冒泡型(dubbed bubbling )事件:指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。

捕获型(event capturing )事件:它与冒泡型事件相反,指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。

捕获型事件也被称作自顶向下(DOM层次)的事件模型。

由于IE 浏览器不支持捕获型事件,因此并没有被广泛应用。

B 事件监听
i > 通用监听方法
示例一:
给浏览器添加监听方法,分为两种:IE 中的监听方法、标准DOM 的监听方法。

ii > IE 中的监听方法
在IE 浏览器中,每个元素都有两个方法来处理事件的监听。

分别是:attachEvent( )和detachEvent( )。

附加事件方法:[object].atta chEvent(“事件名”,方法名);
分离事件方法:[object].detachEvent(“事件名”,方法名);
如:o_p.detachEvent(“onclick”,click_A);
示例:
●使用这种方式可以为同一元素添加多个监听函数;
●在IE 浏览器中,函数的执行顺序与函数的添加顺序相反;
●在IE 浏览器中,虽然函数有先后执行顺序,但都会同时调用;
iii > 标准DOM 的监听方法
在使用标准DOM 的浏览器中,每个元素也有两个方法来处理事件的监听。

分别是:addEventListener( )和removeEventListener( )。

添加事件监听方法:[object].addEventListener(“事件名”,方法名,事件模型);
移除事件监听方法:[object].removeEventListener(“事件名”,方法名,事件模型);
注意:
这里的“事件名”不能带on ,如:click(如果是onclick 则错误!)
“事件模型”为boolean 类型,通常设置为false ,即“冒泡型”事件。

(如果是true 则为“捕获型”事件)
示例:
注意:
●使用这种方式同样可以为同一元素添加多个监听函数;
●在Firefox 浏览器中,函数的执行顺序与函数的添加顺序一致(Firefox 与IE 正好相反);
●在Firefox 浏览器中,这种方式添加的函数是执行外一个再执行另一个(逐个执行);
C 事件对象
i > 在IE 浏览器中,事件对象是window 对象的一个属性event 。

访问方式如下:
ii > 在标准的DOM 中,事件对象是作为处理函数的唯一参数来获得。

访问方式如下:
注意:
在IE 浏览器中,获得触发事件的对象源(HTML标签)是通过event 对象的srcElement属性;
在标准的DOM 中,获得触发事件的对象源(HTML标签)是通过event 对象的target属性;
获取事件目标的示例:
i > 关于keyCode属性和charCode 属性
keyCode属性:表示键盘按键码。

因此输入“a”字母和“A”字母时,都是显示键盘码65 ;charCode 属性:表示输入字符码。

因此输入“a”字母和“A”字母时,
分别显示97(a 字符码)和65(A 字符码);
注意:
在标准的DOM 中:既有keyCode属性,还有charCode 属性。

但在标准的DOM 中,keypress 事件中keyCode 属性值始终为0 值;
在IE 浏览器中:事件对象只有keyCode属性,没有charCode 属性。

但在IE 浏览器中,keypress 事件中的keyCode 属性值等同于标准DOM 中的charCode 属性的值;
示例代码:
方法一:
通过鼠标事件中,判断event 对象的button 属性值为“2”来屏蔽鼠标右键。

虽然这种方法在IE 浏览器中有效,但在标准的DOM 中无效。

并且,鼠标事件中,button 属性的值在IE 浏览器和标准的DOM 中大部分都不相同!
方法二:
其实,点击鼠标右键会触发右键菜单contextmenu 事件。

所以,屏蔽鼠标右键最有效的办法就是屏蔽document 对象的contextmenu 事件。

代码如下:
标准DOM 是通过preventDefault( ) 方法屏蔽右键菜单;
iii > 自定义鼠标右键菜单代码如下:。

相关文档
最新文档