javascript_事件

前端自己开发插件
idea前端开发插件
web前端开发谷歌插件
  1. 异步事件
    Javascript不使用线程处理方式,使用独特的异步事件模型。线程程序设计和异步程序设计的区别在于如何等待事件的发生。在线程中,要不断检查条件是否满足,不满足就会一直等待;在异步中,只需要简单地使用事件处理函数注册一个回调函数,一旦事件触发,就会立即执行回调函数。例如以下代码:
    while (!window.loaded()) { }

    document.getElementsByName(‘body’).style.border=’1px solid red’;
    如果javascript支持线程处理方式,上面的代码就会生效。但实际上上面的代码不会生效。while判断一直生效,一直检查页面是否加载完毕,加载完毕后返回true,才执行下面的style样式改变代码。
    那么,在javascript中如何处理上面的事件,注册一个函数,当页面载入完毕后执行:
    window.onload=function(){
    document.getElementsByName(‘body’).style.border=’1px solid red’;
    }

  2. 事件阶段
    Javascript事件机制在W3C未出标准之前,有两种处理方式。IE浏览器和NetScape浏览器分别对自家的浏览器采用了不同的发生机制。
    IE浏览器采用了冒泡型:子元素拥有优先权,从子元素向外到根节点。NetScape浏览器采用了捕获型:父元素拥有优先权,从根节点向内到子元素。
    表现在事件执行上的区别为:如果父级和子级分别绑定了事件,点击子级元素,冒泡型先执行子级元素对应的事件,然后执行父级元素的事件;捕获型就相反。
    在W3C的事件标准中,事件先进入由外向里的捕获阶段,再有里向外的捕获阶段。虽然一个事件要通过两个阶段,但对于现代浏览器,如果无特别指定的话,事件都在冒泡阶段处理。也就是说先执行子元素事件。关于如何更改事件在哪个阶段添加监听器后面会涉及。
    W3C规范中定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段。事件对象按照上图的传播路径依次完成这些阶段。如果某个阶段不支持或事件对象的传播被终止,那么该阶段就会被跳过。
    • 捕获 阶段:在事件对象到达事件目标之前,事件对象必须从window经过目标的祖先节点传播到事件目标。 这个阶段被我们称之为捕获阶段。在这个阶段注册的事件监听器在事件到达其目标前必须先处理事件。
    • 目标 阶段:事件对象到达其事件目标。 这个阶段被我们称为目标阶段。一旦事件对象到达事件目标,该阶段的事件监听器就要对它进行处理。如果一个事件对象类型被标志为不能冒泡。那么对应的事件对象在到达此阶段时就会终止传播。
    • 冒泡 阶段: 事件对象以一个与捕获阶段相反的方向从事件目标传播经过其祖先节点传播到window。这个阶段被称之为冒泡阶段。在此阶段注册的事件监听器会对相应的冒泡事件进行处理。

3.事件对象
Javascript事件处理函数一个标准特性是提供包含有关于当前事件的上下文信息,称为事件对象。但是要注意的是,IE浏览器和W3C标准使用的不一样。IE浏览器使用一个独立的全局事件对象(window.event),只能在事件处理函数内访问。W3C标准使用event,是个独立的参数。对象包含以下属性:
(1)类型(type)
这个属性包含当前触发的事件名称(click,mouseover等)。
(2)target/srcElement
这个属性包含触发事件的元素的引用。例如使用a(id=”a1”)标签触发事件,target就是这个a标签代表的DOM节点。srcElement是IE版本(IE浏览器太特殊了~~~~)
(3)stoppropagation()
这个方法的作用是不再派发事件。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。
cancelBubble属性可用在IE中,将之设置为true。
(4)proventDefault()
阻止兼容W3C的现代浏览器的默认行为。在IE中,使用returnValue=true。
以下是鼠标事件属性:
(5)clientX/clientY
这个属性包含相对于浏览器可见区域左上角的鼠标光标的x和y坐标的值,这个值会随着滚动条而改变
(6)pageX/pageY(IE9以上支持)
和(5)的参照点一样,但是其值不会随滚动条而改变。IE无可以直接替代的。所以在IE浏览中,要获取page的值还要加上滚动偏移量。
function getX(e){
// 先是非IE浏览器的位置,然后是IE的,最后一个返回0
return e.pageX||(e.clientX+(document.documentElement.scrollLeft||document.body.scrollLeft));
}

(7)layerX/layerY
layerX:FF特有,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了position的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。
(8)offsetX/offsetY
IE特有,鼠标相对于“触发事件的元素”的位置,从内容区域左上角开始定位,不是从border左上角开始!这个属性比较好用,用来判断鼠标点在一个元素中的哪个位置很方便,FF没有直接替换的属性。
(9) button

点击 IE W3C
左键 1 0
中键 2 2
右键 4 1
(10)relatedTarget
relatedTarget 事件属性返回与事件的目标节点相关的节点。
对于 mouseover 事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。
对于 mouseout 事件来说,该属性是离开目标时,鼠标指针进入的节点。
对于其他类型的事件来说,这个属性没有用。
以下是键盘事件属性:
(11)ctrlKey,shiftKey
该属性返回一个布尔值,表示键盘的ctrl(shift)键是否被按住。
(12)keyCode
这个属性包含一个键盘相应键位的数字,具体代表:

4.绑定事件监听函数
到目前为止,有三种绑定事件监听的方式(在html代码内部写事件处理函数代码的方式已经淘汰,不推荐)。传统绑定方式可靠稳定。IE和W3C分别有各自的方法。
(1)传统方法
element.onclick=function(){};
传统绑定方法为:DOM节点.on+(type)=function(e){事件处理};
优点:非常简单和稳定,可以确保在不同的浏览器中运作一致。特别的,使用this关键字将会简化代码。
缺点:事件只会在冒泡中运行,而不是捕获和冒泡。这也意味着事件不可以修改执行顺序。一个元素只能绑定一个事件处理函数,如果绑定多个,将会覆盖。
(2)W3C绑定:IE不支持这种绑定方式
方法:DOM节点.addEventListener(type,function,true||false);
参数说明:type:事件类型
function:回调函数,触发事件后要做什么(处理函数)。
最后一个参数可选,默认为false。false表示在冒泡阶段处理事件,true表示在捕获阶段处理事件。
优点:支持事件处理的捕获和冒泡阶段。在事件处理内部,this关键字引用当前元素。事件对象可以通过第二个参数function的第一个参数获取。可以为同一个语速绑定多个事件,而且不会覆盖。
缺点:IE坑货不支持,必须使用IE特有的绑定。
(3)IE绑定
方法:DOM节点.attachEvent(type,function)。参数和上面的addEventListener函数的第一个和第二个参数一致。
优点:为同一个元素绑定多个事件。
缺点:仅支持冒泡阶段。This关键字指向了window对象,而不是当前元素。事件对象存在于window.event参数中,type参数必需以ontype的形式命名,例如onclick。仅IE可用。
5.事件类型
1.页面事件
(1)load:事件在页面完全加载完毕时触发,该事件包含所中,有的图片,外部的Javascript文件,css文件。这个可以当做运行DOM相关代码的一种方法。
(2)beforeunload:和unload?表现一致。不同在于,在事件处理函数内部,如果返回的是字符串,那么字符串机会显示在确认窗口,以此来询问用户是否希望离开当前页面。
(3)error:在Javascript代码发生错误时触发,无需传递事件对象参数,二保焊一条已发生错误的解释信息。
(4)resize:用户重置浏览器窗口时触发。当用户调整浏览器窗口尺寸的时候,此事件只在完成重置时触发一次。
(5)scroll:用户在浏览器窗口移动文档的位置时触发(使用滚动条时)。
(6)unload:用户离开当前页(可以是点击链接,后退键或是关闭浏览器窗口)时触发。但是阻止浏览器默认行为的函数不能在此事件中生效。
2.UI事件
(1)focus:确定页面内鼠标的当前定位方式。默认在整个文档中,但是,点击或者使用键盘tab键切换到任何一个链接或表单输入元素的时候,focus就会进入该元素。
(2)blur:用户从一个元素到另一个元素改变焦点时触发。
3.鼠标事件
(1)click:用户在元素敲击鼠标左键并在相同的元素上松开鼠标左键时触发。
(2)dbclick:用户完成迅速连续两次点击后触发。
(3)mousedown:用户敲击鼠标键时触发。
(4)mouseup:用户松开鼠标时触发。如果在相同的元素上按下鼠标同时松开,click事件也会触发。
(5)mousemove:用户在页面内鼠标光标移动至少一像素时触发。
(6)mouseover:用户将鼠标从一个元素移动到另一个元素上时触发。需要知道来自哪一个元素,可以使用relatedTarget属性。
(7)mouseout:用户将鼠标移除一个元素时触发,包括从父元素到子元素。
4.键盘事件
(1)keydown/keypress:keydown事件是键盘敲击时触发的第一个键盘事件。如果用户继续按住键位,keydown事件将会持续进行。Keypress是keydown的同一事件,不同在于如果要阻止按键的默认事件,必须使用keypress事件。
(2)keyup:在keydown事件以后,最后一个发生的键盘事件松开键盘仅触发一次。
5.表单事件
(1)select:用户使用鼠标于输入框内选择不同区块的文本时触发。在该事件内,可以从新定义用户与表单的交互。
(2)change:用户改变了输入元素(包括<select>和<textarea>)的值时触发。该事件会在用户离开元素(元素失去焦点)时触发。
(3)submit:仅在表单内并且仅当用户点击了提交按钮或者在其中一个输入元素内 敲击了回车键才会触发。
(4)reset:用户点击了表单内的重置按钮才能触发。
6.jquery中的事件
1.页面加载
(1)ready()
ready()事件类似于js中的onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。此外,下列写法是相等的:
$(document).ready(function(){})等价于$(function(){});
如果处理函数绑定 给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。
绝大多数时候,你都可以使用ready()来取代window.onload。不过,也有一些例外情况,比如使用:target选择器时,你就必须使用window.onload事件(因为它还要依赖文档结构之外的某些内容)。
在多个js库共存的情况下,变量$的控制权可能会交给其它的js库,例如Prototype。此时,在全局作用域中我们只能使用变量jquery。不过ready()函数会传入一个参数:jquery,因此我们可以自定义参数名称,从而实现在函数内继续变量$来访问jQuery库(你也可以定为其他名称,然后用该参数变量来访问jQuery)。如下:

  1. // 载入Prototype库文件
  2. // 载入jQuery库文件
  3. //让出对变量$的控制权
  4. jQuery.noConflict();
  5. // 基于Prototype进行DOM操作(变量$的控制权在Prototype手中)
  6. $(“myDiv”).setStyle( {color: “#ffffff”} );
  7. jQuery(document).ready( function( $ ){
  8. // 在函数内部,我们仍然可以使用变量$来访问jQuery
  9. $(“#message”).html( “当前jQuery版本是:” + $.fn.jquery );
  10. } );
  11. jQuery(document).ready( function( abc ){
  12. // 在函数内部,我们可以使用变量abc来访问jQuery
  13. abc(“#message”).html( “当前jQuery版本是:” + abc.fn.jquery );
  14. } );
    jQuery中ready()方法的工作原理:在jQuery脚本加载到页面时,会设置一个isReady的标记,用于****页面加载的进度,当然遇到执行ready()方法时,通过查看isReady值是否被设置,如果未被设置,那么就说明页面并未加载完成,在此情况下,将未完成的部分用一个数组缓存起来,当全部加载完成后,再将未完成的部分通过缓存一一执行。
    2.事件处理
    (1)on()
    从jQuery1.7开始,jQuery提出了新的事件绑定机制,on()和off()两个函数统一处理事件绑定。以此来替换bind(), live(), delegate()等方法。现在建议都是用on()函数来绑定事件。
    使用格式:on(events,[selector],[data],fn),on函数返回当前使用的jQuery对象。
    参数说明:
    events:一个或多个用空格分隔的事件类型和可选的命名空间,如”click”或”keydown.myPlugin” 。
    selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择为null或省略,当它到达选定的元素,事件总是触发。
    data:当一个事件被触发时要传递event.data给事件处理函数。
    fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。
    on()函数相比于bind()函数而言,多了selector参数,所以可以使用on代替bind。
    live()绑定函数在1.7版本正式被废除,在此之前,应用很广泛,主要是live()函数有一个很好的作用:可以为动态添加的DOM元素绑定事件。Live现在不使用了。可以用on代替。
    delegate()是1.4引入的,目的是通过祖先元素来代理委派后代元素的事件绑定问题,某种程度上和live()优点相似。只不过live()是通过document元素委派,而delegate则可以是任意的祖先节点。使用on()实现代理的写法和delegate()基本一致。另外delegate函数参数的顺序和on不同。
    另外,其他三种绑定事件函数其实都是通过on函数来实现的。
    (2)off()
    off() 方法移除用.on()绑定的事件处理程序。
    使用:off(events,[selector],[fn]),返回当前jQuery对象。
    参数:
    events 可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如”click”、”focus click”、”keydown.myPlugin”。
    eventsMap Object类型一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events),属性值对应绑定的事件处理函数(参数handler)。
    selector 可选/String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略,则表示当前元素自身绑定事件(实际触发者也可能是后代元素,只要事件流能到达当前元素即可)。
    handler 可选/Function类型指定的事件处理函数。

参数selector必须与通过on()函数添加绑定时传入的选择器一致。
如果省略参数handler,则移除指定元素指定事件类型上绑定的所有事件处理函数。
(3)bind()
使用:bind(type,[data],fn),返回jQuery对象本身。
参数:
events String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如”click”、”focus click”、”keydown.myPlugin”。
data
可选/任意类型触发事件时,需要通过event.data传递给事件处理函数的任意数据。
handler Function类型指定的事件处理函数。
isDefaultBubble 可选/Boolean类型指定触发事件时,是否允许元素的默认行为和事件冒泡。默认为true。
eventsMap Object类型一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events),属性值对应绑定的事件处理函数(参数handler)。
在bind函数内部使用return false阻止冒泡才生效~~~~
(4)one()
one()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数。此外,你还可以额外传递给事件处理函数一些所需的数据。通过one()函数绑定的事件处理函数都是一次性的,只有首次触发事件时会执行该事件处理函数。触发之后,jQuery就会移除当前事件绑定。此外,你可以为同一元素、同一事件类型绑定多个一次性的事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。要删除通过one()绑定的事件,请使用unbind()或off()函数该函数属于jQuery对象(实例)。
用法:jQueryObject.one( events , selector [, data ], handler )
jQueryObject.one( eventsMap [, selector ] [, data ] )
参数:
events String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如”click”、”focus click”、”keydown.myPlugin”。
data
可选/任意类型触发事件时,需要通过event.data传递给事件处理函数的任意数据。
handler Function类型指定的事件处理函数。
selector String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。
eventsMap Object类型一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events),属性值对应绑定的事件处理函数(参数handler)。

idea 开发前端的插件
atom前端开发常用插件
前端开发vscode插件
» 本文来自:前端开发者 » 《javascript_事件》
» 本文链接地址:https://www.rokub.com/6427.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!