标签 javascipt 下的文章

Javascript常用的几个事件


JavaScript通常在网页中帮助我们进行一些互动的特效,而事件是这些特效的基础。

1.onload 和 onUnload

onload用于网页加载时,通常用于打开网页时提示欢迎语言或者其他特效的初始化。

onUnload用于网页关闭时,举例可以使用在关闭网页时提示用户一些信息,或者做个调查之类的功能。

2.onFocus, onBlur 和 onChange

这3个事件通常相互配合用于验证表单内容。

onFocus是某个域获得焦点时触发

onBlur是某个域失去焦点时触发

onChange是某个域的内容改变并失去焦点时触发

3.onSubmit

在表单提交时触发。

例如下面的代码

在提交表单前会调用checkForm()函数,通常可以在该函数中写一些验证表单内容正确性的功能。

4.onMouseOver 和 onMouseOut

这两个事件通常用户创建一些动态的特效

onMouseOver是鼠标划到某个域内时触发,相反onMouseOut是离开某个域时触发。

例如下面代码演示了当鼠标划到一个图片上时提示一段文字。



利用js做鼠标滑过显示离开隐藏的特效


这个特效主要用在网页位置不够用而需要展示的内容又太多时使用。默认显示一个标题,鼠标停留在某个标题上才显示下面的内容。实现的思路很简单,注意判断id,相当是将display设为block反之设为none。

下面来看代码,和其他js特效一样。分为2部分。

1.js部分


2.html部分

  • 1.标题一
  • 2.标题二
  • 3.标题三
  • 这里只做了简单的文字。图片、链接等其他特效组件自行添加。

    演示地址:www.apieye.com/plus/97.html


    利用js让用户控制是否在新窗口打开链接


    该功能原理为遍历所有的a标签,checkbox选中是把所有的target设为"_blank",反之设为空值。

    代码由两部分组成,首先是js部分,如下:

    
    

    然后是一个checkbox,也可以换成别的,例如按钮或者个性的图片,这里以checkbox举例,因为相比checkbox更容易获得状态,演示看起来更简单清晰,代码如下:


    在适当为位置插入这两部分代码,就可以做到当打勾是该页所有链接都在新窗口打开,反之亦然。

    通常这个功能放在页头或页尾,方便对整站的控制,也可以设置cookie来记住用户的选择。

    测试地址:www.apieye.com/plus/70.html