js 事件监听原理,及兼容写法,jquer基本封装原理
2016-09-06 16:59
288 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>事件监听原理,及兼容写法,jquer基本封装原理</title> </head> <body> <button>我绑定了多个事件</button> <script> // ---------------------------------------- 事件箭筒原理 ------------------------------ var btn = document.getElementsByTagName("button")[0]; fn("click",fn1,btn); fn("click",fn2,btn); fn("click",fn3,btn); function fn1(){ console.log("九尺龙泉万卷书,上天生我意何如。"); } function fn2(){ console.log("不能报国平天下,枉为男儿大丈夫。"); } function fn3(){ console.log("111111。"); } function fn(str,fn,ele){ //判断位置要注意:如果进入绑定事件本身,那么该事件已经本绑定了 //所以获取旧的事件必须在新的事件绑定之前 var oldEvent = ele["on"+str]; ele["on"+str] = function () { //不能直接执行函数,因为我们还不知道以前有没有绑定我同样的事件 //进行判断,如果以前有过绑定事件,那么把以前的执行完毕在执行现在的事件,如果没有就直接执行 //如果没有被定义过事件该事件源的该事件属性应该是null对应的boolean值是false //如果已经定义过事件该事件源的该事件属性应该是function本身对应的boolean值是true if(oldEvent){ //因为oldEvent本身他就是函数本身,那么后面加一个();就是执行函数 oldEvent(); fn(); }else{ //没有绑定过事件 fn(); } } } //------------------------------ 事件绑定与解绑的兼容写法 ---------------------------- var btn = document.getElementsByTagName("button")[0]; EventListen = { addEvent: function (ele,fn,str) { //通过判断调用的方式兼容IE678 //判断浏览器是否支持该方法,如果支持那么调用,如果不支持换其他方法 if(ele.addEventListener){ //火狐谷歌IE9+支持addEventListener //直接调用 ele.addEventListener(str,fn); }else if(ele.attachEvent){ //IE678支持attachEvent ele.attachEvent("on"+str,fn); }else{ //在addEventListener和attachEvent都不存在的情况下,用此代码 ele["on"+str] = fn; } }, removeEvent: function (ele,fn,str) { if(ele.removeEventListener){ ele.removeEventListener(str,fn); }else if(ele.detachEvent){ ele.detachEvent("on"+str,fn); }else{ ele["on"+str] = null; } } } // btn.addEventListener("click",fn); // 用什么方式绑定 用什么方式解绑 EventListen.addEvent(btn,fn,"click"); EventListen.removeEvent(btn,fn,"click"); function fn(){ alert(1); } // ------------------------- jquery 封装基本原理 ----------------------- // $ 与 _ 是js中能用来起名的特殊符号 jquery选择了$ // css在定义标签的时候 可以用 div .ClassName #id 三种方式 function $(str){ var str1 = str.charAt(0); //截取参数中第一个字符 if(str1==="#"){ //说明是id return document.getElementById(str.slice(1)); }else if(str1 === "."){ //说明是类 return document.getElementsByClassName(str.slice(1)); }else{ //说明是标签 return document.getElementsByTagName(str); } } </script> </body> </html>
相关文章推荐
- js事件监听 解绑 添加兼容写法
- js监听用户的键盘敲击事件,兼容各大主流浏览器
- js监听事件方法addEventListener()兼容非IE和attachEvent()兼容IE
- 前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象
- 前端知识点整理之表单输入事件的兼容写法,js常用关键字,获取标签元素的写法
- 自己封装的兼容事件处理eventHandler.js
- Js事件监听封装(支持匿名函数)
- js DOM事件监听与解除的兼容性写法
- 封装事件监听兼容
- js事件对象获取兼容写法
- js取消事件冒泡和阻止事件的默认行为(兼容写法)
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- js取消事件冒泡和阻止事件的默认行为(兼容写法)
- js事件封装(已兼容)
- js拿到标签所有样式 js事件监听兼容ie
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载
- js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)
- js 事件监听封装
- JS事件添加和移出的兼容写法示例
- js监听浏览器关闭事件(区分刷新和关闭,兼容IE9,10,11,Edge,Chrome和Firefox)