Javascript基础与面向对象基础~第六讲 Javascript中的事件机制

回到目录

事件机制，在JS中感觉很容易让人接受，一个鼠标被按下时会发生一些事情，一个键盘的键被抬起时同样可以发生一些事情，这种比喻很容易让人接受，不是吗，呵呵。

下面我将JS中几个主要的事件说一下，然后再说一下触发事件的几个方法。

JS中的主要事件说明

以下是我们在项目开发中常用到的事件，红色的为最常用的事件，呵呵

onclick 鼠标点击某个对象

ondblclick 鼠标双击某个对象

onerror 当加载文档或图像时发生某个错误

onfocus元素获得焦点

onkeydown某个键盘的键被按下

onkeypress某个键盘的键被按下或按住

onkeyup某个键盘的键被松开

onload某个页面或图像被完成加载

onmousedown某个鼠标按键被按下

onmousemove鼠标被移动

onmouseout鼠标从某元素移开

onmouseover鼠标被移到某元素之上

onmouseup 某个鼠标按键被松开

onselect 文本被选定

onsubmit 提交按钮被点击

onunload 用户退出页面

JS中事件的调用方式

一 在HTML标记中直接指定事件，代码如下：

 <script type="text/javascript">
        //onclick事件指向的方法
        function clickFun() {
            alert("谁触发了我，单击事件");
        }
        //onerror事件指向的方法
        function imgErrorFun(o) {
            o.src = "http://static.googleadsserving.cn/pagead/imgad?id=CICAgICQk9vj-gEQeBjYBDIIImM2eyikBWY";
        }
        //鼠标移入
        function overFun(o) {
            o.style.background = "red";
        }
        //鼠标移出
        function outFun(o) {
            o.style.background = "#fff";
        }
    </script>

二 直接在JS代码块中动态为元素分配事件

 window.onload = function () {
             document.getElementById("haha").onclick = function () { alert("谁触发了我，单击事件"); }
             document.getElementById("haha").onclick = function () { clickFun(); }
        }

事实上，使用纯JS去实现一些页面中的效果是没有问题的，但是在使用上确实不方便，所以目前出现了很多流行的，兼容性好的，使用方便的JS类库，如JQ，prototype,ExtJS等等！

好了，时间不早了，今天的JS事件内容就讲到这里吧，没什么难的东西都是实验性的，自己写写就有了，呵呵 。

感谢您的阅读！

回到目录