欢迎光临
我的个人博客网站

DOM事件


DOM事件

1. 执行事件的步骤

  1. 获取事件源
  2. 注册事件(绑定事件)
  3. 添加事件处理程序(采取函数赋值形式)

2. 注册事件(绑定事件)

2.1 注册事件概述

注册事件是指给元素添加事件。注册事件有两种方式,分别为传统方式方法监听注册方式

2.2 传统注册方式

// 1. <button onclick="alert('hello world')"></button>  // 2. <button></button> <script>     var btn = document.querySelector('button');     btn.onclick = function() {         alert('hello world'); } </script> 
  • 利用on开头的事件
  • 特点:注册事件的唯一性。同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数。

2.3 方法监听注册方式(推荐)

element.addEventListener(); 
  • w3c标准 推荐方式
  • ie9之前的不支持此方法,可以使用attachEvent()代替
  • 特点:同一个元素同一个事件可以注册多个监听器,按注册顺序依次执行

2.3.1 addEventListener事件监听方式

eventTarget.addEventListener(type, listener[, useCapture]); 

该方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数

对于参数:

  • type:事件类型字符串(带引号),注意不要带on。eg.click、mouseover
  • listener:事件处理函数,事件发生时,会调用该监听函数
  • useCapture:可选参数,是一个布尔值,默认为false。如果是true时,表示在事件捕获阶段调用事件处理程序;如果是false时,表示在事件冒泡阶段调用事件处理程序。对于什么是事件捕获与事件冒泡,可以了解DOM的事件流。

2.3.2 attachEvent事件监听方式

eventTarget.attachEvent(eventNameWithOn, callback); 

该方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行

对于参数:

  • eventNameWithOn:事件类型字符串,注意要带on。eg.onclick、onmouseover
  • callback:事件处理函数,当目标触发事件时,回调函数被调用

注:ie8及早期版本支持。

2.3.3 注册事件兼容性的解决

兼容性处理的原则:首先按照大多数浏览器,再处理特殊浏览器。

function addEventListener(element, eventName, fn) {     // 判断浏览器是否支持addEventListener方法     if (element.addEventListener) {         element.addEventListener(eventName, fn);     } else if (element.attachEvent) {         element.attachEvent('on' + eventName, fn);     } else {         // 相当于element.onclick = fn         element['on' + eventName] = fn;     } } 

3. 删除事件(解绑事件)

3.1 传统事件方式

eventTarget.onclick = null; 

3.2 方法监听注册方式

// 1. eventTarget.removeEventListener(type, listener[, useCapture]);  // 2. eventTarget.detachEvent(eventNameWithOn, callback); 

注:如果要删除事件,在绑定事件时不能将listener和callback写成匿名函数,要写成function fn() {}的形式,在调用时不需要加小括号。

3.3 删除事件兼容性的解决

function removeEventListener(element, eventName, fn) {     // 判断当前浏览器是否支持removeEventListener方法     if (element.removeEventListener) {         element.removeEventListener(eventName, fn);     } else if (element.detachEvent) {         element.detachEvent('on' + eventName, fn);     } else {         element['on' + eventNAme] = null;     } } 
赞(0) 打赏
未经允许不得转载:张拓的天空 » DOM事件
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏