美文网首页
09-DOM中常用API

09-DOM中常用API

作者: 七分之二十四 | 来源:发表于2019-05-22 10:41 被阅读0次

什么是事件

  • 用户和浏览器之间的交互行为我们就称之为事件,比如:点击/移入/移出
  • 如何绑定事件
    • 在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)
  • 正则表达式注意点
    • 默认情况下,正则表达式中是区分大小写的
    • 默认情况下,正则表达式匹配到第一个就会停止

相关文章

网友评论

      本文标题:09-DOM中常用API

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