JavaScript每天必学之事件

2024-10-31 12:06:22

其实这篇文章挺早之前就写了，但是由于sf保存方面的bug，所以当时写了一大堆，结果没保存，觉得这个没写完是个不小的遗憾，今天正好有空，就给补充下了，也正好给我的javascript学习总结做一个完结篇。

这里，主要讨论一下js相关的事件——

事件处理程序

在DOM中定义了一些事件，而响应某个事件的函数就叫事件处理程序（或事件侦听器）。事件处理程序的名字一般以“on”开头，例如：onclick等

事件冒泡与捕获

事件流指的是页面中接收事件的顺序，IE，火狐和chrome浏览器都是事件冒泡，所谓是事件冒泡指的是事件最开始由最具体的元素接收，然后逐级向上传播到不具体的节点。而事件捕获则正好相反，事件捕获是由Netscape提出的，事件冒泡和捕获具体如下图所示：

虽然事件捕获是Netscape唯一支持的事件流模型，但目前IE9，火狐和谷歌也都支持这种事件流模型。

事件冒泡的好处

因为事件具有冒泡机制，因此我们可以利用冒泡的原理，把事件加到父级上，触发执行效果。这样做的好处当然就是提高性能了，

 <head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript">
 window.onload = function () {
  var aUl = document.getElementsById("bubble");
  var aLi = aUl.getElementsByTagName("li");

  for(var i = 0;i<aLi.length;i++){
  aLi[i].onmouseover = function () {
   this.style.backgroundColor = "blue";
  };
  ali[i].onmouseout = function () {
   this.style.backgroundColor = "";
  }
  }
 };
 </script>
</head>
<body>
<div>
 <ul id = "bubble">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>
</body>

这样我们就可以做到li上面添加鼠标事件。但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。html不变:

 <script type="text/javascript">
 window.onload = function () {
 var aUl = document.getElementsById("bubble");
 var aLi = aUl.getElementsByTagName("li");

 //不管在哪个事件中，只要你操作的那个元素就是事件源。
 // ie：window.event.srcElement
 // 标准下:event.target
 aUl.onmouseover = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;

  if(target.nodeName.toLowerCase() == "li"){
  target.style.background = "blue";
  }
 };
 aUl.onmouseout = function (ev) {
  var ev = ev || window.event;
  var target = ev.target || ev.srcElement;

  if(target.nodeName.toLowerCase() = "li"){
  target.style.background = "";
  }
 }
 };
</script>

那么，如何阻止事件的冒泡呢，看下面一个例子：

 <div onclick="showMsg(this,event)" id="outSide" style="width:100px; height:100px; background:#000; padding:50px">
<div onclick="showMsg(this,event)" id="inSide" style="width:100px; height:100px; background:#CCC"></div>
</div>
<script type="text/javascript">
//阻止事件冒泡后，你点击灰色盒子，整个过程只弹一次对话框了（注意与默认情况对比）
function showMsg(obj,e)
{
 alert(obj.id);
 stopBubble(e)
}

//阻止事件冒泡函数
function stopBubble(e)
{
 if (e && e.stopPropagation)
 e.stopPropagation()
 else
 window.event.cancelBubble=true
}
</script>

点击黑色外围的效果图：

DOM 0级事件处理程序

通过js指定事件处理程序通常是将回调函数赋给这个事件处理程序的属性。每个元素都有自己的事件处理程序属性（属性小写，例如：onclick）

 btn.onclick = function(){
 console.log('hello');
};

使用DOM 0级指定的事件处理程序被认为是元素的方法。因此，this指向当前元素：

 var btn = document.getElementById('myDiv');

//DOM上触发的事件会产生一个事件对象event
btn.onclick = function (event) {
 alert(this.id);//myDiv
};

DOM level 1

DOM level 1 专注于 HTML 和 XML 文档模型。它含有文档导航和处理功能。

DOM level 1 于 1998 年 10 月 1 日成为 W3C 推荐标准。

第二版的工作草案在 2000 年 9 月 29 日。

值得一提的是：DOM level 0 并不是 W3C 规范。而仅仅是对在 Netscape Navigator 3.0 和 IE 3.0 中的等价功能性的一种定义。

DOM 2级事件处理程序

DOM 2级定义了两个方法，用于指定和删除事件处理程序的操作：addEventListener()和removeEventListener()，他们都接受三个参数：

1.事件名。比如上面的click
2.作为事件处理程序的函数。
3.布尔值（true表示捕获阶段调用事件处理程序，false表示冒泡阶段）

通过Element对象的addEventListener方法，也可以定义事件的回调函数。

 //element.addEventListener(event, function, useCapture)

var btn = document.getElementById('myDiv');
btn.addEventListener('click', function () {
 console.log(this.id);
},false);

IE中的事件处理程序

IE9之前的IE浏览器不支持addEventListener()和removeEventListener（）。

与其他浏览器不同的是，IE使用的是attachEvent()和detachEvent()方法来为DOM添加事件处理程序，由于IE8及更早版本只支持事件冒泡，所以他们只接受两个参数：
1、事件处理程序名称（前面要加on）
2、事件处理程序函数
使用attachEvent()添加的事件处理程序如下：

 var btn = document.getElementById('myDiv');
btn.attachEvent('onclick', function () {
 console.log(this.id);
});

值得注意的是，使用attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，所以，此时this等于window

事件对象

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件相关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。event对象会被作为第一个参数传递给事件监听的回调函数。我们可以通过这个event对象来获取到大量当前事件相关的信息：
type (String) — 事件的名称
target (node) — 事件起源的DOM节点
currentTarget?(node) — 当前回调函数被触发的DOM节点（后面会做比较详细的介绍）
bubbles (boolean) — 指明这个事件是否是一个冒泡事件（接下来会做解释）
preventDefault(function) — 这个方法将阻止浏览器中用户代理对当前事件的相关默认行为被触发。比如阻止<a>元素的click事件加载一个新的页面
cancelable (boolean) — 这个变量指明这个事件的默认行为是否可以通过调用event.preventDefault来阻止。
stopPropagation (function) — 取消事件的进一步捕获或冒泡，bubbles为true使用这个方法
eventPhase：返回一个数字，表示事件目前所处的阶段，0为事件开始从DOM表层向目标元素传播，1为捕获阶段，2为事件到达目标元素，3为冒泡阶段。

此外，事件对象还可能拥有很多其他的属性，但是他们都是针对特定的event的。比如，鼠标事件包含clientX和clientY属性来表明鼠标在当前视窗的位置。

另外，stopPropagation()方法用于立即停止事件在DOM中的传播，即取消进一步的事件冒泡或捕获。

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 alert("clicked");
 event.stopPropagation();
};

//避免触发在document.body上的事件处理程序
document.body.onclick = function (event) {
 alert("Body clicked");
};

只有在事件处理程序执行期间，event对象才会存在，一旦事件处理程序执行完毕，event对象就会自动销毁。

IE中的事件对象

在DOM 0级中添加事件处理程序时，event对象是作为window对象的一个属性存在的：

 var btn = document.getElementById('myDiv');
btn.onclick = function (event) {
 var event = window.event;
 alert(event.type);//click
};

IE 的event对象同样也包含与创建它的事件相关的属性和方法。
cancleBubble 布尔   默认值时false，但可以被设置成true来取消事件冒泡，与dom中的 stopPropagation()方法相同。
returnValue   布尔    默认值是true，当设置成false时用以取消事件的默认行为与dom中的preventDefault（）相同。
srcElement　元素　事件的目标，与dom中的target属性相同。
type　　　　字符串   被触发的事件类型。

click事件

当用户点击以后，event对象会包含以下属性。
pageX，pageY：点击位置相对于html元素的坐标，单位为像素。
clientX，clientY：点击位置相对于视口（viewport）的坐标，单位为像素。
screenX，screenY：点击位置相对于设备显示屏幕的坐标，单位为设备硬件的像素

clientX，clientY

图示：clientX和clientY，他们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标（不包含滚动条区域）

偏移量

通过以下4个属性可以取得元素的偏移量。

（1）offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

（2）offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

（3）offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。

（4）offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

pageX，pageY

这两个属性表示鼠标光标在页面中的位置，在页面没有滚动的情况下，pageX，pageY的值与clientX，clientY的值相等

滚动大小

滚动大小，指的是包含滚动内容的元素的大小。

以下是4个与滚动大小相关的属性。

（1）scrollHeight：在没有滚动条的情况下，元素内容的总高度。

（2）scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

（3）scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

（4）scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

焦点事件

焦点事件会在页面元素获得或失去焦点时触发，有以下4个焦点事件：
1.blur：元素失去焦点时触发，该事件不冒泡
2.focus：元素获得焦点时触发。不冒泡
3.focusin：元素获得焦点时触发，冒泡
4.focusout：元素失去焦点时触发，冒泡

鼠标事件

DOM 3级定义了9个鼠标事件：
click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。

dbclick：用户双击鼠标时触发

mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。

mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。

mouseout：当鼠标离开元素时触发，这个事件不能通过键盘触发。

mouseover：当鼠标进入元素时触发，这个事件不能够通过键盘触发。

mouseenter：类似“mouseover”，但不冒泡，而且当光标移到后代元素上不会触发。

mouseleave：类似“mouseout”，但不冒泡。在元素上方是不触发。

mouseup：当用户释放鼠标按键时触发，不能够通过键盘触发。

传递给鼠标事件处理程序的事件对象有clientX和clientY属性，它们指定了鼠标指针相对于包含窗口的坐标。加入窗口的滚动偏移量，就可以把鼠标位置转换成文档坐标。
页面上的所有元素都支持鼠标事件。除了mouseenter和mouseleave外，所有的事件都冒泡，并且他们的默认行为是可以被取消掉的。但取消鼠标事件的默认行为可能会影响到其他事件，因为有些鼠标事件是相互依赖的。

拖拉事件

（1）drag事件
drag事件在源对象被拖拉过程中触发。
（2）dragstart，dragend事件
dragstart事件在用户开始用鼠标拖拉某个对象时触发，dragend事件在结束拖拉时触发。
（3）dragenter，dragleave事件
dragenter事件在源对象拖拉进目标对象后，在目标对象上触发。dragleave事件在源对象离开目标对象后，在目标对象上触发。
（4）dragover事件
dragover事件在源对象拖拉过另一个对象上方时，在后者上触发。
（5）drop事件

当源对象被拖拉到目标对象上方，用户松开鼠标时，在目标对象上触发drop事件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解javascript事件绑定使用方法

由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误.如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了. IE方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件名称, 函数),解除绑定 DO
关于JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数一.在DOM元素中直接绑定也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler
JavaScript中点击事件的写法

<button id="btn">click</button> var btn=document.getElementById('btn'); 第一种: btn.onclick=function(){ alert('hello world'); } 消除事件:btn.onclick=null;//就不会弹出框了第二种: btn.addEventListener('click',function(){alert('hello world')},false); b
JavaScript事件方法(实例讲解)

废话不多说,直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text
JavaScript事件处理的方式(三种)

最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,特此分享到我们平台供大家参考下! 一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用户在某些内容上的点击.鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是Web浏览器中发生的事情,比如说某个Web页面
JavaScript每天必学之事件

其实这篇文章挺早之前就写了,但是由于sf保存方面的bug,所以当时写了一大堆,结果没保存,觉得这个没写完是个不小的遗憾,今天正好有空,就给补充下了,也正好给我的javascript学习总结做一个完结篇. 这里,主要讨论一下js相关的事件-- 事件处理程序在DOM中定义了一些事件, 而响应某个事件的函数就叫事件处理程序(或事件侦听器).事件处理程序的名字一般以"on"开头,例如:onclick等事件冒泡与捕获事件流指的是页面中接收事件的顺序,IE,火狐和chrome浏览器都是事件冒
PyQt5每天必学之事件与信号

这一部分我们将探索 PyQt5 的事件和信号是如何在应用程序中实现的. Events事件所有的GUI应用程序都是事件驱动的.应用程序事件主要产生自用户,但它们也可通过其他方法来产生,例如一个互联网连接,一个窗口管理器,或计时器.当我们调用应用程序的exec_()方法,应用程序进入主循环.主循环检测各种事件,并把它们发送到事件对象. 在事件模型中,有三个参与者: event source(事件源) event object(事件对象) event target(事件目标) 事件源是对象的状态改变
JavaScript每天必学之基础知识

基本概念 javascript是一门解释型的语言,浏览器充当解释器.js执行时,在同一个作用域内是先解释再执行.解释的时候会编译function和var这两个关键词定义的变量,编译完成后从上往下执行并向变量赋值. 区分大小写 ECMASCript中的一切(包括变量,函数名和操作符)都区分大小写. 1. 变量变量在第一次用到时就设置于内存中,便于后来在脚本中引用.使用变量之前先进行声明.可以使用 var 关键字来进行变量声明. var count, amount, level; // 用单个 v
javascript每日必学之多态

朋友们大家好,今天我们就接着前面的内容讲,前面我们已经讲到了继承,今天我们就来讲OOP目前最后一个体现,那就是多态,因为javascript语言的灵活性,所以我们是没有办法使用接口的,所以这也给js程序带来了一定的困惑,大家也不用太着急关心这个问题,因为这些到后面ECMAScript后面的版本会给我们解决这些问题的,又扯远了,还是回到正题,OOP的多态,前面我们已经可以很明白的理解继承是什么样子的了,就是先声明一个父类,然后,我们可以写很多的子类来继承父类的属性和方法,这些我们就可以用最少的代码
JavaScript每天必学之数组和对象部分

对象部分 Object类型 Object 是一个无序的集合,可以存放任意类型对象,所有其他对象都继承自这个对象. 创建Object类型有两种,一种是使用new运算符,一种是字面量表示法. 1.使用new运算符创建Object var obj = new Object();//注意大写,也可以直接写成Object() 注意,通过new Object() 的写法生成新对象,与字面量的写法 obj = {} 是等价的. 2. 使用字面量方式创建: var obj = { name : 'trigk
javascript每日必学之运算符

读者朋友们好,前面我已经大概的了解了Javascript的作用以及一些基本的函数声明与变量声明,今天我们就接着前面的内容讲解,我们就来看一下javscript的逻辑(正序,分支,循环)以及一些简单的运算符下面我们就来讲一些简单的操作运算符 + 加号:1.用来计算两个数字相加之和,2.用来拼接两个字符串 - 减号:1.用来计算两个数字相减之差,2.用在一个数字前面来标识成一个负数 * 乘号:用来计算两具数字相乘之积 / 除号:用来计算被除数除以除数后,所得的商 % 取余:用来计算被除数除以除数后
javascript每日必学之基础入门

从今天开始,我将带领新朋友们,从了解javascript开始,一步一步地进阶到大神境界,别的不废话,现在开始,我们就一点一点地从入门阶段开始. 我们还是介绍一下javascript的身世,不然,大家会对javascript存在非常大的误解,它的产生历史,我们就过于多说,我也记不住,上学开始历史也没及过格 js与我们经常用来开发后台程序的java语言不是什么亲戚,他们的使用范围也是相差非常远,js只是用在html,用来对document节点进行增删改查,构建与服务器通讯的一种解释性语言而已,这只是
javascript每日必学之循环

朋友们大家好,今天,我们继续接着前面的内容讲,前们我们已经讲了条件分支,今天我们就讲循环,顾名思义就是,重复执行相同的操作,正常循环是受程序控制的,不正常的情况,就会出现死循环,那就是我们的代码中出现bug,那样,我们还要学会调式bug,等我们先把基础知识讲完了之后,我还会专门用篇幅来讲解浏览器里面的调试,那种程序就会在我们掌控之中,这才是我们想要结果. 循环包括的结构体有 for , while , do--while,for循环有两种形式的存在,一种是数字变量变化所引起的循环,另一种就是fo
javascript每日必学之继承

朋友们大家好,我们今天这一讲就接着前面的封装继续讲解,今天就是在前面内容上面的升级,OOP思想中的继承,我们就先来解释一下继承到底是什么意思,我们在什么地方会用到继续. 继承就是,后代继续祖先的一系列属性,行为.后代仍然算是与祖先同族,下面我们再用一些具体描述,来理解一下什么是继承中国人,跟美国人都是继承自人类祖先,所以我们具有相同的属性行为,但是还有一定的差异,后面我们们将继续讲到的多态,所以通过上面的示例图,我们可以清晰的知道,人与人之前其实大同小异,所以我们再看看下面的示例代码,我们
javascript每日必学之条件分支

大家好,我们今天接着前面的讲,前面已经大概了讲了一下运算符,今天的任务主要就是讲解逻辑条件分支,循环. 我们先就来模拟一个逻辑块,就用我们经常接触到的买车票来说吧,车票的价格对不同的人价格是有差别的,但是我们都是一样的去执行买票这个行为,我们就可以把买票写成一个函数BuyTicket //代码 function BuyTicket(){ console.log("请付款200元"); } 大家看到了这个函数体,其实是有缺陷的,我们每个人去买票的时候,都是执行这一个函数,如果是军人,或者

JavaScript每天必学之事件

相关推荐

随机推荐