JavaScript事件简介
时间：2023-04-02 16:00:33
HTML
Event事件的概念是文档或浏览器窗口中发生的一些特定的交互时刻。鼠标松开、文本框获得焦点、失去焦点等）事件触发顺序捕获--目标--冒泡事件流事件流是描述从页面接收事件的顺序，当几个有事件的元素堆叠在一起当你点击其中一个元素时，不仅当前点击的元素会触发事件，你点击范围内堆叠的所有元素都会触发事件。事件流包括两种模式：冒泡和捕获。事件冒泡事件冒泡是由内而外的一个个触发。事件捕获是从外到内一个一个触发的。现代浏览器默认采用事件冒泡模式。常用的事件类型'on'+事件名称形式：change事件---domain的内容被改变focus事件--元素获得焦点（不冒泡）blur事件---元素失去焦点（不冒泡）window事件：load事件——页面资源包括图像被加载，resize事件在页面完全加载时触发——窗口改变。scrollevent---当用户滚动带有滚动条的元素时触发鼠标事件：contextmenu--鼠标右键点击事件---点击mouseover事件（冒泡）---当鼠标移入一个元素时触发mouseenter事件(不冒泡)---鼠标移入元素时触发mouseout事件(冒泡)---鼠标刚移出元素时触发mouseleave事件(不冒泡)---触发mouseover的区别而mouseenter当鼠标刚好移出一个元素时是：mouseover,mouseout:元素的子元素也会触发事件mouseenter,mouseleave:元素的子元素不会触发event键盘事件——通常是window的objectordocumentobject调用keydown事件---键盘按键被按下keyup事件---键盘按键被释放。keypress事件----一个键盘按键被按下并释放。事件三要素：1.事件源：绑定事件的对象；2.事件名称：发生或绑定的事件；3.事件处理程序：要执行的函数或要处理的结果。事件的写位置：(1)内联：在页面的标签中---不利于维护内联注册事件，事件类型作为属性名，属性值是调用我们在js中定义的函数。相当于把函数的返回值赋值给onclickclickme
内联方式调用的函数不能放在window.onload中，否则找不到函数。(2)Embedded（属性绑定方式）：写在script标签之间---只能绑定Setafunction//先获取元素节点对象，然后给节点对象添加事件varbox=document.getElementById('box')box.onclick=function(){alert('我点击会弹出')(3)导入类型：一般用于后面将代码存放在.js文件中，导入到html文件中
注册事件的方法：(1)on+typevaroBtn=document.getElementById("btn1");oBtn.onclick=function(){alert('a')}oBtn.onclick=function(){alert('b')//一个节点对象只能绑定一个同名事件，后一个会覆盖前一个}(2)addEventListener：标准事件（即不支持）element.addEventListener('click',fn,false);//三个参数：“事件名称”、“事件回调”、“捕获(true)/冒泡(false)”。//FF和ChromeaddEventListener(eventname,function),这个方法ie不支持});oBtn.addEventListener("click",function(){alert("b");})(3)attachEvent:仅ie支持element.attachEvent('onclick',fn);//两个参数："on事件名称”、“事件回调”。varoBtn=document.getElementById("btn1");//IEattachEvent(eventname,function)，该方法只有ie支持，FF和Chrome都不支持oBtn.attachEvent("onclick",function(){alert(“A”）;}）;oBtn.attachEvent("onclick",function(){alert("b");})兼容写法：//ie只支持attachEvent，而FF和Chrome只支持addEventListenerfunctionaddEvent(obj,ev,fn)//obj是绑定事件的元素，ev是要绑定的事件，fn是绑定事件的函数{if(obj.attachEvent){obj.attachEvent("on"+ev,fn);}else{obj.addEventListener(ev,fn,false);}}//绑定事件addEvent(oBtn,"click",function(){alert("a");})移除事件函数removeEventListener(element,type,listener){if(element.removeEventListener){element.removeEventListener(类型，听众，假）；//标准事件}elseif(element.detachEvent){element.detachEvent("on"+type,listener);//即事件}else{element["on"+type]=null;//属性绑定事件}}事件对象(event)事件对象是当一个事件被触发时，浏览器会通过函数将事件对象作为参数传递过来，当一个事件触发执行函数时，一般会得到一个隐藏参数，它也被放置在参数数组中//argumentsfunctionfunc(){console.log(arguments.length);//1,得到一个一个传入的参数}func('hello');//事件绑定执行函数box.onclick=function(){console.log(arguments.length);//1、获取一个隐藏参数console.log(arguments);//数组console.log(arguments[0]);//获取事件对象([objectMouseEvent])};通过以上两组函数，我们发现通过事件绑定的执行函数可以得到一个Hidden参数。这意味着浏览器会自动分配一个参数。这个隐藏参数其实就是事件对象（eventobject）。通过函数内部的参数数组对象获取事件对象。box.onclick=function(){console.log(arguments[0]);//获取事件对象([objectMouseEvent])};通过向函数添加自定义参数（推荐）box.onclick=function(e){console.log(e);//[objectMouseEvent]}event事件兼容性问题：即无法通过传参获取，需要全局window.event获取兼容代码box.onclick=function(evt){vare=evt||窗口事件；//获取事件对象（eventobject）console.log(e);};其中window.event中的window可以省略，最后我们可以这样写：box.onclick=function(evt){vare=evt||事件;//获取事件对象(eventobject)console.log(e);};注意：evt||event不要反写事件对象属性button——返回鼠标键码（0代表鼠标左键，1代表鼠标滚动，2代表鼠标右键）event.clientX,event.clientY鼠标相对于浏览器窗口可见区域的X、Y坐标（窗口坐标）会随着页面左右滚动而变化。可见区域不包括工具栏和滚动条IE事件和标准事件都定义了这两个属性event.pageX,event.pageY浏览器内容区域的x,y坐标，不会随着页面滚动而变化类似于event.clientX,event.clientY，但是他们使用了这2个属性是文档坐标不是窗口坐标不是标准属性但得到广泛支持。这2个属性不存在于IE事件中。event.offsetX和event.offsetY是鼠标相对于事件源元素（srcElement）的X（左边界）和Y（上边界）坐标。只有IE事件有这两个属性，标准事件没有对应的属性。event.screenX,event.screenY事件目标对象target目标对象，存放绑定事件标准事件对象的元素节点对象使用event的target属性获取事件目标event.targetIE事件对象使用event的srcElement属性获取事件目标获取事件目标对象兼容代码写法：box.onclick=function(evt){vare=evt||事件;//获取事件对象（eventobject）varobjEle=eve.target||eve.srcElement;//获取事件目标对象};事件对象event：1.target：指向事件触发的目标元素对象，第一个事件源2.currentTarget：事件处理函数的元素对象，始终等于这个；target处于事件流的目标阶段；currentTarget处于事件流的捕获、目标和冒泡阶段。只有当事件流在target阶段时，两者指向相同，而在捕获冒泡阶段时，target指向被点击的对象，currentTarget指向当前事件活动的对象（通常是parentLevel)在事件中，this总是指当前对象始终是触发事件的事件源或者始终是正在执行事件处理函数的事件源//target等于目标节点对象（被点击的元素节点object)，也就是鼠标点击时具体的目标节点对象//currentTarget跟随事件流，永远等于this，//this等于正在执行事件处理函数的事件的对象//currentTarget指向当前事件活动的对象（同这个理解），事件冒险是禁止Bubble的。但是一般我们只是在指定的节点上添加事件，并不希望传递给下层节点触发事件，所以需要防止事件冒泡；有两种方法可以防止事件冒泡：（在指定不想继续传递事件的节点的事件执行函数中使用）1.取消冒泡，IEe.cancelBubble=true;停止传播，非IEe.stopPropagation()；例如：document.getElementsByTagName('input')[0].onclick=function(evt){vare=evt||窗口事件；//事件冒泡可以通过下面两个方法取消e.cancelBubble=true||e.stopPropagation();}阻止事件的默认行为。1.returnfalse//阻止默认右键菜单document.oncontextmenu=function(){console.log("右键被按下");returnfalse;//第一种：varimgBox=document.getElementById("img");functionturn1(链接){imgBox.src=link.href;}//第二种：functionturn2(link){imgBox.src=link.href;returnfalse;}//第三种：varlink3=document.getElementById("link3");link3.onclick=function(){imgBox.src=link3.href;返回假；}标准事件对象使用事件的preventDefault()方法来取消事件的默认行为event.preventDefault();//浏览器不会跳转3.IE事件对象使用事件的returnValue属性取消事件的默认行为，该属性默认值为true将e设置为false以取消事件的默认行为event.returnValue=false;//浏览器不会跳转到兼容的代码写法：functionStopDefault(){if(window.attachEvent){event.returnValue=false;}elseif(window.addEventListener){event.preventDefault();}}keycode:keyCode属性所有按键（包括功能键控制，alt，shift，tab，方向键等，不包括亮度，音量..键）当keydown和keyup事件发生时，事件对象的keyCode属性会包含对应于键盘上特定键的代码。对于字母数字字符集，keyCode属性的值对应于ASCII代码。document.onkeydown=function(evt){vare=evt||事件;控制台日志（e.keyCode）；//按任意键获取对应的keyCode};注意：大写字母和小写字母的编码是一样的，都是大写字母。字符编码：charCode属性Firefox、Chrome、Safari的事件对象都支持charCode属性。只有当按下字符键并使用keypress事件时，才会获取charCode。这个charCode的值对应的是ASCII码，和keyCode类似，只是charCode的字母区分大小写。(charkey:number,letter(casesensitive),char,space,carriagereturn)document.onkeypress=function(evt){vare=evt||事件;控制台日志（e.charCode）；}注意：您可以使用String.fromCharCode()将ASCII编码转换为实际字符
