event

17 事件

两盒软妹~` 提交于 2020-03-07 06:57:29
1 事件流 IE 的事件流叫做事件冒泡(event bubbling)。 如果你单击了某个按钮,他们都认为单击事件不仅仅发生在按钮上。 换句话说,在单击按钮的同时,你也单击了按钮的容器元素,甚至也单击了整个页面。 “ DOM2级事件”规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。 2 事件处理程序 事件就是用户或浏览器自身执行的某种动作。诸如 click、 load 和 mouseover,都是事件的名字。 而响应某个事件的函数就叫做事件处理程序。 事件处理程序的名字以"on"开头,因此click 事件的事件处理程序就是 onclick。 方式一: 方式二:函数方式 创建的函数中有一个局部变量 event ,也就是事件对象。 通过 event 变量,可以直接访问事件对象。 this 值 等于事件的目标元素(下面这个例子是input元素节点)。 在 HTML 中指定事件处理程序有 两个缺点 。 3 DOM 0级 删除 DOM 0 级方法指定的事件处理程序。 4 DOM 2级 上面的代码为一个按钮添加了 onclick 事件处理程序,而且该事件会在冒泡阶段被触发(因为最后一个参数是 false)。 “DOM2 级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作: addEventListener()和 removeEventListener()。 所有

js笔记19 事件对象

こ雲淡風輕ζ 提交于 2020-03-06 13:39:09
1.常用的事件    onmouseover onmouseout onmousedown onmousemove onmouseup onclick onchange onfocus onblur等等 2. 每个元素身上的事件都是天生自带的,不需要我们去定义,只需要我们给这个事件绑定一个方法,当事件触发的时候就会执行这个方法 3.事件绑定的方法   (1)div.onclick=function(){} DOM0级事件绑定   (2)div.addEventListener()或div.attachListener() DOM2级事件绑定    二者的区别     onclick是这个元素私有的属性,天生自带的,而addEventListener()是共有的属性,从EventTarget(事件源)对象上继承来的     ie低版本的attachEvent是公有的     div.onclick 存在事件冒泡机制没有捕获的机制     div.addEventListener() 可有冒泡可有捕获     div.attachEvent() 只有冒泡机制 4.div.addEventListener和div.attchEvent的区别   (1)前者有冒泡机制和捕获机制,后者只有冒泡机制   (2)事件名前者不带on后者带on   (3)前者的this指向当前元素

MessageChannel 实现worker之间的通信

一笑奈何 提交于 2020-03-06 11:49:46
https://developer.mozilla.org/zh-CN/docs/Web/API/MessageChannel node中使用 const {MessageChannel} = require('worker_threads') const channel = new MessageChannel(); const port1 = channel.port1; const port2 = channel.port2; port1.onmessage = function (event) { console.log("port1收到来自port2的数据:" + event.data); } port2.onmessage = function (event) { console.log("port2收到来自port1的数据:" + event.data); } port1.postMessage("发送给port2"); port2.postMessage("发送给port1"); // port2收到来自port1的数据:发送给port2 // port1收到来自port2的数据:发送给port1 https://developer.mozilla.org/zh-CN/docs/Web/API/Worker/postMessage

Building Web Parts for SPS读书笔记(3)-Connectable Web Parts

我与影子孤独终老i 提交于 2020-03-06 00:53:24
Building Web Parts for SPS 读书笔记 (3) -Connectable Web Parts 本篇学习如何创建 Connectable Web Parts , Part 1 简单介绍了 Web Part 包含的相关文件及其开发部署等, Part 2 介绍如何使用 ASP.NET 的 User Controls 来创建 Web Part 的外观,简化 Web Parts 的开发和测试。 1. 连接 Web 部件( Connectable Web Parts ) Web 部件基础结构为 Web 部件之间的通信提供了强大的支持。开发人员可以使用标准接口来创建可互相交换信息的 Web 部件。例如,用来实现 ICellConsumer 接口的 Web 部件可以从用来实现 ICellProvider 接口的 Web 部件接收信息。用户可以使用浏览器中的简单菜单命令将 Web 部件互相连接。 另外, Web 部件基础结构还提供了转换器,从而允许接口不完全互补的 Web 部件互相通信。 Web 部件基础结构可自动检测接口不匹配的情况并显示一个对话框,该对话框允许用户将一个接口的值映射到另一个接口。例如,如果用户将用来实现 IRowProvider 接口的 Web 部件连接到用来实现 ICellConsumer 接口的 Web 部件,就会显示一个对话框,允许用户从

Flume之实现和使用自定义Interceptor

冷暖自知 提交于 2020-03-06 00:12:49
前言 Flume Interceptor拦截器的作用在于能够在Event从Source传输到Channel过程中,修改或者删除Event的Header。多个拦截器Interceptor组成一个拦截器链,拦截器的执行顺序与配置顺序相同,上一个拦截器Interceptor处理后的Event List会传给下一个Interceptor 在Flume中自定义Interceptor时,需要实现org.apache.flume.interceptor.Interceptor接口,以及创建静态内部类去实现org.apache.flume.interceptor.Interceptor.Builder接口 更多详细内容可以参考《Flume构建高可用、可扩展的海量日志采集系统》 实现自定义Interceptor拦截器 1)根据使用场景创建Interceptor类 public class TypeInterceptor implements Interceptor { // 初始化时可以不做操作 public void initialize ( ) { // Do nothing } // 单个Event拦截 public Event intercept ( final Event event ) { // 1.获取Event中的Header Map < String , String >

低版本IE处理

↘锁芯ラ 提交于 2020-03-05 20:04:52
ie兼容处理 css兼容代码示例 csshack使用 ie的css兼容是一层层覆盖关系。 / IE6 绿色 IE7 黑色 IE8紫色 IE9橘黄 1E10灰色 / .hack{ background-color:red; /*默认*/ background-color:purple\0; /* IE8 IE9 IE10 紫色 9 10被下一条覆盖*/ background-color:orange\9\0;/*IE9 IE10 橘黄色*/ *background-color:black; /* IE6, IE7 黑色,IE6会被下一条覆盖为绿色 */ _background-color:green; /* IE6 绿色 */ } /*for IE10+ 灰色 此写法可以适配到高对比度和默认模式,故可覆盖所有ie10的模式 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .hack { background-color:#A3A0A0; } } /*Chrome Safari深红*/ @media screen and (-webkit-min-device-pixel-ratio:0){ .hack { background-color:#5A090A;} } /*除了IE6

IE8浏览器的部分兼容性问题总结

北战南征 提交于 2020-03-05 16:52:47
1. 兼容性问题的根本因素 浏览器最重要或者说核心的部分是 “Rendering Engine” ,可大概译为 “ 渲染引擎 ” ,所谓的浏览器内核也就是浏览器所采用的 渲染引擎 ,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。 前段时间进行了前端网页的 bug 修改,发现多数的 bug 均发生在 IE8 浏览器上,经过查证发现: IE8 的 JavaScript 引擎是 Jscript , IE9 开始用 Chakra ,这两个版本区别很大,这就造成了 IE8 对于个别属性、方法的不支持或是显示效果上的差异,这里是我遇到的一些 IE8 上比较典型的兼容性问题及其解决办法。 2. indexOf 1 2 2.1 问题 前端代码中有多处地方使用 javascript 数组的 indexOf 方法,用于查询某数组中是否存在某元素,然而测试,在 IE8 不支持数组元素的 indexOf ()方法。如下 var location = ['1','2','3']; var serverData = [‘1’ , ’4’, ‘5’]; for( var i = 0; i < serverData.length;

benchmarkjs 测试函数性能

三世轮回 提交于 2020-03-05 12:39:42
https://github.com/bestiejs/benchmark.js 安装 npm i --save benchmark 官方例子 var Benchmark = require('benchmark'); var suite = new Benchmark.Suite; // add tests suite .add('RegExp#test', function () { /o/.test('Hello World!'); }) .add('String#indexOf', function () { 'Hello World!'.indexOf('o') > -1; }) // add listeners .on('cycle', function (event) { console.log('event', event) console.log(String(event.target)); }) .on('complete', function () { console.log('this', this) console.log('Fastest is ' + this.filter('fastest').map('name')); }) // run async .run({'async': true}); // logs: // => RegExp#test

前端知识点回顾之重点篇——AJAX

可紊 提交于 2020-03-05 03:26:39
Ajax(Asynchronous JavaScript and XML) 这种技术就是无须刷新页面即可从服务器中取得数据,但不一定是XML数据。在原生方法上,Ajax技术的核心是XMLHttpRequest对象(简称XHR)。 XHR用法 open(method, url, isAsync) 开启一个method类型的请求,url是相对于当前页面(也可以是绝对路径),open方法并不会真正发送请求,而只是启动一个请求已备发送。 send(data) 接收作为请求主体发送的数据,如果不需要必须传入null,因为这个参数对有些浏览器是必要的。调用send后请求就会被分派到服务器。 XHR的属性 在发送请求收到响应后,响应的数据会自动填充XHR对象的属性: responseText:作为响应主体被返回的文本 responseXML:如果响应的内容类型是”text/xml“或”application/xml“,这个属性中将保存包含着相应数据的XML DOM文档。 status:响应的HTTP状态 statusText:HTTP状态的说明 readyState:表示请求/响应过程中的当前活动阶段,只要这个值发生变化都会触发一次readystatechange事件,因此可以利用这个事件监听异步请求后的响应结果是否可用。(=0表示尚未调用open;=1表示已调用open但没调用send;