.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:当前页面的内容将要被改变时触发的事件。

JavaScript中常用的事件的更多相关文章

  1. 请写出JavaScript中常用的三种事件。

    请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange

  2. Javascript中常用事件集合和事件使用方法

    Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...

  3. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  4. 在javascript中如何取消事件冒泡

    如果在javascript中只希望事件发生在它的目标而不是在它的父元素上,即取消它的冒泡事件的发生,该如何做?因为按照javascript发生事件的顺序,它由两个阶段:分别从根元素--父元素--目标元 ...

  5. JavaScript 中常用的 正则表达式

    这编文章我来整理了一些在 javascript 中常用的正则式希望能给大家带来一些开发的灵感 //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{ ...

  6. JavaScript中常用函数(入门级)(持续更新)

    本文中枫竹梦介绍一些JavaScript中入门级的常用函数,对于已经过了入门的童鞋可选择略过,都是一些非常实用的函数.如果发现什么问题,欢迎讨论. 问题列表 Q1: 设计一个函数repeatIt(st ...

  7. javascript中常用的

    1.javascript中构造equals().trim()方法并应用 String.prototype.Trim = function() { return this.replace(/(^\s*) ...

  8. JavaScript中常用的正则表达式日常整理(全)

    //校验是否全由数字组成 ? 1 2 3 4 5 6 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) retu ...

  9. JavaScript中冒泡与事件委托

    冒泡 事件触发后事件流的三个阶段按顺序依次是: 1.捕获阶段 2.目标阶段 3.冒泡阶段 大盒子包裹小盒子,两个盒子都分别添加点击事件,当点击小盒子,两个盒子的事件都会触发. 事件委托 下级元素委托上 ...

随机推荐

  1. DOCKER在windows上安装与配置

    1.下载程序 安装包 https://github.com/boot2docker/windows-installer/releases(这个地址国内下载很慢) 用这个: https://get.da ...

  2. iOS - UITableView滚动到指定的cell并且选中

    UITableView //项目中遇到的 - (void)selectRowAtIndexPath:(nullable NSIndexPath *)indexPath animated:(BOOL)a ...

  3. ubuntu 安装nfs 服务

    1. 安装nfs服务软件 (1)服务器端 $sudo apt-get install nfs-kernel-server  rpcbind (2)客户端 (可以省略) $sudo apt-get in ...

  4. ubuntu 14 root 账户 启用与ssh登录

    ubuntu 14.04 root用户登录 开启root帐号的方法: 为了启用root 帐号(也就是设置一个口令)使用: sudo passwd root 当你使用完毕后屏蔽root帐号使用: sud ...

  5. LeetCode——Search a 2D Matrix II

    Description: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix ...

  6. 从TCP三次握手说起–浅析TCP协议中的疑难杂症(2)

    版权声明:本文由黄日成原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/108 来源:腾云阁 https://www.qclo ...

  7. vux组件绑定事件

    我一开始是这样绑定事件的,但是没有效果: <box gap="15px 45px"> <x-button plain type="primary&quo ...

  8. javascript字符串函数

    substring() 从字符串中提取一些字符 <script type="text/javascript"> var str="Hello world!&q ...

  9. css 分栏高度自动相等

    方法2: <div class="ticket_table"> <div class="ticket_l"> <h3>全票& ...

  10. IIS7设置IP地址和域名限制

    在IIS中可以通过IP地址域名设置来控制拒绝或允许特定范围内的IP对网站的访问权限,下面简单介绍如何在IIS7.5中设置,如下图,是IIS7.5的主界面 一.安装“IP地址和域限制”功能 选定一个网站 ...