event | 易学教程

解决跨域(三)---postMessage

阅读更多关于解决跨域(三)---postMessage

postMessage原理及实现 HTML5为了解决跨域的问题，引入了一个全新的API；跨文档通信API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage是h5新增的方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。语法 otherWindow . postMessage ( message , targetOrigin , [ transfer ] ) ; otherWindow：其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。 message 将要发送到其他window的数据。它将会被结构化克隆算法序列化。这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。

怎么用javascript进行拖拽

阅读更多关于怎么用javascript进行拖拽

Javascript的特点是dom的处理与网页效果，大多数情况我们只用到了这个语言的最简单的功能，比如制作图片轮播/网页的tab等等，这篇文章将向你展示如何在自己的网页上制作拖拽．有很多理由让你的网站加入拖拽功能，最简单的一个是数据重组．例如：你有一个序列的内容让用户排序，用户需要给每个条目进行输入或者用select 选择，替代前面这个方法的就是拖拽．或许你的网站也需要一个用户可以拖动的导航窗口！那么这些效果都是很简单：因为你可以很容易的实现！网页上实现拖拽其实也不是很复杂．第一你需要知道鼠标坐标，第二你需要知道用户鼠标点击一个网页元素并实现拖拽，最后我们要实现移动这个元素．获取鼠标移动信息第一我们需要获取鼠标的坐标．我们加一个用户函数到document.onmousemove就可以了: document.onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var mousePos = mouseCoords(ev); } function mouseCoords(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body

js分享功能(微信,QQ,微博,空间,豆瓣等)

阅读更多关于 js分享功能(微信,QQ,微博,空间,豆瓣等)

js分享功能(微信,QQ,微博,空间,豆瓣等) 日常编程中，我们可能会碰到项目中的分享功能，各大平台都有分享接口和文档说明，当然也有一些一键分享插件，例如： sosh ， iShare.js 等等但有些同学不想引用插件，那么我整理了一些常用的分享至平台功能，以供参考。 html结构: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 < div class="share-list"> < ul class="share-container"> < li > < a title="分享到微信" href="javascript:void(0)" class="bds_weixin"> < img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_img_wechat.png" /> </ a > < div class="wechat-share"> < img src="http://images.cnblogs.com/cnblogs_com/a-cat/1193051/o_wechart_share

webWorker

阅读更多关于 webWorker

一、webWorker之初体验在 "setTimeout那些事儿" 中，说到JavaScript是单线程。也就是同一时间只能做同一事情。也好理解，作为浏览器脚本语言，如果JavaScript不是单线程，那么就有点棘手了。比如，与用户交互或者对DOM进行操作时，在一个线程上修改某个DOM，另外的线程删除DOM，这时浏览器该如何抉择呢? 所以，JavaScript是单线程也是有背景的。如下： <!DOCTYPE html> <head> <title>singleThread</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <script> //添加到任务队列中，待同步任务所处的‘执行栈’执行完毕，1秒后执行任务队列中的这个匿名函数 setTimeout(function(){ console.log('come on'); },1000); //只要不关闭该alert，‘执行栈’就没结束，从而也就不会进入到任务队列中 alert('waiting'); </script> </body> </html> 但， HTML5引入了一个工作线程（webWorker）的概念。它允许开发人员编写能够长时间运行而不被用户所中断的后台程序

DOM事件绑定方式

阅读更多关于 DOM事件绑定方式

普通事件可以直接绑定比如document.onmouseover=fn; 或者document.addEventListener("mouseover",fn,flase); attachEvent("onmouseover",fn); 但是DOM事件只能用addEventListener 来绑定 document.addEventListener("DOMMouseScroll",fn,flase); 这样绑定事件的时候阻止默认行为 return false; attachEvent 绑定方式也可以 addEventListener 在FF下需要用到event. preventDefault(); 其他的时候用return flase; 所以兼容一下就好了 if(event.preventDefault){ event.preventDefault(); } return false; IE attachEvent mousewheel FF addEventListener DOMMouseScroll Chrome addEventListener mousewheel 所以封装一个函数来添加最好 function myAddEvent(obj,oEvent,fn){ if(obj.attachEvent){ obj.attachEvent("on"+oEvent,fn);

13.3 事件对象

阅读更多关于 13.3 事件对象

一、DOM 中的事件对象 event 对象会传入事件处理函数中 var btn = document . getElementById ( 'myBtn' ) ; btn . onclick = function ( event ) { console . log ( event . type ) ; } ; btn . addEventListener ( 'click' , function ( event ) { console . log ( event . type ) ; } , false ) ; 通过 HTML 特性指定时，event 对象保存在 event 变量中 <input type='button' value='click me' οnclick='alert(event.type)' / > 所有事件的 event 对象都包含以下属性和方法属性/方法说明 bubbles 表示事件是否冒泡 cancelable 表示是否可以取消事件的默认行为 currentTarget 事件处理程序正在处理事件的元素 defaultPrevented 是否调用了 preventDefault() detail 与事件相关的细节信息 eventPhase 调用事件处理程序的阶段：1.捕获阶段2.处于目标3.冒泡阶段 preventDefault() 取消事件的默认行为

如何捕捉窗口的前进、后退、刷新、停止、关闭、移动事件

阅读更多关于如何捕捉窗口的前进、后退、刷新、停止、关闭、移动事件

停止有document.onstop，看微软的例子 <body scroll=no> <script> document.onstop=fnTrapStop; var oInterval; window.onload=fnInit; function fnInit(){ oInterval=window.setInterval("fnCycle()",1); } function fnCycle(){ // Do something } function fnTrapStop(){ window.clearInterval(oInterval); alert(); } </script> </body> ___________________________________________________________________________________________ 刷新与关闭 <body scroll=no> <script> document.body.onbeforeunload=aa; function aa(){ if(event.clientY<0&&event.clientX>760||event.altKey) alert("窗口关闭!") else alert("窗口刷新!") } </script> </body> //写死了宽度

H5拖动事件复习

阅读更多关于 H5拖动事件复习

定义和用法 ondrag 事件在元素或者选取的文本被拖动时触发。拖放是 HTML5 中非常常见的功能。更多信息可以查看我们 HTML 教程中的 HTML5 拖放。注意：为了让元素可拖动，需要使用 HTML5 draggable 属性。提示：链接和图片默认是可拖动的，不需要 draggable 属性。在拖放的过程中会触发以下事件：在拖动目标上触发事件 (源元素) : ondragstart - 用户开始拖动元素时触发 ondrag - 元素正在拖动时触发 ondragend - 用户完成元素拖动后触发释放目标时触发的事件: ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件 ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件 ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件 ondrop - 在一个拖动过程中，释放鼠标键时触发此事件注意：在拖动元素时，每隔 350 毫秒会触发 ondrag 事件。 <!DOCTYPE html> <html lang="en"> <head> <title>拖动事件</title> <meta charset="utf-8"> <style> .box{ width: 200px; height: 100px; border: 1px solid

flume agent的内部原理

阅读更多关于 flume agent的内部原理

flume agent 内部原理 1、Source采集数据， EventBuilder.withBody(body) 将数据封装成Event对象， source.getChannelProcessor().processEvent(event) 然后将数据交给 Channel Processor （利用该类的方法进行下一步的处理） 2、 Channel Processor 将Event事件传递给拦截器链（Intercepter，进行简单的数据清洗） interceptorChain.intercept(event) ，然后将数据返回给Channel Processor。（通过调用 selector.getRequiredChannels(event) 方法来使操作封装成事务。） 3、然后 Channel Processor 将拦截过滤之后的Event事件传递给 Channel选择器(Channel Selector) (因为一个Source 可以对应多个 Channel，所以 Channel Selector 可以决定每个event具体分配给哪一个Channel)，然后Channel Selector返回给Channel Processor写入event事件的Channel列表。其中：Channel Selectors有两种类型，分别是Replicating Channel

EVENT事件

阅读更多关于 EVENT事件

1、事件驱动要素： 1、事件源：触发事件的元素； 2、事件：被JS侦测到的行为； 3、事件处理函数（事件句柄/事件监听器）：事件发生时进行的操作； 2、事件分类：鼠标事件、键盘事件、表单事件、页面事件 3、事件绑定： 1、在JS脚本中绑定事件：例：html:<input type="button" id="btn" value="点我"/> javaScript:var btn = document.getElementById("btn"); 方式一：btn.onclick = function(){} 方式二：function test(){ console.log(123); } btn.onclick = test; 2、不推荐使用：标签中绑定事件： <input type = "button" id ="btn" value="点我" onclick = "test()"> 3、监听器： IE：添加：element.attachEvent(event,function); 删除：element.detachEvent(event,function); CHROM/FIREFOX：添加：element.addEventListener(event,funtion,useCapture); 删除：element.removeEventListener(event

订阅 event