事件冒泡&正则表达式

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 非空白        \n  换行        \t  制表符    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  全局匹配
时间: 2024-11-08 14:27:39

事件冒泡&正则表达式的相关文章

事件,正则表达式

1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码,身份证号,邮箱,信用卡号等的验证:需要用到正则表达式来进行验证. (5).其它验证 2.正则表达式 用符号来描述书写规则:/ 中间写正则表达式 / ^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾 \d:一个任意的数字 \w:一个任意的数字或字母 \s: {n}:把左边的表达式重

form表单验证和事件、正则表达式

1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码,身份证号,邮箱,信用卡号等的验证:需要用到正则表达式来进行验证. (5).其它验证 2.正则表达式 用符号来描述书写规则:/ 中间写正则表达式 / ^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾 \d:一个任意的数字 \w:一个任意的数字或字母 \s:一个任意的字符串 {n}:

##阻止事件冒泡和取消默认操作

取消事件冒泡 事件冒泡指当一个元素的事件被触发的时候,比如鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发,这个过程被称为事件冒泡.这个事件是从原始元素开始一直冒泡到DOM树的最上层.事件传播的3个阶段:捕获.冒泡.目标阶段. 阻止事件冒泡:w3c的方法是event.stopPropagation(),IE则是使用event.cancelBubble = true; 兼容性写法: var event = event || window.event; if(event &&

js之事件冒泡和事件捕获详细介绍

(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window (2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开

vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type="button" value="按钮" @click="show1($event)"> </div> methods:{ show1:function(ev){ console.log(ev); alert(1); ev.cancelB

js事件冒泡和事件委托

js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: 1 <ul class="clearfix" data-type="cityPick"> 2 <li class="active_sort_opts" data-id="0">全部</li> 3 <li data-id="88">纽约</li> 4 <

jQuery[补1] - 事件冒泡和阻止冒泡

假设网页上有两个元素,其中一个元素嵌套在另一个元素中,并且都被绑定了 click 事件,同时 body 元素上也绑定了 click 事件. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="conten

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false

preventDefault: preventDefault它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为.既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了.什么元素有默认行为呢?如链接<a>,提交按钮<input type=”submit”>等.当Event对象的cancelable为false时,表示没有默认行为,这时即使有默认行为,调用 preventDefault也是不会起作用的. 我们都知道,链接&

js时间冒泡,阻止事件冒泡

首先解释一下事件冒泡神什么, 在js中,假如在div中嵌套一个div 如 <style type="text/css"> #box1{width:500px;height:500px;background:#900;} #box2{width:400px;height:400px;background:#090;} #box3{width:300px;height:300px;background:#009;} #box4{width:200px;height:200px;