在前端开发中，我们经常需要对某些事件进行监听。这样只要在指定的元素上触发了该事件，就会执行一个回调来进行相关的操作。而js中事件监听方法总共有三种，分别如下所示：element.addEventListener(type, listener[, useCapture]); // IE6~8不支持element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持element[’on’ + type] = function(){} // 所有浏览器demo:function cb() { console.log(1); } element.addEv...
JavaScript事件监听完整实例（含注释） var oEventUtil = new Object(); oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler) { //IE和FF的兼容性处理 //如果是FF if(oTarget.addEventListener){ oTarget.addEventListener(sEventType,fnHandler,false); } //如果是IE else if(oTarget.attachEvent){ oTarget.attachEvent('on'+sEventType,fnHandler); } else{ oTarget['on'+sEventType] = fnHandle...
冒泡事件 js中“冒泡事件(bubble)”并不是能实际使用的花哨技巧，它是一种对js事件执行顺序的机制，“冒泡算法”在编程里是一个经典问题，冒泡算法里面的“冒泡”应该说是交换更加准确；js里面的“冒泡事件”才是真正意义上的“冒泡”，它从DOM最低层逐层遍历树，然后附加相应事件。以下面代码为例： 冒泡事件 function Add(sText) { document.getElementById("Console").innerHTML +=sText; } 点击 [Ctrl+A 全选 注:如需引入...
1，IE使用attachEvent/detachEvent方法来添加和删除事件监听器；w3c使用addEventListener/removeEventListener方法。 2，IE对其事件使用onevent的命名方式，而w3c的是event的命名方式。 3，IE事件监听器内使用的是一个全局的Event对象，而w3c是将event对象作为参数传递给监听器。 4，为了避免触发默认的事件行为，IE的做法是要求程序员设置Event对象中的returnValue属性值为false，而w3c的做法是执行preventDefault方法。 5，IE没有...
挺炫的一个效果，百度和谷歌好像已实现好多年了，我以为在网上能轻易找到代码来实现这个效果。真正遇到这个需求，发现还真找不到。于是自己动手写这个效果，由于我是把效果整合到我的整套框架里，所以没有进行单独的封装。 需求：实现带提示的input框，类似百度搜索，有改动的时候去获取常用关键词，数据来源于系统数据库，支持鼠标选择或键盘选择 思路：框架一贯思路，通过class作为监听入口，通过data作为数据传递；通过监听inpu...
在前端开发过程中我们经常会遇到给页面元素添加事件的问题，添加事件的js方法也很多，有直接加到页面结构上的，有使用一些js事件监听的方法，由于各个浏览器对事件冒泡事件监听的机制不同，le浏览器只有事件冒泡，没有事件监听的机制，对于事件监听的兼容性问题是最大的难题： 1.直接把事件的方法写在页面结构上function eventfun(){ //console.log(this); } //这里涉及到一个this作用域的问题，eventfun再这里是一个全局函数, ...
本文实例分析了nodejs事件的监听与触发。分享给大家供大家参考。具体分析如下： 关于nodejs的事件驱动，看了《nodejs深入浅出》还是没看明白（可能写的有点深，或者自己理解能力不够好），今日在图灵社区看到一篇关于nodejs事件的监听与触发，由于给出的例子比较多人，很容易理解，所以也大致明白了nodejs事件驱动。 以下内容参考了图灵社区的文章（地址：http://www.ituring.com.cn/article/177478） 首先来了解一下nodejs的Event...
本文实例讲述了js实现滑动触屏事件监听的方法。分享给大家供大家参考。具体实现方法如下：function span_move_fun(){var span = document.getElementById("move_k");var span_left = $(span).offset().left;var span_top = $(span).offset().top;var start_left = $(span).offset().left;var start_top = $(span).offset().top;span.addEventListener('touchstart', function(event) {event.preventDefault();if (event.targetTouc...
本文实例讲述了JavaScript使用addEventListener添加事件监听用法。分享给大家供大家参考。具体实现方法如下：This text is the title of the documentfunction showalert(){alert('you clicked me!');}function clickme(){var pelement=document.getElementsByTagName('p')[0];pelement.addEventListener('click', showalert, false);}window.addEventListener('load', clickme, false);Click MeYou Can't Click Me希望本文所述对大...
本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法。分享给大家供大家参考，具体如下： 这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除，unbind(eventType,Listener), 实例：unbind(eventType,listener)$(function(){var fnMyFunc1; //函数变量$("img").bind("click",fnMyFunc1 = function(){ //赋给函数变量$("#show").append("点击事件1");}).bind("clic...
本文实例讲述了javascript事件监听与事件委托。分享给大家供大家参考，具体如下： 事件监听与事件委托 在js中，常用到element.addEventListener()来进行事件的监听。但是当页面中存在大量需要绑定事件的元素时，这种方式可能会带来性能影响。此时，我们可以用事件委托的方式来进行事件的监听。 每个事件都经历三个阶段 捕获到达目标冒泡事件委托需要用到事件的冒泡，冒泡就是事件发生时，上层会一层一层的接收这个事件。 如下页面结...
最近项目里要做一个画板，需要对键盘事件进行监听，来进行诸如撤回、重做、移动、缩放等操作，因此顺手实现了一个键盘事件监听控件，期间略有收获，整理出来，希望对大家有所帮助，更希望能获得高手的指点。 1. 自动获取焦点 似乎浏览器的键盘事件只能被那些可以获得焦点的元素设置监听，而通常需要监听事件的 <DIV>、<CANVAS> 元素都不能获得焦点，因此需要修改目标元素的某些属性使其可以获得焦点，另外一种可行的方法是将事件委...
本文实例讲述了Node.js net模块功能及事件监听用法。分享给大家供大家参考，具体如下： net模块 对比C语言的网络编程，Node.js有更加简便的开发模式与模块提供。它就是net模块 在需要使用的时候只需要require("net")就可以引入模块了。 var net = require("net");服务端编程 引入模块的前提下： 1. 创建一个新的TCP或IPC服务 var server = net.createServer(function(client_socket) {console.log("client coming"); });2. 创建con...
微信小程序实现拖拽 image 触摸事件监听的实例 需要做个浮在scroll-view之上的button.尝试了一下.实现效果图：Android中也会有类似移动控件的操作.思路差不多.获取到位移的X Y 的变量,给控件设置坐标. 1.index.wxml<image class="image-style" src="../../images/gundong.png" bindtap="ballClickEvent" style="bottom:{{ballBottom}}px;right:{{ballRight}}px;" bindtouchmove="ballMoveEvent"> </image> 简单的设置一张图片,添...
上一篇文章介绍了vuejs实现的简单分页，如果我有几个页面都需要有分页效果，不可能每个页面都去复制一下这段代码吧，意思是封装一下，变成通用的组件。 首先使用基础 Vue 构造器，创建一个“子类”,Vue.extend( options ) var barHtml = <div class="page-bar">+<ul>+<li v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>+<li v-if="cur==1"><a class="banclick">上一页</a></li>+<li v-for="index in indexs" v-b...