重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

js事件学习与总结-创新互联

一.(1)事件源(事件目标):在哪个组件上发生的事件,也就是发生事件的作用体或与之相关的对象。任何元素,body,html元素等等,都可以作为事件源。

创新互联是一家专注于成都网站制作、成都网站建设与策划设计,龙江网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:龙江等地区。龙江做网站价格咨询:18980820575

(2)事件:事件就是用户或浏览器自身执行的某种动作。比如:click,load,等等都是事件的名字。

(3)事件类型:表单事件,window事件,鼠标事件,键盘事件等。

  常用表单事件:

        focus(不冒泡,IE和ES5支持冒泡的focusin) 焦点事件,blur(不冒泡,IE和ES5支持冒泡的focusout) 失去焦点事件,submit  提交事件,change 改变事件,input  文本输入事件;

  常用的window事件:

        load 加载事件 ,unload 关闭事件,beforeunload 关闭之前的事件。DOMContentLoaded,它在DOM加载之后及资源加载之前被触发事件。 readyStatechage  当页面加载状态改变事件.

   常用的鼠标事件:

       click  单击事件,dbclick 双击事件,textcontentmenu 文本菜单事件,mouseover 鼠标放上事件,mouseout 鼠标离开事件,mousedown 鼠标按下事件,mouseup 鼠标抬起事件,mousemove 鼠标移动事件,mouseenter  鼠标移入事件,mouseleave 鼠标移除事件

  常用键盘事件:

      keypress   键盘事件,keyup 键盘抬起事件, keydown 键盘按下事件,

(4)事件传播:指浏览器决定哪个对象触发其事件处理程序的过程。

(5)事件流:指的是从页面接收事件的顺序,IE的事件流是事件冒泡流,而Netscape Communication的事件流是事件捕获流。事件在DOM中传播的顺序有两种类型:事件捕获和事件冒泡。

(6)DOM2级事件标准规定了事件流包括三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段。在DOM2级事件模型中,一旦事件被触发,事件流首先从DOM树顶部(文档节点)向下传播,直到目标节点,然后再从目标节点向上传播到DOM树顶。从上到下的过程被称为捕获阶段(该阶段包括从文档到目标节点的父节点范围内的所有节点),从下到上的过程被称为冒泡阶段,包括从目标节点的父节点返回到文档的行程中遇到的节点(即就是事件开始由文档中嵌套层次最深的那个具体的元素节点接收,然后逐渐向上级传播到较不具体的节点)。如图

    js 事件学习与总结

  第一部分称为捕获阶段,捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。第二部分称为目标阶段,该阶段仅包括目标节点(图中的div节点),事件在目标节点上被触发。第三部分称为冒泡阶段,事件在目标元素上触发后,并不在这个元素上终止,同一个事件会依次在目标节点的父节点,父节点的父节点...直到最外层的节点上被触发。举一个例子,来说明事件流的三个阶段:如图:

  js 事件学习与总结

      当点击最里层的span元素时,事件流首先从DOM树顶部(文档节点)向下传播,直到目标节点(如上图例中的span元素),然后再从目标节点向上传播到DOM树顶。从上到下的这个搜索dom树的过程,就是捕获阶段,而从下到上的span元素被选中,一直弹出对话框html元素被选中,这就是同一个事件的冒泡过程被称为冒泡阶段,也就是事件在目标元素上触发后,并不在这个元素上终止,会一直向上冒泡,直到最外层的节点上。

   不过,并非每个事件对象都参与事件流的所有三个阶段。而对于事件冒泡,在必要的时候还是需要相应的处理,这两个问题后期再继续学习研究。

(7)事件处理程序(事件监听程序):处理或者响应事件的函数。事件处理程序的名字以”on”开开头,比如click事件的处理程序就是onclick,

(8)事件对象(event):是与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给事件处理程序函数。

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章题目:js事件学习与总结-创新互联
标题来源:http://cqcxhl.com/article/dhpohh.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP