事件:
键盘事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.οnlοad=function(){
//键盘按下并松开,
window.οnkeypress=function(e){
// alert(e.key);//key:按键的内容,按下什么就会打印出来什么
if(e.charCode==103){
alert('G被点击');
}
}
}
</script>
</head>
<body>
</body>
</html>
鼠标事件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> window.οnlοad=function(){ //单击 var input=document.getElementById('b'); input.οnclick=function(){ alert('2333') } //双击 var c=document.getElementById('c'); c.οndblclick=function(){ alert('66666'); } } </script> </head> <body> <input type="button" id="b" value="点击"/> <input type="button" id="c" value="双击"/> </body> </html>
HTML事件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ //获取元素 var a=document.getElementById('a'); var b=document.getElementById('b'); //内容发生改变,并转移焦点后才能被监听到 d.οnchange=function(){ alert('内容发生了改变'); } //添加一个内容改变监听事件 a.oninput=function(){ //将a的输入框内容传给b b.innerText= a.value; }如图://兼容ie9以下的版本 a.onpropertychange=function(){ b.innerText= a.value; } } </script> </head> <body> <input type="text" id="a" value=""> <div id="b"></div> </input> </body> </html>
实例:动态改变页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> img{ margin:10px 10px; } .a{ border: 1px solid gray; } .b{ border: 3px solid red; } </style> <script> window.onload=function(){ var img=document.getElementsByTagName('img'); //循环设置每一个元素的鼠标事件 for(var i=0;i<img.length;i++){ //鼠标进入元素时 img[i].onmouseover=function(e){ e.target.className='b'; } //鼠标离开元素时 img[i].onmouseout=function(e){ e.target.className='a'; } } } </script> </head> <body> <img class="a" src="../img/new_01.jpg" alt=""/> <img class="a" src="../img/new_02.jpg" alt=""/> <img class="a" src="../img/new_03.jpg" alt=""/> </body> </html>