JavaScript事件

来源：互联网发布：手机里网络错误怎么办编辑：程序博客网时间：2024/06/03 11:34

事件的概念

事件包含以下方面：

（1）事件源

（2）事件名

（3）事件注册

（4）事件处理

以火灾为例：粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。

{

事件源：粤商大酒店201房间

事件名：火灾

事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责

事件处理：喷水

}

JavaScript常用事件

鼠标常用事件

（1）单击事件（onclick）

<script>      window.onload=function () {          var p=document.getElementById('name');          p.onclick=function fun() {              p.innerHTML='我是替换的内容！';              p.style.fontSize='20px'          }      }</script></head><body><p id="name">点我，我的内容会被改变</p></body>

（2）双击事件（ondblclick）

  <script>       function zoom() {           var Div=document.getElementById('div');           Div.style.width='200px';           Div.style.height='200px';       }   </script></head><body><div id="div" ondblclick="zoom()" ></div></body>

（3）鼠标按下事件（onmousedown）鼠标松开事件（onmouseup）

<script>       function zoom() {           var Div=document.getElementById('div');           Div.style.width='200px';           Div.style.height='200px';       }       function zoomin() {           var Div=document.getElementById('div');           Div.style.width='100px';           Div.style.height='100px';       }       function zoomout() {           var Div=document.getElementById('div');           Div.style.background='#aaa'       }       function turnbackground() {           var Div=document.getElementById('div');           Div.style.background='#fdac2b'       }</script></head><body><div id="div" ondblclick="zoom()" onclick="zoomin()" onmousedown="zoomout()" onmouseup="turnbackground()"></div></body>

（4）鼠标移入（onmouseover）鼠标移开（onmouseout）另有另外一对鼠标进入（onmouseenter）鼠标离开（onmouseleave）两者及其相似，用法跟上面的事件一样，就不做敖述了。

（5）鼠标移动 onmousemove

<script>       function turn(e) {          var p=document.getElementById('p1');          p.innerHTML=e.clientX+','+e.clientY;       }</script></head><body><div id="div" onmousemove="turn(event)"></div><p id="p1"></p></body>

键盘常用事件

（1）onkeypress 键盘被按事件

标注：onkeypress事件只能捕获打印字符的按键，不能捕获诸如shift、Ctrl、Alt等不可打印字符的键

<script>      function code(e) {         if(e.keyCode==13){             var input=document.getElementById('text').value;             alert(input);         }      }</script></head><body><input id="text" name="input" onkeypress="code(event)"></body>

（2）onkeydown 键盘按下事件（不弹起）

下面案例作用：按下方向键控制图片运动方向.

标注：使用top作为变量名导致上下移动失败，原因是和window.top这个全局变量冲突了，换个变量名就好。也就是换成下面代码中的up。

<style>      img{         position: relative;         top:50px;         left:0;      }</style><script>     var up=0,left=0;    //必须设置为全局变量     function dire(e) {       switch (e.keyCode){           case 37:left-=5;break;           case 38:up-=5;break;           case 39:left+=5;break;           case 40:up+=5;break;         }      var img=document.getElementsByTagName('img')[0];      img.style.top=up+'px';      img.style.left=left+'px';    }</script></head><body onkeydown="dire(event)"><img src="../siberian_husky.png" alt="aaa"></body>

（3）onkeyup 键盘弹起事件该事件是和onkeydown()事件相对应的，用法一样。

（4）其他的事件

①onload ：页面加载事件。

②onfoucs：表单元素获得焦点事件。

③onblur：表单元素失去焦点事件。

④onchange：当文本内容改变时触发事件。

⑤onscroll：当文档被滚动时触发事件。

·····

还有很多JavaScript事件，就不一一列出，需要时就去w3c网站查阅。

事件的另外两种触发方法;

①直接在JavaScript标签里写事件

实例：

<script>      window.onload=function () {          var input=document.getElementsByTagName('input')[0];          input.onfocus=function () {              this.style.backgroundColor='#ec9651';          }      }</script></head><body><input></body>

②在JavaScript中添加监听事件

实例：为input标签添加监听点击事件。

<script>      window.onload=function () {          var input=document.getElementsByTagName('input')[0];          input.addEventListener('click',function () {              this.value='我的内容变了'          })      }</script></head><body><input></body>

通过addEventListener添加监听事件的第一个参数是事件名，第二个参数是事件处理函数，可以是匿名函数，上述例子就是匿名函数，可以添加监听，自然也就可以移除监听事件，可通过removeEventListener来移除事件监听，用法和添加事件监听一样，传入两个参数。

阅读全文

0 0