公共事件处理函数js库】的更多相关文章

var EventUtil = { /* *添加事件处理 参数:元素对象 事件类型 处理函数 */ addHandle: function (element, type, handle) { //dom2级的事件添加 if (element.addEventListener) { element.addEventListener(type, handle, false); } else { //IE 的事件添加 if (element.attachEvent) { element.attachE…
今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Level 2.这两种方式最大的区别就在于DOM 0级事件处理只能用于事件冒泡,而DOM 2级事件处理却可以通过设置第三个参数来分别支持事件冒泡和事件捕获. DOM 0级事件处理一般是直接把一个函数分配给一个事件处理程序,既可以在元素中直接分配一个事件处理程序,如方式一所示;也可以在脚本中把函数分配给事件处…
一.事件绑定的几种方式: 1.1 ele.on+“事件名“:如div.onclick = function(event){ }; 1.1.1这种方式兼容性非常好,但一个元素的同一个事件上只能绑定一个处理程序. 1.1.2基本等同于写在html行间上. 1.2 obj.addEventListener(type,fn,false); 1.2.1 IE9以下不兼容,可以为一个事件绑定多个处理程序. 1.3 obj.attachEvent('on'+type,fn); 1.3.1 IE独有,一个事件同…
/* 跨浏览器的事件处理函数 */ var EventUtil = { addHandler : function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent('on'+type,handler); }else{ element['on'+ty…
下面这些客户端 javascript代码用到了事件,它给一个很重要的事件--“load" 事件注册了一个事件处理程序.同时展示了注册”click“事件处理函数更高级的一种方法 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <b…
IE8中使用attachEvent绑定事件处理函数时,不能直接向event 对象添加数据属性.可以用属性复制的方法,包装新的event对象. 1. 属性复制var ObjectExtend = function(destination, source) {   for (var property in source) {    destination[property] = source[property];   }   return destination;}; 2. 绑定事件var atta…
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解. 本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括面向对象,jquery,绑定,脚本化css等. 一. jquery的美元符意味什么? 先思考alert(typeof $)的结果中的$,它是一个对象,也是一个函数. 所以美元符字面上是jQuery,其实就是一个jq对象,里面可以接受函数,字符串(#xxx,.xxx,xxx...),还有一种是对象(比如thi…
一:事件处理函数 (1) one(事件名称, fn) 仅对指定事件监听一次,监听事件只会执行一次 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <h1>仅进行一次…
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta charset="utf-8" />     <title>jQuery测试页-111cn.net</title> </head> <body>     <!-- 引入 jq…
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增. Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择,所以说,Vue.js是一套构建用户界面的渐进式框架. Vue的核心库只关注视图层,Vue的目标是通过尽可能简单的 API 实现响应的数据绑定,在这一点上Vue…
所谓造轮子的好处就是复习知识点,加深对原版jquery的理解.本文系笔者学习jquery的笔记,记述一个名为"dQuery"的初级版和缩水版jquery库的实现.主要涉及知识点包括面向对象,jquery,绑定,脚本化css等. 一. jquery的美元符意味什么? 先思考alert(typeof $)的结果中的$,它是一个对象,也是一个函数.所以美元符字面上是jQuery,其实就是一个jq对象,里面可以接受函数,字符串(#xxx,.xxx,xxx...),还有一种是对象(比如this)…
作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的javascript代码,鲁棒性,简单总结几条我觉得是常识的事:1.1 一个javascript库最好的实现方式是占用最少的命名空间,比如window对象上或者global对象上只占用一个引用.1.2 健壮的js程序对输入都会有完善的类型检查和异常处理,边界值的判断.1.3 对js的几种继承方式要足…
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery测试页</title> </head>…
* 事件 * jQuery与其他JS库共存 * 调用jQuery.noConflict()方法 * 表示jQuery将"$"符号的使用权交出 * 通过两种方式将"$"找回 * 第一种 jQuery(function($){// 函数域 // function中定义形参"$" $("ul>li"); }); * 第二种 (function($){// 函数域 $("ul>li"); })(jQue…
1 HTML的事件属性  全局事件属性:HTML 4 增加了使事件在浏览器中触发动作的能力,比如当用户点击元素时启动 JavaScript. a. Window 事件属性,针对 window 对象触发的事件(应用到 <body> 标签),常用的为onload. b. Form事件,由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):常用的为onblur.onfocus.onselect.onsubmit. c. keybord事件 d.Mous…
本篇为完结篇.主要讲述如何造出轮子的高级特性. 一. css方法的高级操作 先看本文第一部分所讲的dQuery css方法 //css方法 dQuery.prototype.css=function(attr,value){ if(arguments.length==2){//当参数个数为2时,使用设置css的方法 var i=0; for(i=0;i<this.elements.length;i++){ this.elements[i].style[attr]=value; } }else{/…
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方法交由开发者来实现.因此,出现了很多种 JavaScript 模块化的实现方式, 以 AMD 为例,该规范使用 define 函数来定义模块. define(factory(){ //模块化 }); 模块模式: 模块模式使用了 JavaScript 的一个特性,即闭包(Closures).现今流行的…
实际开发中遇到JQuery与其他js库起冲突 究其原因,是它们的全局对象定义冲突了,特别是变量”$”, 可重载$函数.使用jQuery.noConflict()就可以通过重载$函数 例:项目中应用的 <script type="text/javascript" src="js/mootools.js"></script> <script type="text/javascript">         jQuer…
hammer.js是一个多点触摸手势库,能够为网页加入Tap.DoubleTap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: http://eightmedi…
在上一篇文章中提到了关于传统的JS中注册事件对象的一些缺点和问题,下面是关于DOM2级的现代事件绑定.本文中设计到的HTML文件在文章最后 一.W3C事件处理函数 “DOM2 级事件”定义了两个方法,用于添加事件和删除事件处理程序的操作:addEventListener()和 removeEventListener().所有 DOM 节点中都包含这两个方法,并且它们都接受 3 个参数:事件名.函数.冒泡或捕获的布尔值(true 表示捕获,false 表示冒泡).看看这两个方法在上一篇文章中的几个…
hammer.js是一个多点触摸手势库,能够为网页加入Tap.Double Tap.Swipe.Hold.Pinch.Drag等多点触摸事件,免去自己监听底层touchstart.touchmove.touchend事件并且写一大堆判断逻辑的痛苦.hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试.这是一个专为触摸手势而生的js库,对有需要的朋友非常有帮助,奉上常用的一些方法调用文档. 使用方法: 1 2 3 4 5 6 7 8…
在编写一个js库之前需要准备许多基础知识. 本人在编写之前主要参考了visjs和百度的echarts这两个库的部分内容,这之中提取出几个要点如下: 1.如何整理代码结构,使模块与模块分开又不至于出现调用困难的现象? 首先讲一下上面两个参考的库使用的方法,visjs是一个相对较小的开源库,目前已经更新了很多个版本,但是最具参考意义的应该是0.0.9版,因为之后的版本增删改太多,命名方式也改的很奇葩,基本看不懂,读者可以从github上下载历史版本.他的代码整理工具用的是nodejs,通过一个生成方…
怎样让jQuery和其它js库共存 有时候需要同时使用jQuery和其它javascript,比如在joomla中默认的是motools,但很多人还是希 望能够使用jQuery,如果直接调用的话,由于两个库都使用了$作为简写,会造成程序冲突的情况,那么 ,怎样让jQuery和其它javascript库共存呢?有以下三种方法(均来自于官方网站): 1.覆盖$ 函数,使用jQuery代替$ 在jQuery和其它库已经加载之后,可以调用jQuery.noConflict ().   <script s…
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与jsp的数据交互,第三部分为javabean实现数据的插入.本文为该过程的第一部分即构建解析xml文件的javascript库. 本文以以下xml文件为例进行解析: ?xml version="1.0" encoding="GB18030"?> <state…
当我们需要在控制层调用相同的封装函数时,写多次相同的函数,显得代码十分的拉杂,不精简: TP框架有一个很好的机制,可以再Common定义一个function.php函数,当我们在控制层调用的时候直接调用就可以使用,方便快捷: 具体实现方便如下: 我们可以再三个地方设置公共的函数function.php (注意:function.php默认是不存在的,需手动创建) 根目录\Application\Common\Common\function.php(公共的函数,Home和Admin都可以调用) 根…
今年工作进度到这里结束,整理一下今年收集的自用js库,后期会更新,代码已贴github=>https://github.com/lpg-kobe/personal-github /** * @param {long} //通用函数库 * @param {onerror} //js错误调试 * @author lpg 2017-11-02 */ window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber,…
建立js库模板 (function (){ function $(){ alert("被调用到喽!"); /*alert()是JavaScript脚本语言中窗口window对象的一个常用方法: 其主要用法就是在你自己定义了一定的函数以后,通过执行相应的操作, 所弹出对话框的语言.并且alert对话框通常用于一些对用户的提示信息.*/ } //注册命名空间 'myNameSpace' 到window对象上 window['myNameSpace'] = {} //把$函数注册到 'myN…
在上两节中,我们讲述了props, 组件使用props进行渲染,但是这是一次性的, props渲染完成之后就不做任何事情了,但是现实中却不是这样的,当我们点击购物车上的加减按钮时,数量会自动加1或减1,还有在就是倒计时效果,这就用了组件内部的状态, 如果一个组件有内部状态,那只能用类式组件,因为类中拥有构造函数,构造函数表示就是一个对象实例上的属性,对象实例上的属性都是特有的,所以也可以称之为对象实例的状态. 在组件的构造函数中声明组件的状态也是很简单,直接写this.state = {},我们…
直至昨晚为止,学习了一个多月的MVC与jQuery,从所做的练习中,发觉jQuery的代码也有跟C#语言一样可以重构,多页面有相同使用的方法函数,均可以放置于一个单独立的js文件或是自定义的js库中. 在使用时,引用此库文件即可.举个简单的例子,如前面介绍的两个下拉列表联动的功能,不管是在MVC添加,还是编辑时,均需要写上几个相同的函数来实现.为了js代码没有冗余.我们就可以重构它们了. 在MVC应用程序下的Scripts目录下,创建一个insus.common.utility.js库. js类…
11个处理触摸事件和多点触摸的JS库 触摸屏是现在所有智能手机的标配,还包括各种平板设备,而且很多桌面也慢慢在开始支持触摸操作.要开发支持触摸屏设备的Web应用,我们需要借助浏览器的触摸事件来实现. 下图是各种触摸事件说明: <ignore_js_op> 本文我们介绍11个用来处理触摸事件以及支持多点触摸的JS库: 1.QUO JS QuoJS是一个小型.模块化.面向对象的JavaScript库,用于移动Web开发中简化HTML文档遍历.事件处理和Ajax交互等功能. Events: Touc…