event

js事件委托

流过昼夜 提交于 2020-02-28 02:18:32
​     今天呢,咱们来说说事件委托,有的相关资料叫事件代理. ​     首先呢,先来讲讲事件委托的起源:由于事件处理程序可以为web应用提供交互能力,因此很多开发人员会不分青红皂白的向页面中添加大量的处理程序.在js中,添加到页面的事件处理程序数量直接关系到页面的整体运维性能.导致这一问题的原因是多方面的.首先:     1 函数都是对象,都会占用内存,内存中对象越多,性能越差     2 事先指定所有的事件处理程序而导致dom访问次数,会延迟整个页面的交互的就绪事件. 所以:对事件处理程序过多问题的解决方案就是事件委托. 举个栗子 <ul id = 'ul1'> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> ... <li>100</li> </ul>     如果咱们页面上有100个li标签,如果要实现点击li变成红色,我们虽然可以用for循环,给每个li添加事件,那这样就为它们添加了100个事件处理程序,若在一个复杂的web程序中,都使用这种方式,那结果就是数不清的添加事件处理.那么这里是极其浪费资源的.所以这里可以得到一个结论: ​     事件委托,最重要的功能就是 提高程序运行效率. ​     既然出来了事件委托,那咱们讲讲事件委托的原理.先来个概念:事件流. ​ 事件流分为 ​ 1.事件捕获 ​

DOM事件

允我心安 提交于 2020-02-27 13:25:34
DOM事件类     基本概念:DOM事件的级别     DOM事件模型     DOM事件流     描述DOM事件捕获的具体流程     Event对象的常见应用     自定义事件 1.事件级别 DOM0 element.onclick=function(){} DOM1 element.addEventListener('click',function(){},false) DOM3(增加了多种事件类型, 比如鼠标事件 ,键盘事件) element.addEventListener('keyup',function(){},false) DOM事件模型 就是冒泡和捕获两种,捕获是从上往下,冒泡是从当前元素也就是目标元素往上。 DOM事件流 第一阶段:捕获 第二阶段:目标阶段 第三阶段:冒泡 描述DOM事件捕获的具体流程(冒泡相反) (补充:document.documentElement获取html这个节点) 第一个接收到的对象是window,然后传给document,再传给html,再传给目标元素的父级元素,然后传给目标元素。 Event对象的常见应用   event.preventDefault()   event.stopPropagation()   event.stopImmediatePropagation()   event.currentTarget  

EventBus 3.0 的基本使用

让人想犯罪 __ 提交于 2020-02-27 11:26:21
EventBus 3.0 的基本使用 1.什么是EventBus? EventBus 是一个Android端优化的publish/subscribe消息总线,简化了应用程序内各组件间、组件与后台线程间的通信。比如请求网络,等网络返回时通过Handler或Broadcast通知UI,两个Fragment之间需要通过Listener通信,这些需求都可以通过EventBus实现。 2.使用EventBus有什么好处? 采用消息发布/订阅的一个很大的优点就是代码的简洁性,并且能够有效地降低消息发布者和订阅者之间的耦合度。 3.EventBus 3.0 的使用 在 AndroidStudio中添加依赖: compile ‘org.greenrobot:eventbus:3.0.0’ 2.注册和注销 你需要在一个Activity或者Fragment中注册eventbus事件,然后定义接收方法,这和Android的广播机制很像,你需要首先注册广播,然后需要编写内部类,实现接收广播,然后操作UI,在EventBus中,你同样需要这么做。比如: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout

js中高度与宽度的获取

倖福魔咒の 提交于 2020-02-27 09:49:34
JS获取各种宽度、高度的简单介绍 : scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 offsetWidth 与 style.width 的区别 一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。 二

Linux 目录变化监听 - python代码实现

孤街浪徒 提交于 2020-02-27 09:39:20
在python中 文件监控主要有两个库, 一个是pyinotify ( https://github.com/seb-m/pyinotify/wiki ),pyinotify依赖于Linux平台的inotify。 一个是watchdog(http://pythonhosted.org/watchdog/)。对不同平台的的事件都进行了封装。 1、watchdog实现    from watchdog.observers import Observer from watchdog.events import * import time class FileEventHandler(FileSystemEventHandler): def __init__(self): FileSystemEventHandler.__init__(self) def on_moved(self, event): if event.is_directory: print("directory moved from {0} to {1}".format(event.src_path,event.dest_path)) else: print("file moved from {0} to {1}".format(event.src_path,event.dest_path)) def on_created

js事件对象

独自空忆成欢 提交于 2020-02-27 07:02:14
Evernote Export js事件对象 在DOM元素触发事件时,事件处理函数中会产生的一个事件对象event。 事件对象获取方法 所有浏览器都支持event对象,只是支持的方式不一样 FireFox、Chrome等浏览器要获取到event对象,需要从函数中传入,参数名随意 而IE在浏览器中event作为window对象的一个属性存在,可以直接使用 event 或 window.event 获取到 //事件对象获取方法 document .onkeydown = function ( ev ) { //onkeydown 事件会在用户按下个键盘按键时发生 var e = ev || event ; //兼容各个浏览器 console .log(e); } 事件对象中与鼠标/键盘相关属性 clientX/clientY属性:返回当事件被触发时,鼠标指针的坐标(到浏览器窗口的坐标) offsetX/offsetY属性:返回当事件被触发时,鼠标指针的坐标(在事件源元素中的坐标) pageX/pageY属性:返回当事件被触发时,鼠标指针的坐标(整个页面中的坐标) button属性:返回触发事件的鼠标按键 which属性:返回触发事件的按键码(针对键盘和鼠标事件) IE678不支持 keyCode属性:返回键盘按键的按键码 组合键:ctrlKey、altKey、shiftKey

pyqt5事件与鼠标事件

江枫思渺然 提交于 2020-02-27 06:45:06
pyqt5事件与鼠标事件 一、每个事件都被封装成相应的类: pyqt中,每个事件类型都被封装成相应的事件类,如鼠标事件为 QMouseEvent ,键盘事件为 QKeyEvent 等。而它们的基类是 QEvent 。 二、基类QEvent的几个重要方法: accept ( ) 表示事件已处理,不需要向父窗口传播 ignore ( ) 表示事件未处理,继续向父窗口传播f type ( ) 返回事件类型,如QtCore.QEvent.MouseButtonPress,一般由基事件调用。因为其它事件已经知道自己的事件类型了。 还有一个自定义事件的注册方法。 三、QMouseEvent鼠标事件: buttons ( ) 返回哪个鼠标按键被按住了。如Qt.LeftButton globalPos ( ) 返回鼠标相对屏幕的位置QPoint pos ( ) 返回鼠标相对处理事件的窗口的位置 四、处理鼠标事件的响应函数(在QWidget及其继承类中): mousePressEvent(QMouseEvent) mouseReleaseEvent(event) mouseMoveEvent(event) 五、鼠标事件的具体内容 1.按下、松开鼠标按键 按下并释放鼠标按钮时,将调用以下方法: mousePressEvent (self, event) - 鼠标键按下时调用;

跨文档消息传递 postMessage

孤人 提交于 2020-02-27 05:09:58
一、跨文档消息传递 1. postMessage 发送信息 向当前页面的 <iframe> 元素传送数据 // 接收方window对象.postMessage( "message", "接收方域名" ); var iframeWindow = document.getElementById("myframe").contentWindow; //contentWindow iframeWindow.postMessage("a secret","http://www.wrox.com"); //向内嵌框架发送消息 接收信息 该方法触发接收方 window 对象的 message 事件,并且传递个 onmessage处理程序的 event 包括以下三方面信息 data:postMessage()第一个参数传过来的 message,最好只传字符串 (结合: JSON.stringify(), JSON.parse() ) origin: 发生消息的文档所在的域 source: 发送消息的文档的 window对象 代理 //接收到其他窗口发送过来的信息 window.addEventListener("message", function(event){ event.source.postMessage("收到",event.origin) //向原窗口发送回执 }) 2. 例子 外层

vue的组件详解

余生长醉 提交于 2020-02-27 04:19:30
事件监听指令 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码 ,通常是触发一个函数,简写@ <template> <div id="app"> <button @click="count += 1">点击加1</button> <p>这个按钮被点击了{{count}}次</p> </div> </template> <script> export default { name: 'app', data () { return { count: 0 } } } </script> 方法事件处理器 许多事件处理的逻辑都很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。 因此 v-on 可以接收一个定义的方法来调用。 <template> <div id="app"> <button @click="counter">点击加1</button> </div> </template> <script> export default { name: 'app', data () { return { name: 'vue' } }, methods: { counter () { console.log('hello' + name) console.log(event.target) } } } </script> 内联处理器方法

检测JavaScript中的箭头键按下

隐身守侯 提交于 2020-02-27 00:59:40
如何检测何时按下箭头键之一? 我用它来找出: function checkKey(e) { var event = window.event ? window.event : e; console.log(event.keyCode) } 尽管它适用于所有其他键,但不适用于箭头键(可能是因为默认情况下浏览器应该在这些键上滚动)。 #1楼 我也一直在寻找这个答案,直到我看到这篇文章。 我发现了另一个解决方案,可以根据我的问题来了解不同键的键码。 我只是想分享我的解决方案。 只需使用keyup / keydown事件将值写入控制台/使用 event.keyCode 相同的方式进行提醒。 喜欢- console.log(event.keyCode) // or alert(event.keyCode) -卢比 #2楼 再次,你需要回答 keydown 没有 keypress 。 假设您想在按下键的同时连续移动某些内容,我发现 keydown 适用于Opera以外的所有浏览器。 对于Opera, keydown 仅会触发第一次按下。 为了适应Opera的使用: document.onkeydown = checkKey; document.onkeypress = checkKey; function checkKey(e) { etc etc #3楼 可能是最恰当的表述: