javascript之事件学习（一）

今晚学习了一下javascript的事件

一.事件主要用法需要在事件的前面将上on也就是当某事件发生时处理某方法

二.javascript的事件主要有一下几种常用的

鼠标

1.click 鼠标单击

2.dblclick 鼠标双击

3.contentmenu 鼠标右键（防止复制效果）

4.mouseover 鼠标放上

5.mouseout 鼠标离开

6.mousedown 鼠标按下

7.mouseup 鼠标抬起

8.mousemove 鼠标移动

键盘

1.keypress 键盘事件

2.keyup 抬起

3.keydown 按下

文档

1.load 文档加载好

2.unload 文档关闭

3.beforeunload 文档关闭之前

表单

1.focus 焦点（应用于搜索栏点击之类的效果）

2.blur 失去焦点

3.submit 提交事件 4.change 改变事件比如改变select事件其他 1.scroll滚动事件 2.select 选择事件。。。。

三.事件处理格式

1.直接在tag标签中处理

on+某事件

2.将事件写入js代码中

实例

html代码

<div id="one">aaaa</div>
<script>
  var obj=document.getElementById('one');
  obj.onmouseover=function(){
    this.style.backgroundColor="red";
}
</script>

3.<script for="事件源ID" event="事件">

事件处理程序

</script>

该方法不常用

html代码

<div id="one">aaaa</div>
<script for="one" event="onclick">
  var obj=document.getElementById('one');
  
    obj.style.backgroundColor="red";

</script>

四.事件源规则

1.一个事件源上面可以加多个事件

示例4.0

 1 <body>
 2 <div id="one" onmouseover="show(this,'red')" onmouseout="show(this,'green')" onclick="show(this,'blue')" ondblclick="show(this,'yellow')">
 3 hello world!
 4 </div>
 5 <script>
 6   function show(obj,col){
 7     obj.style.backgroundColor=col;
 8   //obj=this,col=red;
 9   }
10 </script>
11 
12 </body>

示例4.0解释

onmouseover="show(this,'red')"

当鼠标放在元素上面时运行show()方法

将this和颜色red两个参数传入show中

show用obj和col来接收。所以obj=this,col="red";

五.load、unload、beforeunload示例

<body onload="alert('hello world');" onbeforeunload="event.returnValue='你小心点'" onunload="alert('good bye!')">
</body>

if you don't try,you will never know!