迅闻网
让更多人看到你

javascript事件(JavaScript事件处理)

  javascript事件

JavaScript言语本身不会产生事情,产生事情的是网页文档和网页文档中的HTML元素。
什么是事情呢?事情便是网页文档或网页元素对外宣布的告诉。当HTML元素与用户产生交互行为时,该元素会触发相关的交互事情,例如:当用户用鼠标单击网页中的按钮时,按钮会触发鼠标单击事情(onclick)。元素本身也会触发事情,例如:当图片元素加载完结后,会触发加载完结事情(onload)。
HTML文档或元素触发事情时,会对JS宣布的告诉,告诉JS程序HTML文档或元素与用户产生了交互,或者内容产生了改变,JS能够处理这些事情。
HTML文档或元素也称为DOM目标,DOM是一套Web规范,它界说了拜访HTML文档目标的一套特点、办法和事情。DOM实际上是建立网页与JavaScript言语交流的桥梁。
JS如何监听事情?
如果JS需要对DOM目标触发的事情进行处理,就需要监听这些事情,浏览器会自动调用监听事情的JS函数。
JS有三种监听事情的办法:分别是内联特点监听、DOM特点绑定监听和运用事情监听函数。
内联特点监听
内联特点监听是在编写HTML元素代码时,直接写入元素的事情特点,事情特点值为JS函数或JS代码。
事例8:运用jQuery库的网页代码(事例代码见unit12\case1.html):
JavaScript开发事例
加数:
加数:
在上面的事例代码中,HTML元素button事情特点onclick的值为JS函数add(),add()函数在script标签内界说。事情特点onclick为用户运用鼠标单击元素触发的事情称号,button元素onclick特点的值为add()函数,当用户运用鼠标单击button元素时,浏览器会调用add()函数对该事情进行处理。
DOM特点绑定
DOM是网页编程接口,也称为文档目标模型,它能够被JS调用,用来动态操作或修正网页元素的内容。
DOM将HTML文档作为一个树形结构,网页文档中的元素都是树结构的节点,每个节点都是一个DOM目标,每个DOM目标都有事情特点,将JS函数赋值给DOM目标的事情特点,就将DOM触发的事情和JS函数绑定起来,当DOM事情触发后,浏览器会调用被绑定的JS函数。

javascript
JavaScript开发事例
加数:
加数:
事例代码中,onload是windows目标(windows是DOM的窗口目标,表示浏览器窗口)特点,该特点为网页加载完结事情,该特点绑定了处理事情的匿名JS函数。
在onload事情处理函数体内,应用document目标(DOM的文档目标)的getElementById()获取button目标,然后绑定button目标的onclick事情处理函数,其中button_add目标绑定了add()函数,button_mul目标绑定了匿名函数。
运用事情监听函数
该监听办法是HTML元素目标调用addEventListener()办法,来绑定事情的处理函数。详细运用办法如下:
addEventListener(event,function,useCapture)
参数event是要绑定的目标事情特点称号,event是字符串类型。留意:事情称号不运用”on”前缀,用”click”而不是”onclick”。
参数function是要绑定的函数,也称为回调函数,当目标事情触发时,该函数被调用,function能够是已界说的函数称号,也能够直接界说匿名函数。
参数useCapture是可选参数,类型是布尔类型,设置事情是否在捕获或冒泡阶段履行。该参数主要是设置事情的履行次序,当多个目标元素叠加在窗口的同一区域,若鼠标单击多个目标的一起区域时,捕获阶段的事情履行次序是从大到小,冒泡阶段的履行次序是从小到大。
useCapture若设置为true,事情处理在捕获阶段履行;useCapture若设置为false,事情处理在冒泡阶段履行。默以为false。
JavaScript开发事例
加数:
加数:

JavaScript事件处理

javascript事情处理的办法
办法1、在标签的事情特点中添加事情
运用HTML标签的事情特点绑定处理程序。需要注意的是,运用HTML标签的事情特点绑定事情处理程序的方法时,事情特点中的脚本代码不能包含函数声明,但可所以函数调用或一系列运用分号分隔的脚本代码。
示例:
办法2、运用事情源的事情特点绑定处理程序
使HTML和JS分离的其中一种方法是经过运用事情源的事情特点绑定事情处理函数,绑定格式如下:
obj.on事情名=事情处理函数
格式中的obj为事情源目标。绑定的事情程序通常为一个匿名函数的界说句子,或者是一个函数称号。
事情源的事情特点绑定处理程序示例:
oBtn.onclick=function(){//oBtn为事情源目标,它的单击事情绑定了一个匿名函数界说
alert(‘hi’)
};
示例:运用事情源的事情特点绑定事情处理函数。
绑定一个匿名函数
绑定一个函数名

未经允许不得转载:迅闻网 » javascript事件(JavaScript事件处理)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

迅闻网-让更多人看到你

登录/注册返回首页