DOM事件处理

完整的DOM事件列表可以参考:

http://www.runoob.com/jsref/dom-obj-event.html

一.DOM事件处理

1.什么是DOM事件?

    DOM中的元素可以收到各种事件,包含鼠标事件、键盘事件、表单事件等。

    如

onclick

其中,onclick属性里可以指定一段代码,当鼠标点击时,执行test()方法。

二.注意事项

    (1)onclick里可以指定一大段代码


    (2)多数元素都支持鼠标事件

    (3)单引号与双引号没有区别,用于方便区分界限


    (4)onclick里可用的上下文参数:this,event(event以后学习)


    (5)因为js是脚本语言,运行时检查错误,不运行就不检查错误


test写错成tast

              只有当点击该div时,才会报错。


二.鼠标事件示例


其中event.KeyCode == 13表示按了回车键,alert表示弹出上下文窗口,type类型为password时,表示用户输入文本时隐藏,placeholder表示文本框为空时显示的内容



效果图


回车


四.事件监听器

事件监听器是DOM事件处理的另一种方式,示例:


elem.addEventListener('keyup', function(event){

      //事件处理 ..

});

第一个参数为事件名,如click,keyup

第二个参数是一个回调function,当对应事件发生时此function被调用,类似于JAVA中匿名内部类方法一样。

注意事项:前面两种事件处理较为常用,而事件监听器(addEventListener)并不常用。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 7,165评论 1 6
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,086评论 1 10
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 1,822评论 0 1
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    LemonnYan阅读 703评论 0 4