网页设计与网站建设指标点,企业年金查询,做直播的视频在线观看网站,安徽工程建设官方网站作者 | 阮一峰概述事件发生以后#xff0c;会产生一个事件对象#xff0c;作为参数传给监听函数。浏览器原生提供一个Event对象#xff0c;所有的事件都是这个对象的实例#xff0c;或者说继承了Event.prototype对象。Event对象本身就是一个构造函数#xff0c;可以用来生… 作者 | 阮一峰概述事件发生以后会产生一个事件对象作为参数传给监听函数。浏览器原生提供一个Event对象所有的事件都是这个对象的实例或者说继承了Event.prototype对象。Event对象本身就是一个构造函数可以用来生成新的实例。event new Event(type, options);Event构造函数接受两个参数。第一个参数type是字符串表示事件的名称第二个参数options是一个对象表示事件对象的配置。该对象主要有下面两个属性。bubbles布尔值可选默认为false表示事件对象是否冒泡。cancelable布尔值可选默认为false表示事件是否可以被取消即能否用Event.preventDefault()取消这个事件。一旦事件被取消就好像从来没有发生过不会触发浏览器对该事件的默认行为。var ev new Event(look, {bubbles: true,cancelable: false });document.dispatchEvent(ev);上面代码新建一个look事件实例然后使用dispatchEvent方法触发该事件。注意如果不是显式指定bubbles属性为true生成的事件就只能在“捕获阶段”触发监听函数。// HTML 代码为// Hellovar div document.querySelector(div);var p document.querySelector(p);function callback(event) {var tag event.currentTarget.tagName;console.log(Tag: tag); // 没有任何输出}div.addEventListener(click, callback, false);var click new Event(click);p.dispatchEvent(click);上面代码中p元素发出一个click事件该事件默认不会冒泡。div.addEventListener方法指定在冒泡阶段监听因此监听函数不会触发。如果写成div.addEventListener(click, callback, true)那么在“捕获阶段”可以监听到这个事件。另一方面如果这个事件在div元素上触发。div.dispatchEvent(click);那么不管div元素是在冒泡阶段监听还是在捕获阶段监听都会触发监听函数。因为这时div元素是事件的目标不存在是否冒泡的问题div元素总是会接收到事件因此导致监听函数生效。实例属性Event.bubblesEvent.eventPhaseEvent.bubbles属性返回一个布尔值表示当前事件是否会冒泡。该属性为只读属性一般用来了解 Event 实例是否可以冒泡。前面说过除非显式声明Event构造函数生成的事件默认是不冒泡的。Event.eventPhase属性返回一个整数常量表示事件目前所处的阶段。该属性只读。var phase event.eventPhase;Event.eventPhase的返回值有四种可能。0事件目前没有发生。1事件目前处于捕获阶段即处于从祖先节点向目标节点的传播过程中。2事件到达目标节点即Event.target属性指向的那个节点。3事件处于冒泡阶段即处于从目标节点向祖先节点的反向传播过程中。Event.cancelableEvent.cancelBubbleevent.defaultPreventedEvent.cancelable属性返回一个布尔值表示事件是否可以取消。该属性为只读属性一般用来了解 Event 实例的特性。大多数浏览器的原生事件是可以取消的。比如取消click事件点击链接将无效。但是除非显式声明Event构造函数生成的事件默认是不可以取消的。var evt new Event(foo);evt.cancelable // false当Event.cancelable属性为true时调用Event.preventDefault()就可以取消这个事件阻止浏览器对该事件的默认行为。如果事件不能取消调用Event.preventDefault()会没有任何效果。所以使用这个方法之前最好用Event.cancelable属性判断一下是否可以取消。function preventEvent(event) {if (event.cancelable) { event.preventDefault(); } else {console.warn(This event couldn\t be canceled.);console.dir(event); }}Event.cancelBubble属性是一个布尔值如果设为true相当于执行Event.stopPropagation()可以阻止事件的传播。Event.defaultPrevented属性返回一个布尔值表示该事件是否调用过Event.preventDefault方法。该属性只读。if (event.defaultPrevented) {console.log(该事件已经取消了);}Event.currentTargetEvent.targetEvent.currentTarget属性返回事件当前所在的节点即正在执行的监听函数所绑定的那个节点。Event.target属性返回原始触发事件的那个节点即事件最初发生的节点。事件传播过程中不同节点的监听函数内部的Event.target与Event.currentTarget属性的值是不一样的前者总是不变的后者则是指向监听函数所在的那个节点对象。// HTML代码为// Hello Worldfunction hide(e) {console.log(this e.currentTarget); // 总是 trueconsole.log(this e.target); // 有可能不是 true e.target.style.visibility hidden;}para.addEventListener(click, hide, false);上面代码中如果在para节点的子节点上面点击则e.target指向子节点导致子节点(即 World 部分)会不可见。如果点击 Hello 部分则整个para都将不可见。Event.typeEvent.type属性返回一个字符串表示事件类型。事件的类型是在生成事件的时候指定的。该属性只读。var evt new Event(foo);evt.type // fooEvent.timeStampEvent.timeStamp属性返回一个毫秒时间戳表示事件发生的时间。它是相对于网页加载成功开始计算的。var evt new Event(foo);evt.timeStamp // 3683.6999999995896它的返回值有可能是整数也有可能是小数(高精度时间戳)取决于浏览器的设置。下面是一个计算鼠标移动速度的例子显示每秒移动的像素数量。var previousX;var previousY;var previousT;window.addEventListener(mousemove, function(event) {if ( previousX ! undefined previousY ! undefined previousT ! undefined ) {var deltaX event.screenX - previousX;var deltaY event.screenY - previousY;var deltaD Math.sqrt(Math.pow(deltaX, 2) Math.pow(deltaY, 2));var deltaT event.timeStamp - previousT;console.log(deltaD / deltaT * 1000); } previousX event.screenX; previousY event.screenY; previousT event.timeStamp;});Event.isTrustedEvent.isTrusted属性返回一个布尔值表示该事件是否由真实的用户行为产生。比如用户点击链接会产生一个click事件该事件是用户产生的Event构造函数生成的事件则是脚本产生的。var evt new Event(foo);evt.isTrusted // false上面代码中evt对象是脚本产生的所以isTrusted属性返回false。Event.detailEvent.detail属性只有浏览器的 UI (用户界面)事件才具有。该属性返回一个数值表示事件的某种信息。具体含义与事件类型相关。比如对于click和dblclick事件Event.detail是鼠标按下的次数(1表示单击2表示双击3表示三击)对于鼠标滚轮事件Event.detail是滚轮正向滚动的距离负值就是负向滚动的距离返回值总是3的倍数。// HTML 代码如下// Hellofunction giveDetails(e) {console.log(e.detail);}document.querySelector(p).onclick giveDetails;实例方法Event.preventDefault()Event.preventDefault方法取消浏览器对当前事件的默认行为。比如点击链接后浏览器默认会跳转到另一个页面使用这个方法以后就不会跳转了再比如按一下空格键页面向下滚动一段距离使用这个方法以后也不会滚动了。该方法生效的前提是事件对象的cancelable属性为true如果为false调用该方法没有任何效果。注意该方法只是取消事件对当前元素的默认影响不会阻止事件的传播。如果要阻止传播可以使用stopPropagation()或stopImmediatePropagation()方法。// HTML 代码为// var cb document.getElementById(my-checkbox);cb.addEventListener(click,function (e){ e.preventDefault(); },false);上面代码中浏览器的默认行为是单击会选中单选框取消这个行为就导致无法选中单选框。利用这个方法可以为文本输入框设置校验条件。如果用户的输入不符合条件就无法将字符输入文本框。// HTML 代码为// var input document.getElementById(my-input);input.addEventListener(keypress, checkName, false);function checkName(e) {if (e.charCode 97 || e.charCode 122) { e.preventDefault(); }}上面代码为文本框的keypress事件设定监听函数后将只能输入小写字母否则输入事件的默认行为(写入文本框)将被取消导致不能向文本框输入内容。Event.stopPropagation()stopPropagation方法阻止事件在 DOM 中继续传播防止再触发定义在别的节点上的监听函数但是不包括在当前节点上其他的事件监听函数。function stopEvent(e) { e.stopPropagation();}el.addEventListener(click, stopEvent, false);上面代码中click事件将不会进一步冒泡到el节点的父节点。Event.stopImmediatePropagation()Event.stopImmediatePropagation方法阻止同一个事件的其他监听函数被调用不管监听函数定义在当前节点还是其他节点。也就是说该方法阻止事件的传播比Event.stopPropagation()更彻底。如果同一个节点对于同一个事件指定了多个监听函数这些函数会根据添加的顺序依次调用。只要其中有一个监听函数调用了Event.stopImmediatePropagation方法其他的监听函数就不会再执行了。function l1(e){ e.stopImmediatePropagation();}function l2(e){console.log(hello world);}el.addEventListener(click, l1, false);el.addEventListener(click, l2, false);上面代码在el节点上为click事件添加了两个监听函数l1和l2。由于l1调用了event.stopImmediatePropagation方法所以l2不会被调用。Event.composedPath()Event.composedPath()返回一个数组成员是事件的最底层节点和依次冒泡经过的所有上层节点。// HTML 代码如下// // Hello// var div document.querySelector(div);var p document.querySelector(p);div.addEventListener(click, function (e) {console.log(e.composedPath());}, false);// [p, div, body, html, document, Window]上面代码中click事件的最底层节点是p向上依次是div、body、html、document、Window。
