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 全局匹配