Javscript 事件处理程序

使用DOM级别0事件处理程序

先看一个简单的例子



  • 该例是点击按钮之后查看表单内数据是否完整,主要作法为在在标签内添加事件处理程序名,以及调用函数,也可将其调用写入js代码中如textnode.onclik=function(){},此时该注意的是其DOM节点一定要调用正确
  • 然而该方法的漏洞在于若对同一个事件添加俩个相同的事件处理程序后面的一个会覆盖前面的一个,且若多标签嵌套,其无法设置冒泡阶段还是捕捉阶段,因此我们常用下面这种方法

事件监听addEventListener(DOM级别2事件)

函数名 参数1 参数2 参数3
addEventListener "event_type" function_name true or false
该参数为事件名 该参数为调用函数名 true为捕捉阶段,false为冒泡阶段(更为常用)
  • 删除事件
函数名 参数1 参数2 参数3
removeEventListener "event_type" function_name true or false
该参数为事件名 该参数为调用函数名 true为捕捉阶段,false为冒泡阶段(更为常用)

值得注意的是第一个参数是事件名,而不是事件处理程序名,第二个参数最好使用单独函数,以便删除时调用,否则该监听器无法被删除,含有就是捕捉阶段指事件发生时顺序为组件由外到内,而冒泡阶段正好相反

  • 下面是一个例子


event对象

  • 但事件发生时,浏览器将自动创建event对象,该信息可以被脚本使用,帮助执行必要的操作,例如某个键被按下的信息就存储在该对象中
    主要属性如下
    event属性
    下面为两个示例


 

2017/6/1
02:13

你可能感兴趣的:(Javscript 事件处理程序)