09-DOM中常用API

什么是事件

• 用户和浏览器之间的交互行为我们就称之为事件,比如:点击/移入/移出
• 如何绑定事件
  • 在JavaScript中所有的HTML标签都可以添加事件
  • 元素.事件名称 = function(){};
  • 当对应事件被触发时就会自动执行function中的代码

点击事件(onclick)

• 如果给元素添加了与系统同名的事件,我们添加的事件不会覆盖系统添加的事件
• 如果要用我们添加的事件覆盖系统同名的事件,在{}最后添加return false

定时器

• 在JavaScript中有两种定时器,一种是重复执行的定时器,一种是只执行一次的定时器
• 重复执行的定时器
  • setInterval(function(){},隔多久执行一次)
  • 关闭:clearInterval
• 只执行一次的定时器
  • setTimeout(function(){},隔多久开始执行)
  • 关闭:clearTimeout

移入移出事件

• 移入事件:onmouseover/onmouseenter
• 移出事件:onmouseout/onmouseleave
• 移动事件:onmousemove

表单事件

• 获取焦点:onfocus
• 失去焦点:onblur
• 内容改变
  • onchange:只能在表单失去焦点后才能获取修改的数据
  • oninput:想要实时获取用户修改之后的数据,只能通过oninput来调用(只支持IE9及以上)
  • onpropertychange:在IE9以下,如果想实时获取用户修改后的数据,可以通过onpropertychange事件来实现

闭包

• 闭包是一种特殊的函数,当一个内部函数引用了外部函数的数据(变量/函数)时,那么内部的函数就是闭包,所以只要满足"是函数嵌套","内部函数引用外部函数数据"
• 只要闭包还在使用外部函数的数据,那么外部的数据就一直不会被释放,也就是说可以延长外部函数数据的生命周期
• 当后续不需要使用闭包时,一定要手动将闭包设置为null,否则会出现内存泄漏
• 在ES6中由于{}是块级作用域,所以只要在块级作用域定义了一个函数,并且这个函数用到了块级作用域中的数据,那么这个函数也是闭包

绑定事件的三种方式

• 通过onxxx添加:由于是给属性赋值,所以后赋值的会覆盖先赋值的

• 通过addEventListener添加:事件名称不用添加on,后赋值的不会覆盖先赋值的,IE9以下不支持

• 通过attachEvent添加:事件名称需要添加on,后赋值的不会覆盖先赋值的,IE9以下支持

  //兼容写法
  function addEvent(ele, name, fn) {
          if (ele.attachEvent) {
              ele.attachEvent("on" + name,fn);
          }else{
              ele.addEventListener(name,fn);
          }
      }
  

事件对象

• 事件对象就是一个系统自动创建的对象,当注册的事件被触发时,系统就会自动创建事件对象
• 通过形参event传递给我们,兼容性写法:event = event || window.event
• 阻止默认行为
  • return false;企业推荐的方法
  • event.preventDefault();IE9以上浏览器
  • event.returnValue = false;IE9以下浏览器

事件的三个阶段

1. 捕获阶段(从外向内的传递事件)
2. 当前目标阶段(执行事件回调函数)
3. 冒泡阶段(从内向外的传递事件)

• 三个阶段只有两个会被同时执行,要么捕获和当前,要么当前和冒泡

• 如何设置事件捕获还是冒泡

  • 通过addEventListener方法,这个方法接收三个参数
  • 第一个参数:事件的名称
  • 第二个参数:回调函数
  • 第三个参数:false冒泡/true捕获
  • onxxx不接收任何参数,所以默认就是冒泡
  • attachEvent只能接收两个参数,所以默认也是冒泡

• 阻止事件冒泡

  • event.stopPropagation();只支持高级浏览器

  • event.cancelBubble = true;支持低级浏览器

    //兼容写法
    if(event.cancelBubble){
        event.cancelBubble = true;
    }else{
        event.stopPropagation();
    }
    

• 移入移出事件区别

  • onmouseover的移入事件会触发父元素的移入事件
  • onmouseenter的移入事件不会触发父元素的移入事件
  • onmouseout的移出事件会触发父元素的移出事件
  • onmouseleave的移出事件不会触发父元素的移出事件

事件位置

• offsetX,offsetY:事件触发相对于当前元素自身的位置
• clientX,clientY:事件触发相对于当前浏览器可视区域的位置,不包括滚出屏幕的范围
• pageX,pageY:事件触发相对于整个网页的位置,包括滚出屏幕的范围
• screenX,screenY:事件触发相对于屏幕的位置

正则表达式

• 正则表达式就是对字符串操作的一种逻辑公式
• 通过构造函数创建正则表达式:let 变量名称 = new RegExp(匹配规则);
• 通过字面量创建正则表达式let 变量名称 = /匹配规则/;
• 正则表达式的作用
  • 在字符串中"查找"是否包含指定子串(test)
  • 从字符串中"提取"指定子串(match)
  • 对字符串中指定的内容进行"替换"(replace)
• 正则表达式注意点
  • 默认情况下,正则表达式中是区分大小写的
  • 默认情况下,正则表达式匹配到第一个就会停止