event

属性 1) Event.bubbles 【只读】 返回一个布尔值，用来表示该事件是否在DOM中冒泡。 2) Event.cancelable 【只读】 返回一个布尔值，用来表示与这个事件相关的默认行为是否可以取消。如果该属性值为false ，则该事件的监听器无法阻止默认行为，调用preventDefault() 将产生错误。 3) Event.currentTarget 【只读】 当前注册事件的对象（当前元素）的引用。这个值会在传递的途中进行改变。 4) Event.defaultPrevented 【只读】 一个布尔值，表示是否已经阻止默认行为。 5) Event.eventPhase 【只读】 指示事件流正在处理哪个阶段。返回值0表示没有事件正在被处理，1表示事件正处于捕获阶段，2表示事件正处于目标阶段，3表示事件正处于冒泡阶段。 6) Event.target 【只读】 对事件起源目标（目标元素）的引用。 7) Event.timeStamp 【只读】 事件创建时的时间戳，在浏览器中此处的时间戳是距离该页面打开时刻的大小。 8) Event.type 【只读】 事件的类型，不区分大小写，返回值均为小写。 9) Event.isTrusted 【只读】 返回一个布尔值，表明当前事件是否由用户行为触发。 方法 1) event. preventDefault()

Event属性可以帮到你!!! 开发工具与关键技术：DreamWeaver Event属性 作者:听民谣的老猫 撰写时间：2019/1/16 15:30 在JavaScript学习过程中接触到的Event属性，在后期学习中对Event属性的简单使用和理解 你在前端学习过程中有想过鼠标点哪里某个div或者某张图片就出现在哪里，某个div或者某张图片跟着鼠标移动，通过按下某个键盘来达到你的某个想法??? Event属性可以帮到你!!! 每一个事件的触发会产生相应的事件对象（事件对象只有在事件发生时才会产生，手动创建是不存在的! ），Event属性。Event属性的作用是用来记录事件发生产生的一些相关信息。 那如何访问到Event属性? <script> window.onclick=function(e） { var e = event||window.event;(定义一个变量来获取事件对象，解决兼容性问题) console.log(e); }; </script> 如上代码，构建onclick事件，通过console.log()访问到onclick事件中相应Event属性值。（注意在事件函数外面是访问不到事件产生的Event属性值的） 在每一次触发事件都会产生相应Event属性值。 上面的图片就是通过console.log()访问到onclick事件中相应Event属性值

JS Event对象详解 参考资料: js添加事件和移除事件:addEventListener()与removeEventListener() Event 对象 Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。一旦事件发生,便会生成Event对象，如单击一个按钮，浏览器的内存中就产生相应的 event对象。 事件通常与函数结合使用，函数不会在事件发生前被执行！ event对象只在事件发生的过程中才有效。 event的某些属性只对特定的事件有意义。比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 firefox里的event跟IE里的不同，IE里的是全局变量，随时可用；firefox里的要用参数引导才能用，是运行时的临时变量。 在IE/Opera中是window.event，在Firefox中是event；而事件的对象，在IE中是 window.event.srcElement，在Firefox中是event.target，Opera中两者都可用。 Event 对象属性和方法 clientX，clientY：返回当事件被触发时，鼠标指针相对于浏览器窗口可视文档区域的左上角的的水平x坐标和垂直y坐标； screenX，screenY：返回当某个事件被触发时

这篇文章主要介绍了JavaScript event对象整理及详细介绍的相关资料,需要的朋友可以参考下 Event属性和方法： 1. type：事件的类型，如onlick中的click； 2. srcElement/target：事件源，就是发生事件的元素； 3. button：声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（firefox中 0代表左键，1代表中间键，2代表右键） 4. clientX/clientY：事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置；(在DOM标准中，这两个属性值都不考虑文档的滚动情况，也就是说，无论文档滚动到哪里，只要事件发生在窗口左上角，clientX和clientY都是 0，所以在IE中，要想得到事件发生的坐标相对于文档开头的位置，要加上 document.body.scrollLeft和 document.body.scrollTop) 5. offsetX,offsetY/layerX,layerY：事件发生的时候，鼠标相对于源元素左上角的位置（这一定要定义position:relative;，值 可以是fixed absolute relative这几种）； 6. x,y/pageX,pageY：检索相对于父要素鼠标水平坐标的整数； 7.

为什么使用事件监听？ 当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的 onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。 用 .addEventListener( ) 可以为元素绑定多个事件，而且每个事件都可以被执行，实现事件监听。 语法： Element.addEventListener( event, function, useCapture ) event: 第一个参数是 事件 的类型 (如 "click" 或 "mousedown"). function: 第二个参数是事件 触发后调用的函数 。 useCapture: 第三个参数是个 布尔值 用于描述事件是 冒泡还是捕获 。该参数是可选的。 <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> <button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); }); </script> 向一个元素添加多个事件 var x = document

事件绑定   在我们对一个元素绑定了事件处理函数，并且事件触发后，我们才会得到自己想要的与网页的交互。抛开事件监听函数不谈，我们有两种绑定事件处理函数的方法:   1.通过HTML来绑定事件处理函数 <a href="" onclick="fo()">hello</a> <script> function fo(){ alert('Hello World!') } </script>   这种方式和写css样式时通过标签的style属性直接设置行内样式类似。这样会让代码看起来一团糟，也违背了将实现动态行为的代码与显示文档静态内容的代码相分离的原则。   2.在JavaScript 中绑定事件处理函数   如果在JavaScript 中分配事件处理函数， 首先获得要处理的对象的引用，然后将函数赋值给对应的事件处理函数属性。 <button id="mylink"></button> <script> var link = document.getElementById("mylink"); link.onclick = function () { alert("Hello World !"); }; </script>   但我们想要对同一个对象使用onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，只会执行最后绑定的方法

作用： addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。 它们都接受3个参数：事件名、事件处理的函数和布尔值。 布尔值参数是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。 示例： 环境：移动端，界面禁止触摸事件 要在body上添加事件处理程序，可以使用下列代码： document . body . addEventListener ( 'touchmove' , function ( event ) { event . preventDefault (); }, false )； 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；移除时传入的参数与添加处理程序时使用的参数相同。这也 意味着通过addEventListener()添加的匿名函数无法移除 错误用法示例： document . body . addEventListener ( 'touchmove' , function ( event ) { event . preventDefault (); }, false ); document . body . removeEventListener ( 'touchmove' ,

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。 <body> <div id="content"> 外层div元素 <span>内层span元素</span> 外层div元素 </div> <div id="msg"></div> </body> <script type="text/javascript"> $(function(){ // 为span元素绑定click事件 $('span').bind("click",function(){ var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";//获取html信息 $('#msg').html(txt);// 设置html信息 }); // 为div元素绑定click事件 $('#content').bind("click",function(){ var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>"; $('#msg').html(txt); }); // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) <

事件 如何绑定事件 ele.onxxx = function(event) { } 兼容性好, 但是一个元素的同一个事件上只能绑定一个处理程序 基本等同于写在HTML行间 obj.addEventListener(type, function( ){ }, flase); IE9以下不兼容, 可以为一个事件绑定多个处理程序 obj.attachEvent(‘on’ + type, fn); IE独有, 一个事件同样可以绑定多个处理程序 事件处理程序的运行环境 ele.onxxx = function(event) { } 程序this指向是dom元素本身 obj.addEventListener(type, fn, false); 程序this指向是dom元素本身 obj.attachEvent(‘on’ + type, fn); 程序this指向window 封装兼容性的addEvent(elem, type, handle);方法 function addEvent (elem, type, handle) { if (elem.addEventListener) { elem.addEventListener(type, handle, false ); } else if (elem.attachEvent) { elem[ 'temp' ] = function () {

(1)相关概念 事件流的概念：事件流所描述的就是从页面中接受事件的顺序。 事件流也有两种，分别是事件冒泡和事件捕获，现行的主流是事件冒泡。 以上就是通过原生js将每一个div都绑定了一个事件，且通过useCapture这个参数将事件类型设置为true(捕获）或者 false(默认为false,冒泡） 需要注意的是：更改事件流的属性，只能通过原生js中的方法，因为只有原生js中有更改事件流属性的参数，其它没有。jquery的事件流是冒泡型的，里面的事件都是冒泡型的，没法更改事件流的属性，因为方法中没有更改事件流的参数。 冒泡事件定义： 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 事件委托机制： 由冒泡事件衍生出的事件委托机制,既然事件是冒泡传递的，那可以让某个父节点统一处理事件，通过判断事件的发生地（即事件产生的节点），然后做出相应的处理。就是将子元素的事件处理程序绑定到父类上，例如常见的ul>li> a列表标签的写法应用。 此处给出一个委托机制的例子： 源程序： <ul> <li