JavaScript--事件入门(24)

// JavaScript事件是由访问Web页面的用户引起的一系列操作;

// 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码;

一 事件介绍

1 // 事件一般是用于浏览器和用户操作进行交互;最早是IE和Netscape Navigator中出现,作为分担服务器端元算负载的一种手段;

2 // 而DOM2级规范开始尝试以一种符合逻辑的方式标准化DOM事件;

3 // IE9/Firefox/Opera/Safari和Chrome全部已经实现了"DOM2级事件"模块的核心部分;

4 // IE8之前浏览器仍然使用其专有事件模型;

5 // JavaScript有三种事件模型:内联模型/脚本模型和DOM2模型;

二 内联模型(HTML事件处理程序)

1 // 这种模型是最传统的简单的一种处理事件的方法;

2 // 在内联模型中,事件处理函数是HTML标签的一个属性,用于处理指定事件;

3 // 虽然内联在早期使用较多,但它是和HTML混写的,并没有与HTML分离;

4 

5 // 在HTML中把事件处理函数作为属性执行JS代码;

6     <input type="button" value="按钮" onclick="alert('Lee');" />    // 注意单双引号;

7 // 在HTML中把事件处理函数作为属性执行JS函数;

8     <input type="button" value="按钮" onclick="box();" />            // 执行JS的函数;

9     // PS:函数不得放到window.onload里面,这样就看不见了;

三 脚本模型(DOM0级事件处理程序)

 1 // 由于内联模型违反了HTML和JavaScript代码层次分离的原则;

 2 // 我们可以在JavaScript中处理事件,这种处理方式就是脚本模型;

 3     var input = document.getElementsByTagName('input')[0];         // 得到input对象;

 4     input.onclick = function(){                                    // 匿名函数执行;

 5         alert('Lee');                            

 6     }

 7     // PS:通过匿名函数,可以直接触发对应的代码;

 8     //    也可以通过指定的函数名赋值的方式来执行函数(赋值的函数名不要跟括号);

 9     input.onclick = box;                                           // 把匿名函数赋值给事件处理函数;

10     input.onclick = null;                                          // 删除事件处理程序;

四 事件处理函数

 1 // JavaScript可以处理的事件类型为:鼠标事件/键盘事件/HTML事件;

 2         JavaScript事件处理函数及其使用列表

 3 事件处理函数        影响的元素                   何时发生 

 4 onabort             图像                      当图像加载被中断时;

 5 onblur              窗口/框架/所有表单对象      当焦点从对象上移开时;

 6 onchange            输入框/选择框/文本域        当改变一个元素的值且失去焦点时;

 7 onclick             链接/按钮/表单对象/图像等  当用户单击对象时;

 8 ondblclick          链接/按钮/表单对象          当用户双击对象时;

 9 ondragdrop          窗口                      当用户将一个对象拖放到浏览器窗口时;

10 onError             窗口/框架/所有表单对象 当脚本中发生语法错误时; 11 onfocus             窗口/框架/所有表单对象 当单击鼠标或将鼠标移动聚焦到窗口或框架时; 12 onkeydown           文档/图像/链接/表单        当按键被按下时;

13 onkeypress          文档/图像/连接/表单        当按键被按下然后松开时;

14 onkeyup             文档/图像/链接/表单        当按键被松开时;

15 onload              主体/框架集/图像 文档或图像加载后; 16 onunload            主体/框架集                 文档或框架集卸载后;

17 onmouseout          链接                       当图标移除链接时;

18 onmouseover         链接                       当鼠标移到链接时;

19 onmove              窗口                       当浏览器窗口移动时;

20 onreset             表单复位按钮                单击表单的reset按钮;

21 onresize 窗口 当改变浏览器窗口大小时; 22 onselect            表单元素                   当选择一个表单对象时;

23 onsubmit            表单                       当发送表格到服务器时;

24 // PS:对于每一个事件,它都有自己的触发范围和方式,事件处理将失效;

1.鼠标事件,页面所有元素都可触发 

 1 (1).click:当用户单击鼠标按钮或按下回车键时触发;

 2     input.onclick = function(){

 3         alert('Lee');

 4     };

 5 

 6 (2).dblclick:当用户双击鼠标按钮时触发;

 7     input.ondblclick = function(){

 8         alert('Lee');

 9     }

10 

11 (3).mousedown:当用户按下鼠标还未弹起时触发;

12     input.onmousedown = function(){

13         alert('Lee');

14     }

15 

16 (4)mouseup:当用户释放鼠标按钮时触发;

17     input.onmouseup = function(){

18         alert('Lee');

19     }

20 

21 (5).mouseover:当鼠标移到某个元素上方时触发;

22     input.onmouseover = function(){

23         alert('Lee');

24     }

25 

26 (6).mouseout:当鼠标移出某个元素上方时触发;

27     input.onmouseout = function(){

28         alert('Lee');

29     }

30 

31 (7).mousemove:当鼠标指针在元素上移动时触发;

32     input.onmousemove = function(){

33         alert('Lee');

34     }

2.键盘事件 

 1 (1).keydown:当用户按下键盘上任意键触发,如果按住不放,会重复触发;

 2     onkeydown = function(){

 3         alert('Lee');

 4     }

 5 

 6 (2).keypress:当用户按下键盘上的字符键触发,如果按住不放,会重复触发;

 7     onkeypress = function(){

 8         alert('Lee');

 9     }

10 

11 (3).keyup:当用户释放键盘上的键触发;

12     onkeyup = function(){

13         alert('Lee');

14     }

3.HTML事件

 1 (1).load:当页面完全加载后(包括所有图像/JavaScript文件/CSS文件等外部资源),就会触发window上面的load事件;

 2     window.onload = function(){

 3         alert('Lee');

 4     }

 5 

 6 // 图像上面也可以触发load事件,无论是在DOM中的图像元素还是HTML中的图像元素;

 7 // 因此可以在HTML中为任何图像指定onload事件处理程序;

 8     <img src='smile.client.gif' onload="alert('Image loaded.')" >

 9     // PS:新图像元素不一定是从添加到文档后才开始下载,只要设置src属性就会开始下载;

10 

11 // <script>元素也会触发load事件,以便开发人员确定动态加载的JavaScript文件是否加载完毕;

12 // 与图像不同,只有在设置了<script>元素的src属性并将该元素添加到文档后,才会开始下载JavaScript文件;

1 (2).unload:当文档被完全卸载后触发;

2 // 只要用户从一个页面切换到另一个页面,就会发生unload事件;

3 // 而利用这个事件最多的情况是清除引用,以避免内存泄漏;

4     window.onunload = function(){

5         alert('Lee');

6     }

1 (3).select:当用户选择文本框(input或textarea)内容改变且失去焦点后触发;

2     input.onselect = function(){

3         alert('Lee');

4     }

1 (4).change:当文本框(input或textarea)内容改变且失去焦点后触发;

2     input.onchange = function(){

3         alert('Lee');

4     }

1 (5).focus:当页面或元素获得焦点时在window及相关元素上面触发;这个事件不会冒泡;

2     input.onfocus = function(){

3         alert('Lee');

4     }

1 (6).blur:当页面或元素失去焦点时在window及相关元素上触发;这个事件不会冒泡;

2     input.onblur = function(){

3         alert('Lee');

4     }

1 (7).submit:当用户点击提交按钮在<form>元素上触发;

2     form.onsubmit = function(){

3         alert('Lee');

4     }

(8).reset:当用户点击重置按钮在<form>元素上触发;

    form.onreset = function(){

        alert('Lee');

    }

1 (9).resize:当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件;

2 // 这个事件在window(窗口)上触发;浏览器窗口最大化或最小化也会触发resize事件;

3 // IE/Safari/Chrome和Opera会在浏览器变化时不断触发resize事件;

4 // Firefox则只会在用户停止调整窗口大小时才会触发resize事件;

5     window.onresize = function(){

6         alert('Lee');

7     }

(10).scroll:当用户滚动滚动条的元素使触发;

    window.onscroll = function(){

        alert('Lee');

    }