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事件
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对象。
javascript事件的用法
javascript事件的用法JavaScript 事件的用法如下：1. 在HTML 元素上绑定事件：可以通过在HTML 元素的属性中添加事件处理函数来绑定事件。
例如，可以通过添加`onclick` 属性来定义当元素被点击时要执行的代码。
示例代码如下：html<button onclick="myFunction()">点击我</button><script>function myFunction() {alert("Hello World!");}</script>2. 通过JavaScript 绑定事件：可以使用JavaScript 来为元素绑定事件处理函数。
可以通过`addEventListener` 方法来添加事件处理函数。
示例代码如下：html<button id="myButton">点击我</button><script>document.getElementById("myButton").addEventListener("click", myFunction);function myFunction() {alert("Hello World!");}</script>3. 事件参数：事件处理函数可以接收事件对象作为参数，可以使用事件对象来获取关于事件的信息，如事件类型、触发事件的元素等。
示例代码如下：html<button onclick="myFunction(event)">点击我</button><script>function myFunction(event) {alert("事件类型: " + event.type);alert("触发事件的元素: " + event.target);}</script>4. 移除事件处理函数：可以通过`removeEventListener` 方法来移除通过`addEventListener` 添加的事件处理函数。
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）来访问和操作事件的属性和方法。
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焦点事件、鼠标事件和滚轮事件使用详解
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事件机制中，通常以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方法表示窗口的大小。
js中绑定事件的几种方法
js中绑定事件的几种方法在JavaScript中，绑定事件的方法主要有以下几种：1. 直接在HTML元素中添加事件监听器：这是最古老的方法，直接在HTML元素中添加`onclick`、`onload`等属性，然后指定一个JavaScript函数。
```html<button onclick="myFunction()">Click me</button>```2. 使用`addEventListener`方法：这是现代的、推荐的方法，因为它可以添加多个事件监听器，并且可以移除它们。
```javascript("myButton").addEventListener("click", myFunction);```3. 使用`attachEvent`和`detachEvent`方法（IE浏览器专用）：这是旧版本的Internet Explorer（IE）浏览器中用于添加和移除事件监听器的方法。
```javascriptvar myButton = ("myButton");("onclick", myFunction);// ... 之后可以调用 detachEvent 来移除事件监听器```4. 使用`on`和`off`方法：这是另一种添加和移除事件监听器的方法，但不如`addEventListener`方法通用。
```javascriptvar myButton = ("myButton");('click', myFunction); // 添加事件监听器// ... 之后可以调用 off 来移除事件监听器，例如：('click');```5. 使用jQuery：jQuery是一个流行的JavaScript库，它提供了简洁的方法来添加和移除事件监听器。
Javascript自定义事件newEvent（）与newCustomEvent（）
Javascript⾃定义事件newEvent（）与newCustomEvent（）1.CustomEvent构造函数（事件是由程序创建的，可以有任意⾃定义功能的事件，此特性在 Web Worker 中可⽤）new CustomEvent(typeArg,customEventInit);typeArg:⼀个表⽰event名字的字符串customEventInit：（可选）⼀个字典类型参数，有如下字段：detail:可选的默认值是 null 的任意类型数据，是⼀个与 event 相关的值（向事件对象添加更多数据）bubbles:⼀个布尔值，表⽰该事件能否冒泡。
注意：测试chrome默认为不冒泡。
cancelable:⼀个布尔值，表⽰该事件是否可以取消。
CustomerEventInit 字典参数同样接受来⾃于 Event 类构造函数的 eventInit 字典参数bubbles和cancelable// add an appropriate event listenerobj.addEventListener("cat", function(e) { process(e.detail) });// create and dispatch the eventvar event = new CustomEvent("cat", {detail: {hazcheeseburger: true}});obj.dispatchEvent(event);2.Event()构造函数new Event(typeArg[, eventInit]);typeArg：是DOMString 类型，表⽰所创建事件的名称。
eventInit：（可选）是 EventInit 类型的字典，接受以下字段:"bubbles"，可选，Boolean类型，默认值为 false，表⽰该事件是否冒泡。
js事件练习题
js事件练习题JavaScript 事件练习题一、题目描述编写一个 JavaScript 程序，实现以下功能：1. 当页面加载完成后，输入框自动获取焦点。
2. 当用户在输入框内按下回车键时，控制台输出输入的文本内容。
3. 当用户点击页面其他位置时，控制台输出提示信息"请在输入框内按下回车键"。
二、解题思路1. 获取页面中的输入框元素，并使用 JavaScript 绑定 load 事件，确保页面加载完成后执行相关的操作。
2. 在 load 事件的回调函数中，使用 JavaScript 获取输入框元素，并调用 focus() 方法，使其自动获取焦点。
3. 给输入框元素绑定 keyup 事件，当用户在输入框内按下键盘键时触发该事件。
4. 在 keyup 事件的回调函数中，判断按下的键是否为回车键，如果是，则获取输入框的值，并将其输出到控制台。
5. 给页面绑定click 事件，当用户点击页面其他位置时触发该事件。
6. 在 click 事件的回调函数中，判断用户点击的目标元素是否为输入框，如果不是，则输出提示信息到控制台。
三、代码实现```javascript// 页面加载完成后执行操作window.addEventListener('load', function() {// 获取输入框元素var inputBox = document.querySelector('#inputBox');// 输入框自动获取焦点inputBox.focus();// 键盘按下事件inputBox.addEventListener('keyup', function(event) {// 判断按下的键是否为回车键if (event.keyCode === 13) {// 获取输入框的值var inputValue = inputBox.value;// 输出到控制台console.log(inputValue);}});// 页面点击事件document.addEventListener('click', function(event) {// 判断点击的目标元素是否为输入框if (event.target !== inputBox) {// 输出提示信息到控制台console.log('请在输入框内按下回车键');}});});```四、实现效果通过以上 JavaScript 代码的实现，我们可以达到以下效果：1. 页面加载完成后，输入框自动获取焦点。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
我的记录（JavaScript事件）JavaScript 事件冒泡简介及应用实例一、什么是事件冒泡在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。
二、事件冒泡有什么作用（1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。
【集中处理例子】<div onclick="eventHandle(event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"><div id="inSide" style="width:100px; height:100px;background:#CCC"></div></div><script type="text/javascript">//本例子只在外面盒子定义了处理方法，而这个方法一样可以捕获到子元素点击行为并处理它。
假设有成千上万子元素要处理，难道我们要为每个元素加“onclick="eventHandle(event)"”？显然没有这种集中处理的方法来的简单，同时它的性能也是更高的。
function eventHandle(e){var e=e||window.event;var obj=e.target||e.srcElement;alert(obj.id+' was click')}</script>（2）让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。
【同时捕获同一事件例子】<div onclick="outSideWork()" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"><div onclick="inSideWork()" id="inSide" style="width:100px;height:100px; background:#CCC"></div></div><script type="text/javascript">function outSideWork(){alert('My name is outSide,I was working...');}function inSideWork(){alert('My name is inSide,I was working...');}//因为下面程序自动激活单击事件，有些浏览器不允许，所以请单击灰色盒子，从这里开始下命令，这样因为冒泡的原因，黑色大盒子也会收到单击事件，并调用了自己的处理程序。
如果还有更多盒子嵌套，一样道理。
/*function bossOrder(){document.getElmentById('inSide').click();}bossOrder();*/</script>三、需要注意什么●事件捕获其实有三种方式，事件冒泡只是其中的一种：（1）IE从里到外（inside→outside）的冒泡型事件。
（2）Netscape4.0从外到里（outside→inside）的捕获型事件。
（3）DOM事件流，先从外到里，再从里到外回到原点（outside→inside→outside）的事件捕获方法（似乎对象将触发两次事件处理，这有什么作用？鄙人不懂！）。
●不是所有的事件都能冒泡。
以下事件不冒泡：blur、focus、load、unload。
●事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。
如Netscape4.0采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。
●事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。
在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。
●阻止冒泡并不能阻止对象默认行为。
比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。
四、阻止事件冒泡通常情况下我们都是一步到位，明确自己的事件触发源，并不希望浏览器自作聪明、漫无目的地去帮我们找合适的事件处理程序，即我们明确最精准目标，这种情况下我们不需要事件冒泡。
另外通过对事件冒泡的理解，我们知道程序将做多较多额外的事情，这必然增大程序开销。
还有一个重要的问题是：事件冒泡处理可能会激活我们本来不想激活的事件，导致程序错乱，甚至无从下手调试，这常成为对事件冒泡不熟悉程序员的棘手问题。
所以必要时，我们要阻止事件冒泡。
【不想激活的事件被激活例子】<div onclick="openWin('')" id="outSide"style="width:100px; height:100px; background:#000; padding:50px"><div onclick="openWin('')" id="inSide"style="width:100px; height:100px; background:#CCC"></div></div><script type="text/javascript">//本例你实际希望点击灰色盒子打开google首页，而点击黑色盒子打开baidu 首页，但结果你点击灰色盒子的时候，却是同时打开了两个网页。
其实在实际设计中较少遇到此问题，你可能会想如果我在页面不同DOM深处安置了不同的按钮或链接，深层处的事件触发会不会波及顶层的按钮呢？不会，因为按钮不能形成嵌套关系。
function openWin(url){window.open(url);}</script>下面是本人在网上抄的一个方法，把这个方法放在精准目标对象处理程序结尾，本事件触发处理结束后，事件将不在进行冒泡处理。
【阻止事件冒泡例子】<div onclick="showMsg(this)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px"><div onclick="showMsg(this)" id="inSide" style="width:100px;height:100px; background:#CCC"></div></div><script type="text/javascript">//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）function showMsg(obj){alert(obj.id);stopBubble(event)}//阻止事件冒泡函数function stopBubble(e){if (e && e.stopPropagation)e.stopPropagation()window.event.cancelBubble=true}</script>事例：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" lang="zh" xml:lang="zh"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="developer" content="Realazy" /><title>Bubble in JavaScript DOM</title><style type="text/css" media="screen">div * {display:block; margin:4px; padding:4px; border:1px solid white;}textarea {width:20em; height:2em;}</style><script type="text/javascript">//<![CDATA[function init(){var log = document.getElementsByT agName('textarea')[0];var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');for (var i = 0, n = all.length; i < n; ++i){all[i].onmouseover = function(e){this.style.border = '1px solid red';log.value = '鼠标现在进入的是：' + this.nodeName;};all[i].onmouseout = function(e){this.style.border = '1px solid white';};}var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');for (var i = 0, n = all2.length; i < n; ++i){all2[i].onmouseover = function(e){this.style.border = '1px solid red';if (e) //停止事件冒泡e.stopPropagation();window.event.cancelBubble = true;log.value = '鼠标现在进入的是：' + this.nodeName;};all2[i].onmouseout = function(e){this.style.border = '1px solid white';};}}window.onload = init;//]]></script></head><body><h1>Bubble in JavaScript DOM</h1><p>DOM树的结构是：</p><pre><code>UL- LI- A- SPAN</code></pre><div><ul><li><a href="#"><span>Bubbllllllllllllllle</span></a></li><li><a href="#"><span>Bubbllllllllllllllle</span></a></li></ul></div><textarea></textarea><p>鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（<code>mouseover</code>）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。