• 事件冒泡&正则表达式


    JS中为元素指定事件的三种方法:

    element.addEventListener(type,listener,boolean);

    type是事件的类型,比如“click”,“mouseover”,listener是指事件的处理函数,布尔值为false值事件的冒泡,true是指事件捕获,此方法适合现在的主流浏览器,谷歌火狐等等

    element.attachEvent(type,listener);

    type是事件类型,不过要加“on”,listener是指事件的处理函数,适用IE8及以前的浏览器

    element.type=listener;

    type是事件类型,要加“on”,listener是指事件的处理函数,老版本浏览器只支持这种

    能力检测:

    function addevent(element,type,listener){
    if(element.addEventListener){
    return element.addEventListener(type,listener,false);
    }else if(element.attachEvent){
    return element.attachEvent("on"+type,listener);
    }else{
    return element["on"+type]= listener;
    }
    }

    移除事件:element.addEventListener(type,listener,boolean);
    function removeEventListener(element, type,listener) {
    if(element.removeEventListener) {
    element.removeEventListener(type, listener, false);
    }else if(element.detachEvent) {
    element.detachEvent("on" + type , listener);
    }else{
    element["on" + type] = null;
    }
    }

    事件委托:当子元素很多是,可以给父元素指定事件,还能动态创建其他的子元素,也能执行预期的效果

    事件冒泡:在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。

    事件委托能给我带来一些方便,比如事件委托,但是也有缺点,就是会给父元素带来影响,阻止冒泡e.stopPropagation

    冒泡事件中输入e.target时只输出其本身,输入e.currentTarget时输出执行函数,会输出它的父级,this和e.currentTarget一样

    输入e.type会输出事件类型

    输入e.eventPhase时点击对应盒子会显示对应阶段,1事件捕获,2目标阶段,3事件冒泡

    e.ctrlKey,e.shiftKey之类是键鼠配合的触发事件方式

    btn.mousedown...console.log(e.button);输出的按鼠标的左中右键,显示的数字,谷歌等浏览器显示0,1,2,IE8显示1,4,2

    阻止事件冒泡的方式:

    一般用element.onclick=listener方式,用return false即可阻止

    用e.addEvenListener时,用stopPropagation阻止冒泡

    正则表达式:

    正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符、及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑。给定一个正则表达式和另一个字符串

    正则表达式的作用主要有三个:1.匹配(看有没有)2.获取 3.替换

    正则表达式对象RegExp,是Regular Expression的缩写

    常用的正则表达式规则
    1.1 元字符
    . 匹配任何单个字符,除了换行
    d 数字 D 非数字 [0-9]
    w 数字 字母 下划线 W 非 [0-9a-zA-Z_]
    s 空白 S 非空白
    换行
    制表符
    1.2 范围-- 匹配的是一个字符 ABCD
    [0-9] [0123] [a-z] [A-Z] 匹配的是一个字符
    1.3 | 或者 w|d


    1.4 量词 -只修饰一个字符
    a+ 1个或多个a
    a? 1个或0个a
    a* 0个或多个a

    量词 -只修饰一个字符
    a{x} x个n
    a{x,} 至少x个a
    a{x,y} x-y个a




    1.5 开始结束
    ^a 以a开始
    a$ 以a结束
    1.6 () 看成一个整体
    1.7 匹配汉字
    [u4e00-u9fa5]
    var str = "中华人民共和国";
    var regRex = /[u4e00-u9fa5]{7}/;
    console.log(regRex.test(str));
    1.8 参数
    i 忽略大小写
    g 全局匹配
  • 相关阅读:
    H5性能分析及前端性能监控:window.performance
    APP自适应的例子
    JS和CSS关于大小写的区分
    滚动条相关整理
    文本域的高度自适应
    导入谷歌地图(参考其他文献,个人整理)
    SmartNIC Architectures: A Shift to Accelerators and Why FPGAs are Poised to Dominate
    行业巨变!英特尔正式发布IPU芯片Mount Evans
    How to Design SmartNICs Using FPGAs to Increase Server Compute Capacity
    新一代SmartNIC融合了定制ASIC、Arm CPU和FPGA元素
  • 原文地址:https://www.cnblogs.com/sw1990/p/5782403.html
Copyright © 2020-2023  润新知