event | 易学教程

自定义事件的触发dispatchEvent

阅读更多关于自定义事件的触发dispatchEvent

一、element.dispatchEvent() 对于标准浏览器，其提供了可供元素触发自定义事件的方法： element.dispatchEvent() .。不过，在使用该方法之前，我们还需要做其他两件事，即创建和初始化。 document.createEvent() event.initEvent() element.dispatchEvent() 举个例子： var dom = document.querySelector('#id') document.addEventListener('alert', function (event) { console.log(event) }, false); // 创建 var evt = document.createEvent("HTMLEvents"); // 初始化 evt.initEvent("alert", false, false); // 触发, 即弹出文字 dom.dispatchEvent(evt); 1、createEvent() createEvent() 方法返回新创建的Event对象，支持一个参数，表示事件类型，具体见下表：参数事件接口初始化方法 HTMLEvents HTMLEvent initEvent() MouseEvents MouseEvent initMouseEvent()

【JavaScript】DOM之事件

阅读更多关于【JavaScript】DOM之事件

DOM 事件 1.事件是什么让JS知道程序用户行为，比如用户点击HTML页面中的某个按钮和用户输入用户名与密码等操作 <script> var button = document.getElementById('btn'); // 获取按钮元素 button.onclick = function () { // 事件绑定 console.log('你已点了我'); } </script> 2.注册事件 JS函数与指定事件相关联，被绑定函数成为事件的句柄事件被激发时，会绑定函数会被调用 HTML元素的事件属性表示实注册事件功能该方式并没有与HTML结构与行为有效的分离 <body> <button onclick="mylove()" id="btn">按钮</button> <script> function mylove() { console.log('你已点了我'); } </script> </body> DOM对象的事件属性将Document对象定位在THML页面元素并返回DOM对象体属性，通过它实现各种注册事件功能 <body> <button id="btn">按钮</button> <script> var btn = document.getElementById('btn'); btn.onclick = mylove; function

《JS高程》-教你如何写出可维护的代码

阅读更多关于《JS高程》-教你如何写出可维护的代码

1、前言在平时工作开发中，大部分开发人员都花费大量的时间在维护其他人员的代码。很难从头开始开发新代码，很多情况下都是以他人成果为基础的，或者新增修改需求，自己写的代码也会被其他开发人员调用，所以写好一份高质量可维护的代码就显得十分重要。 2、什么是可维护代码可维护代码需要遵循以下几个特点。 1. 可理解性 -其他人可以接手代码并理解它的意图和一般途径。 2. 直观性 -代码中的东西一看就明白，不管其操作过程有多复杂。 3. 可适应性 -代码以一种数据变化不要求完全重写的方法撰写。 4. 可扩展性 -在代码架构上已考虑在未来允许对核心功能进行扩展。 5. 可调试性 -当有地方出错时，代码可以给你足够的信息快速直接找出问题的所在。 3、代码约定一种让代码变得可维护的简单途径是形成一套JavaScript代码的书写约定。由于JavaScript的可适应性，代码约定对它很重要。以下小节讨论代码约定的概论。 1.可读性要让代码可维护，首先它必须可读。可读性的大部分内容和代码缩进相关的，代码整齐的缩进能一眼看出代码块是属于那个功能的，很常见的缩进大小为4个空格，现在大部分编辑器也支持一件格式化代码。可读性另一方面是注释，一般来说，有如下一些地方需要进行注释。函数和方法 -每个方法或注释都应该包含一个注释，用于描述其目的和用于完成任务所可能使用的算法。大段代码

实现JS复制、粘贴，Chrome/Firefox下可用

阅读更多关于实现JS复制、粘贴，Chrome/Firefox下可用

背景：最近一直在做一个Web Excel项目，其中一项功能一直很纠结，就是数据的复制粘贴功能。功能要求：可以把Web端数据粘贴到Excel中，也可以从Excel中直接粘贴数据到页面编辑器中。支持Button粘贴和Ctrl+C/Ctrl+V快捷键复制粘贴。本以为这个功能会很简单，但是查了很多资料，用JS操作粘贴板IE下很好用，直接支持一个window.clipboardData对象，通过这个对象可以访问到粘贴板中内容。但是chrome和firefox支持不是很好。Chrome和firefox为什么不支持有点难以理解，为了保护系统，免受外来侵害？在网上搜了很多资料，但是大部分资料都是介绍在IE下使用window.clipboardData对象访问粘贴板实现Copy和paste，但是单独只为IE开发一个复制、粘贴功能，非常不实用；当然网上还有其他方法，比如通过Flash的间接方式操作OS粘贴板，虽然有这类插件，但是也很不好用，只能用户点击复制按钮才行，而且也不灵活。后来想了想，很多页面都是禁止copy的，那么通过浏览器事件，是不是可以访问到粘贴板？查了下资料，IE/Chrome/Firefox都支持oncopy/onpaste/oncut事件，虽然不是在所有元素上都支持。但是这里通过事件的event应该可以访问到用户复制了什么内容，并修改Data。动手实验了下，通过console

微信小程序中的事件

阅读更多关于微信小程序中的事件

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。从基础库版本2.4.4开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。 dataset 在组件节点中可以附加一些自定义数据。这样，在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理。在 WXML 中，这些自定义数据以 data- 开头，多个单词由连字符 - 连接。这种写法中，连字符写法会转换成驼峰写法，而大写字符会自动转成小写字符。 mark 在基础库版本 2.7.1 以上，可以使用 mark 来识别具体触发事件的 target 节点。此外， mark 还可以用于承载一些自定义数据（类似于 dataset ）。当事件触发时，事件冒泡路径上所有的 mark 会被合并，并返回给事件回调函数。（即使事件不是冒泡事件，也会 mark 。） dataset 和 mark 的区别： mark 和 dataset 很相似，主要区别在于： mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值。细节注意事项：

超浓缩双向绑定

阅读更多关于超浓缩双向绑定

Object.prototype.bind = function (key, obj, prop, event) { var that = this if (this[key] == undefined) this[key] = ''; var bc = undefined; if (!this.__bc__) { this.__bc__ = {}; Object.defineProperty(this, "__bc__", { enumerable: false }); } if (!this.__bc__[key]) { this.__bc__[key] = []; this.__bc__[key].value = this[key] bc = this.__bc__[key]; Object.defineProperty(this, key, { get: function () { return bc.value }, set: function (value) { if (bc.value == value) return; bc.forEach(function (l) { l(value); }) bc.value = value } }) } bc = this.__bc__[key]; if (prop == undefined) prop = "value";

使用JS监听键盘按下事件（keydown event）

阅读更多关于使用JS监听键盘按下事件（keydown event）

1、监听全局键盘按下事件，例如监听全局回车事件 $(document).keydown(function(event){ if(event.keyCode == 13){ alert('你按下了Enter'); } }); 2、监听某个组件键盘按下事件，例如监听id为btn的button组件的回车按下事件 $("#btn").keydown(function(event){ if(event.keyCode==13){ alert('你按下了Enter'); } }); 3、如果是要监听组合键，例如监听ctrl+c $(document).keyup(function(event){ 　　if(event.ctrlKey && event.keyCode==67){ 　　　　alert('你按下了CTRL+C') 　　} }); 4、详细keyCode值列表原文链接： https://www.cnblogs.com/pangpanghuan/p/6423204.html 来源： https://www.cnblogs.com/gyt79082/p/11810336.html

js 默认事件取消

阅读更多关于 js 默认事件取消

防止事件捕获和冒泡　　　　：子类的事件会会发父类相同类型的事件，　　　　　　 w3c 标准 window.event.stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。　　　　　　IE则是使用window.event..cancelBubble = true 　　2.阻止默认事件（a标签的跳转，，type=submit 提交当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。）　　　　 w3c的方法是 window.event. preventDefault()，　　　　IE则是使用 window.event. .returnValue = false; 　　　　3.jQuery用法　　　　阻止默认事件 return false 不停止冒泡　　　　　　 <a href="http://www.baidu.com" onclick="return false">llll</a> 　　　　 jQuery 　return false; 阻止默认事件和事件冒泡　　　 $("#testC").on('click',function(){ 　　　　　　return false; 　　　 }); 来源：

HTML5 拖放（Drag 和 Drop）

阅读更多关于 HTML5 拖放（Drag 和 Drop）

拖放（Drag 和 drop）是 HTML5 标准的组成部分。将 RUNOOB.COM 图标拖动到矩形框中。拖放拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。注意: Safari 5.1.2不支持拖动. HTML5 拖放实例下面的例子是一个简单的拖放实例：实例 < ! DOCTYPE HTML > < html > < head > < meta charset = " utf-8 " > < title > 菜鸟教程(runoob.com) </ title > < style type = " text/css " > #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </ style > < script > function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) {

一个开源组件 bug 引发的分析

阅读更多关于一个开源组件 bug 引发的分析

这是一个悲伤的故事。某日清晨，距离版本转测还剩一天，切图仔的我正按照计划有条不紊的画页面。当我点击一个下拉弹框组件中分页组件页数过多而出现的向后 5 页省略号时，悲剧开始了，弹框被收回了。情景再现问题问题的表象很简单，使用的是组件库的下拉弹窗组件，在组件中使用到了分页组件，当点击分页组件的向后 5 页快速跳转时，弹窗被收回了。我们的预期是能够继续操作的，只有点击弹框外部时，弹窗才会被收回。分析发现这个问题我做了如下分析：确定这是一个问题再次重复操作问题，确定问题出现的条件，能够在特定条件下复现的问题才是问题。我稳定的复现了问题条件是：分页组件出现向前跳转 5 页或向后跳转 5 页，点击到不会再出现向前跳转 5 页或向后跳转 5 页这样的快速跳转后，弹框会被收回。确定是自己组件配置使用问题还是组件本身 bug 我在组件的文档中并没有看到有关这个问题的特别说明。接着我又在官方提供的代码运行环境中，写了一个使用的 demo（实际项目中的代码复杂度较高，可能存在被其他样式等因素影响而产生问题，使用功能单一的 demo 有助于我们快速确定问题范围，且官方运行环境一般使用的是其最新的组件版本），发现与我在项目中使用存在同样问题。到这里可以排除是组件配置使用，组件库版本不是最新，及项目环境影响导致的问题。在组件库的开源项目中查询 issue 在 issue

订阅 event