.onclick事件

点击事件（onclick并不是js中的方法，onclick只是浏览器提供js的一个dom接口，让js可以操作dom，所以onclick大小写都是没问题的，比如HTML代码就不用区分大小写）

例：

<%@pagelanguage="Java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

    functionmyFunction(){

       alert("测试onclick点击事件");

    }

    </script>

</head>

<body>

<center>

<buttononclick="myFunction()">点击这里</button>

</center>

</body>

</html>

onclick通常在下列基本对象中产生：

button(按钮对象)、checkbox(复选框)、radio(单选框)、reset buttons(重置按钮)、submit buttons(提交按钮)

.onload事件

可以body执行，<bodyonload="alert(123)"></body>,其中onload后面可以写一个方法，如：onload="test()",然后在JavaScript中写一个test()方法，则在页面一开始加载的时候会先调用这个方法

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

    functiontest(){

       alert("测试onload方法");

    }

    </script>

</head>

<bodyonload="test()">

</body>

</html>

注意：此方法只能写在<body>标签之中

.onchange事件

事件在内容改变的时候触发，和jQuery中的change()方法一样

当内容改变时触发。可用于文本框、列表框等对象，该事件一般用于响应用户修改内容带来的其他改变操作。

说明：当用户向一个文本框中输入文本时，不会触发onchange事件，只有用户输入结束后，单击文本框以外的区域，使文本框失去焦点时才触发该事件，如果是下拉框，则选择结束后即触发。

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

       functionupperCase(){

         varx = document.getElementById("fname").value;

         document.getElementById("fname").value = x.toUpperCase();

        }

     </script>

</head>

<body>

 <p>

 <labelfor="name">用户名：</label>

 <inputtype="text"id="fname"onchange="upperCase()"value=""/>

</p>

</body>

</html>

说明：上例实际效果是，当输入框失去焦点时内容转成大写。出现这种情况是由于input必须是失去焦点才会检测到内容发生改变。而change事件通常是用于下拉菜单select标签。

.onblur事件和onfocus事件

当前元素失去焦点时触发该事件，对应的是onfocus事件：得到焦点事件

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

  functionchkvalue(txt) {

  if(txt.value=="") alert("文本框里必须填写内容!");

  }

 functionsetStyle(x){

      document.getElementById(x).style.background="yellow"

 }

 </script>

</head>

<body>

失去焦点：

 <inputtype="text"name="name"value=""size=""onblur="chkvalue(this)"><br>

得到焦点：

&nbsp;&nbsp;&nbsp;&nbsp;<inputtype="text"id="name"value=""size=""onfocus="setStyle(this.id)">

</body>

</html>

.onscroll事件

窗口滚动事件：当页面滚动时调用函数。此事件写在方法的外面，且函数名后面不加括号，例如window.onscroll=move

例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

  functionmove() {

  alert("页面滚动时调用");

  }

 

window.onscroll = move;

 </script>

</head>

<body>

测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

</body>

</html>

.onsubmit事件

属于<form>表单元素，写在<form>表单标签内。语法：onsubmit=”return 函数名()”

例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

  functionmove() {

  alert("测试onsubmit........"+testForm.name.value);

  }

 

 </script>

</head>

<body>

<formaction=""method="post"name="testForm"onsubmit="returnmove()">

    <inputtype="text"name="name"value="">

    <br>

    <inputtype="submit"name="submit"value="测试onsubmit"/>

</form>

</body>

</html>

.鼠标相关事件

.onmousemove和onmouseout和onmouseover事件

Onmouseover:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。

Onmouseout:鼠标离开某对象范围时，触发事件调用函数。

Onmousemove:鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。

例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

functionbigImg(x)

{

x.style.height="180px";

x.style.width="180px";

}

functionnormalImg(x)

{

x.style.height="128px";

x.style.width="128px";

}

</script>

</head>

<body>

<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border=""src="data:images/defaultAvatar.gif"alt="Smiley">

</body>

</html>

.onmouseup和onmousedown

Onmouseup:当鼠标松开时触发事件

Onmousedown:当鼠标按下键时触发事件

例：

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>

<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>JavaScript的一些常用方法</title>

<scripttype="text/javascript">

functionmouseDown(){

    document.getElementById("p1").style.color="red";

}

functionmouseUp(){

    document.getElementById("p1").style.color="green";

}

</script>

</head>

<body>

<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">

请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色。mouseUp() 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。

</p>

</body>

</html>

常用的事件主要有:
    (1)单击事件:onclick。用户单击鼠标按键时产生的事件，同时。nclick指定的事件处理程序或代码将被调用执行.
    (2)改变事件:onchange。当text或textarea元素内的字符值改变或select表格选项状态改变时发生该事件。
    (3)选中事件:onselect。当text或textarea对象中的文字被选中时会引发该事件。如:
<ipnut type="text" value="默认信息”onselect=alert(”您选中T文本框中的文字”)>
    (4)获得焦点事件:onfocus。用户单击text或textarea以及select对象，即光标落在文本框或选择框时会产生该事件。如:
    <select name= "zhengjian" onfocus=alert(”我成为焦点”)>
    (5)失去焦点事件:onblur.失去焦点事件正好与获得焦点事件相对，当text或textarea以及select对象不再拥有焦点而退出后台时，引发该事件。
    (6)载人文件事件:onload,’当页面文件载人时产生该事件。onload的一个作用就是在首次载人一个页面文件时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用，本事件是window的事件，但是在HTML中指定事件处理程序时，一般把它写在<body>标记中。如:
    <body onload=alert(”正在加载页面，请等待一”)>
    (7)卸载文件事件:onunload。与载人文件事件。nload正好相反，当Web页面退出时引发的事件，并可更新。ookie的状态。如:
    <body onunload=confirm(”你确定要离开本页?”)>
    (8)鼠标镇盖事件:onmouseover, onmouseover是当鼠标位于元素上方时所引发的事件。如:
    <input type= "boutton" value=”按钮”onmouseover= "window. status=‘请您注意下面的状态栏·;return true">
    (9)鼠标离开事件:onmouseout, onmouseout是当鼠标离开元素时引发的事件。如果和鼠标覆盖事件同时使用，可以创建动态按钮的效果。
    (10)一般事件。
   ondbclick:鼠标双击事件。
   onkeypress:当键盘上的某个键被按下并且释放时触发的事件，要求页面内必须有激活的对象。
    onkeydown:当键盘上某个键被按下时触发的事件，要求页面内必须有激活的对象。
    onkeyup:当键盘上某个键被放开时触发的事件，要求页面内必须有激活的对象。
    (11)页面相关事件。
    onabort:图片在下载时被用户中断时触发的事件。
    onbeforeunload:当前页面的内容将要被改变时触发的事件。

最新文章

  1. Xamarin.Android之SQLiteOpenHelper
  2. 百度文库下载器 V2.3.4.3 支持豆丁百度文库道客巴巴
  3. Web Api系列教程第2季（OData篇）（二）——使用Web Api创建只读的OData服务
  4. XCode显示iOS Simulators时不显示系统版本号并出现Identifier(UUID)
  5. linux笔记：linux常用命令-网络命令
  6. MVC中view页面用jquery方法绑定select控件值
  7. boost:program_options
  8. 分类图 Class Diagram
  9. EasyTouch 3.1中文翻译
  10. Oracle - 位图索引的适用条件
  11. Tengine – Nginx衍生版
  12. Java异常基础Exception
  13. formvalidation表单验证
  14. C和C++中的名字空间和作用域
  15. JDK的安装和Java环境变量配置
  16. 【Python基础】lpthw - Exercise 38 列表的操作
  17. 8、Zookeeper分布式锁
  18. Oracle 的常用概念
  19. python使用mysql
  20. python 发送带附件的邮件

热门文章

  1. mybatis 返回值类型是Map
  2. 集群应用Session一致性实现的三种方案
  3. PHP遍历文件夹及子文件夹所有文件（此外还有飞递归的方法）
  4. Android 命令行打包和签名
  5. JZOJ.5325【NOIP2017模拟8.21】九九归一
  6. 9.Node.js 包管理器npm
  7. 【BZOJ3156】防御准备 斜率优化
  8. 在centos上用nginx访问php显示404
  9. Servlet------&gt;jsp EL表达式
  10. MVC项目，bootstrap升级后index.d.ts编译出错