世间万物,千变万化,面向对象的编程亦是对现实社会的模拟,而JavaScript是一种基于对象并且很接近面向对象编程的编程语言,而我们web设计师/程序员跟JavaScript打交道亦要直面JavaScript才能够把网页写得更加丰富多彩.在此先搞清楚一点就是:JavaScript并不仅仅用在Web上,它可以用在许多领域,当然我这里讨论的更多的是JavaScript在Web上的应用,并且主要是事件方面的应用.
JavaScript并不能直接对Web对象进行操作,而是要通过浏览器提供的Document Object Modle(即常听说的DOM,文档模型对象)来操作对象.HTML是一个树文档,它以HTML标签为根,其它的元素都是在HTML标签之内,一级一级地延伸下去.而DOM中,则以window为根对象,其它的对象则为它的子对象或者它的子对象的子对象.
首先来认识一下什么叫事件,请看下边的代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
很简单的一个实例,页面只有一个按钮,它的value值为"这是一个按钮",并且我们给它指定了onclick属性,它的值为一行JavaScript代码,使用了window对象的alert方法,将this.value的内容显示在警告窗体中.这里的this是啥呢?this就是当前操作的对象,即该input对象.这份代码告诉浏览器:"当前对象受点击"的时候要调用window.alert(this.value)这行代码,因此浏览器在按钮受点击的时候就执行了相关的操作.一个对象可以有许多事件,比如说单击(click),双击(dbclick),鼠标移到上边(mouseover),鼠标移开(mouseout)等等,这些事件经常在各种流传的代码中可以看到.那如何给一个对象设置事件发生时执行的代码呢?一般来说有以下三种方式:
第一种:直接设置HTML元素的事件属性,名称一般是on+事件名称,比如说单击事件即为onclick,实例请见上边的代码
第二种:在script中对HTML对象设置事件属性,名称一般也是on+事件名称,比如说obj.onclick = 函数,请见实例代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
或者:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这第二种方式有两种方法来指定执行的代码,但本质上是一样的,同样是指定一个函数给对象,要求对象当某事件发生的时候执行该函数.
第三种方式: 使用obj.attachEvent(IE浏览器)/obj.addEventListener方法来指定,建议使用此方法:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
为什么建议第三种方式呢?上边所列的第一种方式很明显只是设置一下元素属性,只可能指定一次,而第二种方式与第三种方式的差别可以从下边的实例中看出来:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上边的示例使用了两个按钮,并且使用了第二种方式与第三种方式先后指定了两个函数给click事件,点击第一个按钮可以看到弹出了"指定的第二个函数",说明只有MyButton_Onclick1_2函数生效,而先前指定的MyButton_Onclick1_1被MyButton_Onclick1_2代替了。点击第二个按钮可以看到弹出了两个窗体,显示的内容分别是"指定的第一个函数"和"指定的第二个函数",很明显,使用attachEvent/addEventListener可以即增加要执行的程序并且还能够保留原有的程序,在IE中,它们是根据增加的顺序倒序执行,即先执行后添加的MyButton_Onclick2_2,然后再执行MyButton_Onclick2_1,而Firefox中则是相反,先执行MyButton_Onclick2_1然后再执行MyButton_Onclick2_2。。没办法,IE和Firefox是冤家,对着干。。呵呵
好了,俺还有项目要赶,只好先写到这里,最近比较忙,呵呵。下篇文章计划将利用本文的内容写一点应用,内容为:使用DHTML将span元素模拟成A元素,它亦是本文的后续文章,但不仅仅是关于事件了,还会配合CSS。
PS: 以上内容皆为本人所知,如有不当之处欢迎指正,不用给俺面子,文章内容严谨才不会误导读者嘛。。同时也呼吁有能力的网友也加入到原创计划中来。感谢此文的读者以及支持无忧脚本原创计划的网友。
再补充一个 IE 专有的事件驱动方法 Named Script
虽然不太建议这么写,不过做为一个介绍还是有必要的,如果在只考虑 IE 用户的情况下,此方法还是有一定的便利性的。
Named Script 通过 <script> 标签来定义对象事件。
语法:
<SCRIPT
CLASS=classname
DEFER
EVENT=eventname
FOR=element
ID=value
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS | XML
SRC=url
TITLE=text
TYPE=MIME-type
>
其它属性与我们通常使用的 <script> 标签无异,就不过多介绍了,主要说的是 event 和 for 这两个属性。event 属性表示了脚本在什么事件触发执行,for 属性表示事件触发的对象,就以红亭的例子让我们来看试一下:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
大家应该看到了,效果和其它的方法是一样的,也许有人会说既然一样而且兼容性又不好,为什么还要这么用呢?请看下面的例子:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这个例子有多个相同的 name 的对象,(注意:是 name 而不是 id,在 DOM 标准中 id 应该是唯一的,虽然在 IE 中可以有多个相同 id 的对象,不过不建议大家这么做。)只用一句 Named Script 就可以对这些对象完成事件驱动,从代码上来说简便了不少,及至以后的修改也变的非常方便,这也是 Named Script 的最大优点。
应用最多的地方会在表单的 Radio 或者 Checkbox 对象上,因为它们一般都会有相同的 name,而同时也会有相同的事件驱动,具体的应用范围很广,可以在无忧脚本 http://www.51j.com/ 里搜索到大量的应用实例,在此仅做一些简单的介绍,就不过多的举例了。 最后再次重申一下,此方法仅为 IE 特有,其它其它浏览器不支持。
判断window.document.all是否为null是判断当前浏览器是IE还是Firefox最简单的方法,因为IE有这个对象,而firefox没有。
JavaScript并不能直接对Web对象进行操作,而是要通过浏览器提供的Document Object Modle(即常听说的DOM,文档模型对象)来操作对象.HTML是一个树文档,它以HTML标签为根,其它的元素都是在HTML标签之内,一级一级地延伸下去.而DOM中,则以window为根对象,其它的对象则为它的子对象或者它的子对象的子对象.
首先来认识一下什么叫事件,请看下边的代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
很简单的一个实例,页面只有一个按钮,它的value值为"这是一个按钮",并且我们给它指定了onclick属性,它的值为一行JavaScript代码,使用了window对象的alert方法,将this.value的内容显示在警告窗体中.这里的this是啥呢?this就是当前操作的对象,即该input对象.这份代码告诉浏览器:"当前对象受点击"的时候要调用window.alert(this.value)这行代码,因此浏览器在按钮受点击的时候就执行了相关的操作.一个对象可以有许多事件,比如说单击(click),双击(dbclick),鼠标移到上边(mouseover),鼠标移开(mouseout)等等,这些事件经常在各种流传的代码中可以看到.那如何给一个对象设置事件发生时执行的代码呢?一般来说有以下三种方式:
第一种:直接设置HTML元素的事件属性,名称一般是on+事件名称,比如说单击事件即为onclick,实例请见上边的代码
第二种:在script中对HTML对象设置事件属性,名称一般也是on+事件名称,比如说obj.onclick = 函数,请见实例代码:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
或者:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这第二种方式有两种方法来指定执行的代码,但本质上是一样的,同样是指定一个函数给对象,要求对象当某事件发生的时候执行该函数.
第三种方式: 使用obj.attachEvent(IE浏览器)/obj.addEventListener方法来指定,建议使用此方法:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
为什么建议第三种方式呢?上边所列的第一种方式很明显只是设置一下元素属性,只可能指定一次,而第二种方式与第三种方式的差别可以从下边的实例中看出来:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
上边的示例使用了两个按钮,并且使用了第二种方式与第三种方式先后指定了两个函数给click事件,点击第一个按钮可以看到弹出了"指定的第二个函数",说明只有MyButton_Onclick1_2函数生效,而先前指定的MyButton_Onclick1_1被MyButton_Onclick1_2代替了。点击第二个按钮可以看到弹出了两个窗体,显示的内容分别是"指定的第一个函数"和"指定的第二个函数",很明显,使用attachEvent/addEventListener可以即增加要执行的程序并且还能够保留原有的程序,在IE中,它们是根据增加的顺序倒序执行,即先执行后添加的MyButton_Onclick2_2,然后再执行MyButton_Onclick2_1,而Firefox中则是相反,先执行MyButton_Onclick2_1然后再执行MyButton_Onclick2_2。。没办法,IE和Firefox是冤家,对着干。。呵呵
好了,俺还有项目要赶,只好先写到这里,最近比较忙,呵呵。下篇文章计划将利用本文的内容写一点应用,内容为:使用DHTML将span元素模拟成A元素,它亦是本文的后续文章,但不仅仅是关于事件了,还会配合CSS。
PS: 以上内容皆为本人所知,如有不当之处欢迎指正,不用给俺面子,文章内容严谨才不会误导读者嘛。。同时也呼吁有能力的网友也加入到原创计划中来。感谢此文的读者以及支持无忧脚本原创计划的网友。
再补充一个 IE 专有的事件驱动方法 Named Script
虽然不太建议这么写,不过做为一个介绍还是有必要的,如果在只考虑 IE 用户的情况下,此方法还是有一定的便利性的。
Named Script 通过 <script> 标签来定义对象事件。
语法:
<SCRIPT
CLASS=classname
DEFER
EVENT=eventname
FOR=element
ID=value
LANGUAGE=JAVASCRIPT | JSCRIPT | VBSCRIPT | VBS | XML
SRC=url
TITLE=text
TYPE=MIME-type
>
其它属性与我们通常使用的 <script> 标签无异,就不过多介绍了,主要说的是 event 和 for 这两个属性。event 属性表示了脚本在什么事件触发执行,for 属性表示事件触发的对象,就以红亭的例子让我们来看试一下:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
大家应该看到了,效果和其它的方法是一样的,也许有人会说既然一样而且兼容性又不好,为什么还要这么用呢?请看下面的例子:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
这个例子有多个相同的 name 的对象,(注意:是 name 而不是 id,在 DOM 标准中 id 应该是唯一的,虽然在 IE 中可以有多个相同 id 的对象,不过不建议大家这么做。)只用一句 Named Script 就可以对这些对象完成事件驱动,从代码上来说简便了不少,及至以后的修改也变的非常方便,这也是 Named Script 的最大优点。
应用最多的地方会在表单的 Radio 或者 Checkbox 对象上,因为它们一般都会有相同的 name,而同时也会有相同的事件驱动,具体的应用范围很广,可以在无忧脚本 http://www.51j.com/ 里搜索到大量的应用实例,在此仅做一些简单的介绍,就不过多的举例了。 最后再次重申一下,此方法仅为 IE 特有,其它其它浏览器不支持。
判断window.document.all是否为null是判断当前浏览器是IE还是Firefox最简单的方法,因为IE有这个对象,而firefox没有。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年11月30日
2024年11月30日
- 窦唯《八段锦》(上海音像)[WAV+CUE]
- DJ动力100%《堵在路上的解闷high曲》[FLAC/MP3][948M]
- 节奏炸裂《抖音最嗨 DJ 舞曲大合集》[FLAC/MP3][2G]
- 群星《百代No.1精选》[WAV+CUE][965M]
- 费玉清《中华民GUO》海山专辑[正版原抓WAV+CUE]
- Brahms-PianoConcertoNo.2(KarlBohm-VPO,WilhelmBackhaus-piano,1967)[SACD-WAV]
- ConcertoScirocco-SirensSoldiers.SongswithoutWordsfromtheItalianSeicento(2024)[24B
- 群星《天赐的声音第五季 第12期》[320K/MP3][339.36MB]
- 群星《天赐的声音第五季 第12期》[FLAC/分轨][1.64G]
- 颜人中《这是一张情歌专辑》[320K/MP3][48.9MB]
- Mozart-ViolinConcertosNos.34-FrancescaDego,RoyalScottishNationalOrchestra,SirR
- Mendelssohn,Dvorak-ViolinConcertos-Menuhin,Enescu(2010)FLAC+CUE
- 黑鸭子2006-樱桃女声[首版][WAV+CUE]
- 颜人中《这是一张情歌专辑》[FLAC/分轨][258.76MB]
- 华晨宇《华晨宇日出演唱会特辑》[320K/MP3][101.77MB]