码迷,mamicode.com
首页 > 其他好文 > 详细

DOM——事件详解

时间:2019-10-26 23:19:58      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:head   使用   目标   rev   默认   点击事件   执行   end   word   

事件

事件:触发-响应机制

事件三要素

  • 事件源:触发(被)事件的元素

  • 事件名称: click 点击事件

  • 事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用

 var box = document.getElementById(‘box‘);
 box.onclick = function() {
   console.log(‘代码会在box被点击后执行‘);  
 };

案例

  • 点击按钮弹出提示框

  • 点击按钮切换图片

 

事件详解

注册/移除事件的三种方式

 var box = document.getElementById(‘box‘);
 box.onclick = function () {
   console.log(‘点击后执行‘);
 };
 box.onclick = null;
 ?
 box.addEventListener(‘click‘, eventCode, false);
 box.removeEventListener(‘click‘, eventCode, false);
 ?
 box.attachEvent(‘onclick‘, eventCode);
 box.detachEvent(‘onclick‘, eventCode);
 ?
 function eventCode() {
   console.log(‘点击后执行‘);
 }

兼容代码

 function addEventListener(element, type, fn) {
   if (element.addEventListener) {
     element.addEventListener(type, fn, false);
  } else if (element.attachEvent){
     element.attachEvent(‘on‘ + type,fn);
  } else {
     element[‘on‘ + type] = fn;
  }
 }
 ?
 function removeEventListener(element, type, fn) {
   if (element.removeEventListener) {
     element.removeEventListener(type, fn, false);
  } else if (element.detachEvent) {
     element.detachEvent(‘on‘ + type, fn);
  } else {
     element[‘on‘+type] = null;
  }
 }

事件的三个阶段

  1. 捕获阶段

  2. 当前目标阶段

  3. 冒泡阶段

    事件对象.eventPhase属性可以查看事件触发时所处的阶段

事件对象的属性和方法

  • event.type 获取事件类型

  • clientX/clientY 所有浏览器都支持,窗口位置

  • pageX/pageY IE8以前不支持,页面位置

  • event.target || event.srcElement 用于获取触发事件的元素

  • event.preventDefault() 取消默认行为

案例

  • 跟着鼠标飞的天使

  • 鼠标点哪图片飞到哪里

  • 获取鼠标在div内的坐标

阻止事件传播的方式

  • 标准方式 event.stopPropagation();

  • IE低版本 event.cancelBubble = true; 标准中已废弃

常用的鼠标和键盘事件

  • onmouseup 鼠标按键放开时触发

  • onmousedown 鼠标按键按下触发

  • onmousemove 鼠标移动触发

  • onkeyup 键盘按键按下触发

  • onkeydown 键盘按键抬起触发

DOM——事件详解

标签:head   使用   目标   rev   默认   点击事件   执行   end   word   

原文地址:https://www.cnblogs.com/superjishere/p/11745679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!