Javascript基础与面向对象基础~第六讲 Javascript中的事件机制-阿里云开发者社区

开发者社区> 开发与运维> 正文

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事件内容就讲到这里吧,没什么难的东西都是实验性的,自己写写就有了,呵呵 。

感谢您的阅读!

本文转自博客园张占岭(仓储大叔的博客,原文链接:Javascript基础与面向对象基础~第六讲 Javascript中的事件机制,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章