700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > js中事件对象event

js中事件对象event

时间:2023-01-31 22:14:08

相关推荐

js中事件对象event

一、Event对象

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);

attachEvent()函数语法:

elementObject.attachEvent(eventName,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]分别获取。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。