在前端开发中,我们经常需要对某些事件进行监听。这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作。而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...