event

事件委托好处： 1，性能好 2，新添加的元素会动态跟踪事件 js事件委托 window . onload = function ( ) { var Ul = document . getElementById ( "ul" ) ; var Li = oUl . getElementsByTagName ( "li" ) ; /* event：事件源，在哪个事件中，操作的那个元素就是事件源 ie浏览器：window.event.srcElement 标准下:event.target nodeName:找到元素的标签名 */ Ul . onmouseover = function ( ev ) { var ev = ev || window . event ; var target = ev . target || ev . srcElement ; if ( target . nodeName . toLowerCase ( ) == "li" ) { target . style . height = "100px" ; } } Ul . onmouseout = function ( ev ) { var ev = ev || window . event ; var target = ev . target || ev . srcElement ; if ( target .

什么是冒泡？ DOM事件流（event flow ）存在三个阶段： 事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件捕获 （ event capturing ） ： 通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始 由外到内 进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。 事件冒泡 （ dubbed bubbling ） ： 与事件捕获恰恰相反，事件冒泡顺序是 由内到外 进行事件传播，直到根节点。 dom标准事件流的触发的先后顺序为： 先捕获再冒泡 ，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现， IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。 addEventListener() 方法 这个方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是： addEventListener(event, function, useCapture) 参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。 参数 function 也是必须的，表示事件触发后调用的函数

js委托事件的概述与作用 addEventListener直接绑定新的元素会报dom不存在的错误吗？肯定是会的 事件委托(代理)：未来还不清楚会创建多少个节点，所以没办法实现给他们注册事件 先把事件委托的作用写一下。 1.支持为同一个DOM元素注册多个同类型事件 2.可将事件分成事件捕获和事件冒泡机制 问题：一般的注册事件，后面的会覆盖前面的（addEventListener(type,listener,useCapture）可以避免这种情况 type: 必须,String类型,事件类型（去掉on） listener: 必须,函数体或者JS方法 useCapture: 可选,boolean类型。指定事件是否发生在捕获阶段。默认为false,事件发生在冒泡阶段 事件捕获和事件冒泡机制 1.事件捕获 当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件 2、事件冒泡 当事件到达目标节点后，会沿着捕获阶段的路线原路返回。同样，所有经过的节点,都会触发对应的事件 事件委托和新增节点绑定事件的关系？ 事件委托的优点: 1.提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。 2.动态监听:使用事件委托可以自动绑定动态添加的元素

事件监听可以使用 v-on 指令： <div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script> 　v-on 可以接收一个定义的方法来调用 <div id="app"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> <script> var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 app.greet() // ->

简单说明下 这是一道面试题，刚开始面试官为我前端如何处理大量数据。我第一时间就脱口而出用分页呀！面试官说那是从后台的角度来考虑的。从前端的角度呢？emmmmm...我思考了一下，分批加载，懒加载。监听用户的滑动分批显示数据。接着又问，如果我要对这些大量数据做计算做处理呢，同时又不能让页面崩掉、假死。该如何操作呢？顿时我就懵逼了，这。。这个要怎么操作呀。心想做计算啥的不是应该在后台做完吗！ 而且怎么可能一下子给前端这么多数据吗，~~ 抱怨归抱怨，吐槽归吐槽~~ 后来问了下面试官，实现的大概思路。后来面试官说是通过worker来做子线程来实现的。 好，那我们就来学习一下这个worker 什么是worker 运行者 Worker 接口是Web Workers API的一部分，代表一个后台任务， 它容易被创建并向创建者发回消息。创建一个运行者只要简单的调用Worker()构造函数，指定一个脚本，在工作线程中执行。（引自MDN） 复制代码 看概念可能有点枯燥，通俗点讲就是：因为js是单线程运行的，在遇到一些需要处理大量数据的js时，可能会阻塞页面的加载，造成页面的假死。这时我们可以使用worker来开辟一个独立于主线程的子线程来进行哪些大量运算。这样就不会造成页面卡死。也说明 worker可以用来解决大量运算是造成页面卡死的问题。 worker的语法 const worker=new

Jquery绑定事件及动画效果 本文转载于： https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind（type，data，fuc） one(type,data,fuc) //只执行一次 常见事件类型 名称 含义 blur 失去焦点 focus 获取焦点 load 加载 resize 重置大小 scroll 滚动 unload 卸载 click 点击 dblclick 双击 mousedown 鼠标按下 mouseup 鼠标弹起 mousemove 鼠标移动 mouseover 鼠标悬停 mouseout 鼠标移走 mouseenter 鼠标移入 mouseleave 鼠标离开 change 内容改变 select 选中 submit 提交 keydown 有键按下 keypress 有键按下 keyup 有键弹起 error 有错误 判断是否显示 if($("#id").is(":visible")) { } else { } 简化绑定事件 $(this).mouseover(function(){ //代码 }) Hover事件 hover（enter，leave） 光标移入，触发第一个事件，光标移走，触发第二个事件 $("#id").hover(function(){ //光标移入

vue+django实现一对一聊天和消息推送的功能。主要是通过websocket，由于Django不支持websocket，所以我使用了django-channels。考虑到存储量的问题，我并没有把聊天信息存入数据库，服务端的作用相当于一个中转站。我只讲述实现功能的结构性代码，具体的实现还请大家看源代码。 前端聊天界面 前端消息提醒界面 后端代码 效果展示 实现过程 后端 首先，我们需要先定义websocket的两条连接路径。 ws/chat/xxx/ （ xxx 指代聊天组）这条路径是当聊天双方都进入同一个聊天组以后，开始聊天的路径。 push/xxx/ （ xxx 指代用户名）这条是指当有一方不在聊天组，另一方的消息将通过这条路径推送给对方。 ws/chat/xxx/ 只有双方都进入聊天组以后才开启，而 push/xxx/ 是自用户登录以后，直至退出都开启的。 websocket_urlpatterns = [ url ( r '^ws/chat/(?P<group_name>[^/]+)/$' , consumers . ChatConsumer ) , url ( r '^push/(?P<username>[0-9a-z]+)/$' , consumers . PushConsumer ) , ] 我们采用user_a的id加上下划线_加上user

1.生成一个event_base 在使用其他的libevent函数之前，你必须要先分配一个 event_base 结构， event_base 结构持有 event集合并且能判断那个event是活跃的。 如果 event_base 被设置为使用locking，那么它在多线程内访问是安全的。但是它的loop只能在 一个线程内执行。如果想要多个线程都能polling，就需要每个线程一个 event_base 结构。 每个 event_base 都有一个method（或者backend），用于判断event就绪。这些method有： 1.select 2.poll 3.epoll 3.kqueue 4.devpoll 5.evport 6.win32 你可以用环境变量来disable特定的backend，如果你想关闭kqueue,那么设置 EVENT_NOKQUEUE 环境 变量，或者使用函数 event_config_avoid_method() 。 2.设置一个默认的event_base event_base_new() 分配并返回一个默认设置的 event_base ,如果出错，它返回NULL。 它会选择操作系统支持的最快的method最为自己的method。 接口: #include<event2/event.h> struct event_base* event_base

手指事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width"/> <title></title> <style> *{ padding: 0; margin: 0; } #box{ width: 100px; height: 100px; background: yellowgreen; } </style> </head> <body> <div id="box"></div> </body> <html> ontouchstart 手指触摸屏幕 <script> var box=document.getElementById('box'); box.addEventListener('touchstart',function(){ console.log('111'); }); </script> ontouchmove 手指在屏幕上发生移动 <script> var box=document.getElementById('box'); box.addEventListener('touchsmove',function(){ console.log('222'); }); </script> ontouchend

聊一聊Android的消息机制 侯 亮 1概述 在Android平台上，主要用到两种通信机制，即Binder机制和消息机制，前者用于跨进程通信，后者用于进程内部通信。 从技术实现上来说，消息机制还是比较简单的。从大的方面讲，不光是Android平台，各种平台的消息机制的原理基本上都是相近的，其中用到的主要概念大概有： 1）消息发送者； 2）消息队列； 3）消息处理循环。 示意图如下： 图中表达的基本意思是，消息发送者通过某种方式，将消息发送到某个消息队列里，同时还有一个消息处理循环，不断从消息队列里摘取消息，并进一步解析处理。 在Android平台上，把上图的右边部分包装成了一个Looper类，这个类的内部具有对应的消息队列（MessageQueue mQueue）和loop函数。 但是Looper只是个简单的类而已，它虽然提供了循环处理方面的成员函数loop()，却不能自己凭空地运行起来，而只能寄身于某个真实的线程。而且，每个线程最多只能运作一个Looper对象，这一点应该很容易理解。 Android平台上另一个关键类是Handler。当消息循环在其寄身的线程里正式运作后，外界就是通过Handler向消息循环发出事件的。我们再画一张示意图如下： 当然，系统也允许多个Handler向同一个消息队列发送消息： 整个消息机制的轮廓也就是这些啦，下面我们来详细阐述。