美文网首页
DOM事件处理

DOM事件处理

作者: 尘与曦 | 来源:发表于2018-08-31 14:56 被阅读0次

完整的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)并不常用。

相关文章

  • 跨浏览器的事件处理程序

    事件处理程序有DOM0级事件处理程序、DOM2级事件处理程序,IE事件处理程序,DOM0级事件处理程序具有简单,跨...

  • 事件处理程序

    HTML事件处理程序 HTML程序和JS无法分离 DOM0级事件处理程序 DOM2级事件处理程序 DOM2级事件定...

  • JS 事件

    目录 事件流 事件处理程序HTML事件处理程序DOM0级事件处理程序DOM2级事件处理程序IE事件处理程序跨浏览器...

  • 事件监听

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别? Dom0级事件处理程序:在DOM0级事件处理程序,事件...

  • 进阶9

    DOM0 事件和DOM2级在事件监听使用方式上有什么区别? Dom0级事件处理程序:在DOM0级事件处理程序,事件...

  • 事件处理

    HTML事件处理程序 DOM0级事件处理程序 DOM2级事件处理程序 addEventListener()和rem...

  • DOM事件对象与IE事件对象

    DOM 事件处理对象 IE事件对象 注意: DOM中事件处理对象中的 event.currentTarget 与 ...

  • 十八、DOM之事件绑定的两种处理程序(DOM0和DOM2) --

    1、什么是DOM0、DOM2: 2、DOM0级事件处理程序: 3、DOM2级事件处理程序:

  • DOM事件

    DOM级别与DOM事件 DOM级别:DOM0级、DOM1级、DOM2级、DOM3级DOM事件:DOM0级事件处理、...

  • 2018-11-07 react 事件处理

    react事件处理和dom事件处理是相似的。 react: Dom: 所以: React事件绑定属性的命名采用驼峰...

网友评论

      本文标题:DOM事件处理

      本文链接:https://www.haomeiwen.com/subject/cqyswftx.html