关于JavaScript事件的一些知识

在JavaScript中的事件有5个,
一.鼠标事件
主要有7个事件,
1.onclick 鼠标单击
2.ondbclick 鼠标双击
3.onmouseover 鼠标移入
4.onmouseout 鼠标移出
5.onmousemove 鼠标移动
6.onmousedown 鼠标按下
7.onmouseup 鼠标松开
用的最多的是onclick事件,onmouseover和onmouseout事件其他的用的比较少,在下拉菜单中经常用的onmouseover和


onmouseout事件
二.键盘事件
常用的有三个事件
1.onkeydown
2.onkeypress
上面两个方式结果差不多,但是按下任意键都会触发onkeydown事件,当只有按下字符键对onkeypress事件才能起作用,


其他的功能键是不会触发的,这两个事件一起使用时是有先后顺序的,onkeydown>onkeypress
3.onkeyup
多用于用户注册信息,判断是否符合要求,具体代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题</title>
<link rel="stylesheet" type="text/css" href="key.css">
</head>
<body>
<input type="text" id="myput"/>
<p>长度为:<span id="num" > 0</span></p>
<script type="text/javascript" >


var o=document.getElementById('myput');
var a=document.getElementById('num');


o.οnkeyup=function(){
var str=o.value.toString();
a.innerHTML=str.length;
if(str.length>10){
alert("你输入的字符串太长,请重新输入!")
   o.value='';
   a.innerHTML=0;
}
}




</script>
</body>


</html>
三.表单事件(4个)
1.onfocus
2.onblur
这两个事件一般会在一块用,当用户光标在文本框中是会调用onfocus事件,当文本框失去光标时,就会返回提示的内容


,下面是我的一个例子
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题</title>
</head>
<body>
<input type="text" value="请在这里输入您要搜索的内容" id="search"/>
<input type="button" value="搜索" id="btn">
<script type="text/javascript" >
var a=document.getElementById('search');
var mytxt=a.value;
a.οnfοcus=function(){
if(a.value==mytxt){
a.value='';
}
}
a.οnblur=function(){
         if(a.value==''){
          a.value=mytxt;
         }
}
</script>
</body>
</html>
3.onchange
这三个事件可以用在文本框,多行文本编辑框,下拉框中
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题</title>
</head>
<body>
<select id="net" οnchange="change()" >
  
<option value="http://www.baidu.com">百度</option>
<option value="http://www.google.com">谷歌</option>
<option value="http://www.firefox.com.cn">火狐</option>
</select>
<br/>
<input type="text" id="txt1" value="这里是一个文本框"/>
<br/>
<textarea id="txtarea">
这里是多行文本框这里是多行文本框这里是多行文本框这里是多行文本框这里是多行文本框这里是多行文本框这


里是多行文本框这里是多行文本框这里是多行文本框这里是多行文本框
</textarea>
<script type="text/javascript" >

function change(){
var a=window.event;  //定义说明是一个窗口事件
var b=a.srcElement;  //变量是窗口事件要连接的网址
var c=b.options[b.selectedIndex].value; //变量是选中的标号的value值
window.open(c,'','');  //打开要连接的地方


}


</script>
</body>
</html>
这个代码有一个缺陷,当我第一次点击百度的时候,不会跳转到百度的页面,当我先改变选择的浏览器,再次选中百度,


这样就会跳转到百度页面,有知道怎么改的,希望分享一下
4.onselect
这个是选中而产生的事件,比如下面的弹窗例子:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题</title>
</head>
<body>
<input type="text" id="txt1" value="这里是一个文本框"/>
<br/>
<textarea id="txtarea">
这里是多行文本框这里是多行文本框这里是多行文本框这里是多行文本框这里是多行文本框这里是多行文本框这


里是多行文本框这里是多行文本框这里是多行文本框这里是多行文本框
</textarea>
<script type="text/javascript" >


var h=document.getElementById('txt1');
var l=document.getElementById('txtarea');
h.οnselect=function(){
alert("这里是行文本框");
}
l.οnselect=function (){
alert("你已经选择多行文本框!");
}
</script>
</body>
</html>
这里需要注意一下,下面两种写法对于onselect事件是不一样的
l.onselect(alert("将要复制的文字"))
l.οnselect=function(){
    alert("你已经选择多行文本框!");
}
第一种在页面加载时就会弹出对话框,这不是我们想要的,所有必须使用第二种方法才可以,这是大家需要注意的
四.页面事件(3种)
1.onload(加载事件)
在文档加载完再执行的事件,如果把要加载的东西放在head里面必须加上window.onload,否则不会有显示结果的,但是


把要加载的东西放在body的闭合标签上面就会显示正常了,
2.onresize(页面大小事件)
经常用于设置固定浏览器的大小
3.onerror(页面错误)
这个事件只有在IE中才会有效果
五.编辑事件(常见的有3中)
1.oncopy(复制事件)
2.oncut(剪切事件)
3.onpaste(粘贴事件)
上面的这三个事件不经常用,下面是一个例子:
document.body.οncοpy=function(){
alert("禁止复制!");
return false;
}




而对于事件的调用又有两种方式,
1.在script中调用(需要获取元素的id)
例如:var a=document.getElementById("mybtn");
       a.οnclick=function(){};
在之前的文章中用过,主要是为元素添加事件,添加function函数,有一点要注意的是,最好将获取的元素id赋给一个变


量,我之前是因为好理解经常直接为元素添加事件,这样代码比较长,因此为了避免代码冗余,我们将获得的元素id给一


个变量。
2.在元素中调用(不需要获取id,可以直接调用)
例如:
<input type="button" οnclick="alert("提示信息")" value="按钮"/>
这个是在元素的属性中直接添加事件
<input type="button" οnclick="mybtn()" value="按钮"/>
<script>
function mybtn(){}
</script>
这个是在属性中添加函数,在js中添加函数
发布了19 篇原创文章 · 获赞 0 · 访问量 9419

猜你喜欢

转载自blog.csdn.net/yuxinqingge/article/details/50921588