事件对象

xiaoxiao2021-03-01  5

版权声明: https://blog.csdn.net/lhjuejiang/article/details/79455801 <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-e2445db1a8.css"> <div class="htmledit_views"> <h2><a name="t0"></a>一、Event对象</h2>

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用,函数不会在事件发生前被执行!

当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细信息(包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时,浏览器通过函数传递过来的。)都会被临时保存到一个指定的地方——event对象,供我们在需要的时候调用

二、获取event对象

在 W3C 规范中,event 对象是随事件处理函数传入的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式;但是对于 IE8.0 及其以下版本,event 对象必须作为 window 对象的一个属性。

 

IE、Chrome:event是一个内置的全局对象

标准下/FF:事件对象是通过事件函数的第一个参数传入(如果一个函数是被事件调用的,那么这个函数定义的第一个参数就是事件对象)

如何处理兼容性:

document.onclick = function fn(){ var ev = ev||event; alert('处理兼容'); }

例子:

<script> window.onload = function(){ var oDiv = document.getElementById( 'div1'); document.onmousemove = function(ev){ var ev = ev||event; //处理兼容性 oDiv.style.left = ev.clientX + 'px'; oDiv.style.top = ev.clientY + 'px'; } } </script>

三、事件流

事件流是描述的从页面接受事件的顺序,当几个都具有事件的元素层叠在一起的时候而层叠在你点击范围 , 并不是只有当前被点击的元素会触发事件 , 那么你点击其中一个元素的所有元素都会触发事件。而如果我们想要只触发其中一个事件时,此时就需要取消冒泡或捕获。现代浏览器默认都是冒泡类型,所以通常只需要取消冒泡即可。 

事件流包括两种模式:冒泡和捕获。

   1、冒泡:从里向外逐个触发。当你使用事件冒泡时,子级元素先触发,父级元素后触发

 事件冒泡机制:当一个元素接收到事件的时候,会把他接收的所有传播给他的父级,一直到顶层window

   2、捕获:从外向里逐个触发(与事件冒泡机制相反)当你使用事件捕获时,父级元素先触发,子级元素后触发

W3C模型

W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

阻止事件冒泡的方法

function stopBubble(e) { if(e && e.stopPropagation){ e.stopPropagation(); //非IE下 } else { window.event.cancelBubble = true; //IE下 } };

四、js事件绑定

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。 在JavaScript中,有三种常用的绑定事件的方法:

在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。

1、在DOM中直接绑定

<button onclick="open()">按钮 </button> <script> function open(){ alert( 1); } </script>

2、在js代码中绑定

<button id="btn">按钮 </button> document.getElementById('btn').onclick = function(){ this.style.background = 'yellow'; }

3、绑定事件监听函数

绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

addEventListener()函数语法: elementObject.addEventListener(eventName,handle,useCapture);

参数说明elementObjectDOM对象(即DOM元素)。eventName事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。handle事件句柄函数,即用来处理事件的函数。useCaptureBoolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,前面已经进行了讲解

attachEvent()函数语法: elementObject.attachEvent(eventName,handle);

参数说明elementObjectDOM对象(即DOM元素)。eventName事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。handle事件句柄函数,即用来处理事件的函数。

注意:事件句柄函数是指“ 函数名 ”,不能带小括号。 addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。     

下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:

<button id="btn">按钮 </button> <script type="text/javascript"> var oBtn = document.getElementById( 'btn'); function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 obj.addEventListener(type,handle, false); } catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent( 'on' + type,handle); } catch(e){ // 早期浏览器 obj[ 'on' + type] = handle; } } } addEvent(oBtn, 'click', function(){ //切记cliclk要加引号,没加会报错 this.style.width = 200+ 'px'; }); </script> <span style="color:#ffcc33">这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。</span>

注意:obj.addEventListener(‘click’,fn,true);(从外到里)//告诉Obj,如果有一个进去的事件触发了你,你就去执行fn这个函数              obj.addEventListeren(‘click’,fn,false);(从里到外)//告诉Obj,如果有一个出去的事件触发了你,你就去执行fn这个函数

总结一下就是:如果最后一个布尔值参数是true,就表示,在捕获阶段调用事件处理程序,如果是false,就表示在冒泡阶段调用事件处理程序

4、三种绑定事件的区别

第一种方式:函数写在结构层里面。非常不好,使页面很混乱,行为与结构得不到分离。并且在DOM结构如果绑定两个 “onclick” 事件,只会执行第一个;

第二种方式:行为与结构开始分离。第二种绑定方式中只能给一个时间绑定一个处理函数,在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

第三种方式:可以绑定多次同一个事件,且都会执行

1. <div id="btn" onclick="clickone()" onclick="clicktwo()"> </div>       <script>       function clickone(){ alert( "hello"); }  //执行这个       function clicktwo(){ alert( "world!"); }      </script>   2. <div id="btn"> </div>      <script>       document.getElementById( "btn").onclick = function(){ alert( "hello"); }       document.getElementById( "btn").onclick = function(){ alert( "world"); }  //执行这个      </script>   3. <div id="btn"> </div>      <script>       document.getElementById( "btn").addeventlistener( "click",clickone, false);       function clickone(){ alert( "hello"); } //先执行       document.getElementById( "btn").addeventlistener( "click",clicktwo, false);       function clicktwo(){ alert( "world"); } //后执行      </script>

5、如何取消事件绑定

第一种方式:document.onclick = null;(针对第一和第二两种绑定方式)

第二种方式:obj.detachEvent(事件名称,事件函数);(针对非标准IE下的绑定方式)

第三种方式:obj.removeEventListener(事件名称,事件函数,是否捕获);(针对标准浏览器下的绑定方式)

五、js事件委托

事件委托:利用事件冒泡的特性,将里层的事件委托给外层事件,根据event对象的属性进行事件委托,改善性能。

使用事件委托能够避免对特定的每个节点添加事件监听器;事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件。(事件委托看起来挺难理解,但是举个生活的例子。比如,有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。)

 

 

<ul id="ul-item"> <li class="item">item1 </li> <li class="item">item2 </li> <li class="item">item3 </li> <li class="item">item4 </li> </ul> <script type="text/javascript"> function fn(){ var oUlItem = document.getElementById( 'ul-item'); oUlItem.addEventListener( 'click',show, false); //添加监听事件 function show(ev){ var ev = ev || window.event; var src = ev.target||ev.srcElement; //兼容IE下和FF下以及其他浏览器 if(src && src.className.toLowerCase() === 'item'){ //tolowerCase,将字符串全部转化为小写字母 alert(src.innerHTML); } } }; fn(); </script>

以下为补充知识(js的event.srcElement与event.target(触发事件源))

IE下,event对象有srcElement属性,但是没有target属性;

Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的,即:

firefox 下的 event.target = IE 下的 event.srcElement

解决方法:使用obj = event.srcElement ? event.srcElement : event.target;

或:var evtTarget = event.target || event.srcElement;

js将html的所有控件都看成是一个个对象,通过js的各个属性,就能对其进行操作处理,js里对象的整体结构是树形的结构。一层一层的追溯,即可获取需要的结果。

event.srcElement:表示的当前的这个事件源。

event.srcElement.parentNode:表示当前事件源的父节点。

 parentNode:父节点,也就是上一层的节点。可以是任何一个标签。

event.srcElement.firstChild:当前事件的第一个节点,如果节点是input,通过event.srcElement.firstChild.value就可以获取此input的值。

event.srcElement.parentElement:是指在鼠标所在对象的上一个对象。

event.srcElement.children:当前节点下对象的个数,有多个的话就是个数组,如当前节点下有2个input的对象,要获取这两个可以用event.srcElement.children[0] 与 event.srcElement.children[1]分别获取。

 

 

 

转载请注明原文地址: https://www.6miu.com/read-3100262.html

最新回复(0)