JS的事件汇总

【JS的事件汇总】的更多相关文章

一.前言事件的绑定触发有很多种方法,我们如何选择呢? 很多时候,我们会使用鼠标事件,但是鼠标事件只能在PC设备上使用,当我们需要对不同设备兼容时怎么办呢? 二.正文 1. 事件的几个概念: 事件流:描述的是在页面中接受事件的顺序: 事件冒泡:由最具体的元素接收(当前节点),然后逐级向上传播至最不具体的元素的节点(文档): 事件捕获:最不具体的节点先接收事件,而最具体的节点应该是最后接收事件.(文档-->body-->...-->具体的节点). <!DOCTYPE html>…

js默认事件汇总

默认事件就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为.比如在a标签href属性上的跳转,右键呼出的菜单等等.我们可以通过js取消或更改这些默认事件. 取消默认事件默认事件都是定义在DOM元素相应的事件类型上的,我们只需要知道产生默认事件的是哪个元素,这个事件是什么类型的,就可以阻止或修改它.实现方式就是注册相应的事件处理函数,在其中通过如下API阻止默认事件的发生. event.preventDefault() : 阻止默认行为 (IE9以下)event.returnVa…

js进阶 12 jquery事件汇总

js进阶 12 jquery事件汇总一.常用事件页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事件 dblclick() 当双击元素时,会发生 dblclick 事件. mousedown()/mouseup() 鼠标的按下和松开事件 mouseover()/mouseout() 鼠标的移入和移出事件 mouseenter()/mouseleave() 鼠标的移入和移出事件 mouseout(…

理解Node.js的事件轮询

前言总括 : 原文地址:理解Node.js的事件轮询 Node小应用:Node-sample 智者阅读群书,亦阅历人生正文 Node.js的两个基本概念 Node.js的第一个基本概念就是I/O操作开销是巨大的: 所以,当前变成技术中最大的浪费来自于等待I/O操作的完成.有几种方法可以解决性能的影响: 同步方式:按次序一个一个的处理请求.利:简单:弊:任何一个请求都可以阻塞其他所有请求. 开启新进程:每个请求都开启一个新进程.利:简单:弊:大量的链接意味着大量的进程. 开启新线程:每个请求都…

[转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 1. <audio id="media" src="http://www.abc.com/test.mp3" controls></audio> <video>标签属性: src…

探讨Js的事件的冒泡阶段

近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢? 从概念上来说,事件的捕获就是从最外层也就是从html标签开始向内一层层的寻找目标元素,直到捕获到目标为止.而事件的冒泡就是从目标开始,向上一层层的冒泡,直到最上一级为止. 单从概论上来说,可能不是那么的清楚,所以我们直接上代码. <div id="div1"> <di…

HTML5 Audio/Video 标签,属性,方法,事件汇总

HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 <audioid="media"src="http://www.abc.com/test.mp3"controls></audio> <video> 标…

浅谈js的事件冒泡机制

很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document这个根节点这里. 这里就有一个小细节,dom点击后,它所有的父级都会触发事件,每一级绑定的事件都会触发,这样是耗费事件和性能进行处理的,但是,如果我们把事件都绑定到document根节点,这样只需要在最后一级的时候,区别是那个dom触发的就行了,这个也叫事件委托. 其实这个场景适用于,子节点和众多父…

js键盘事件全面控制详解

js键盘事件全面控制主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结第一部分:浏览器的按键事件用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较…

Js 冒泡事件阻止

Js 冒泡事件阻止 1. 事件目标现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览器实现 .jQuery对这个事件对象进行了必要的扩展,从而在任何浏览器中都能够使用这个属性.通过.target,可以确定DOM中首先接收到事件的元素(即实际被单击的元素).而且,我们知道this引用的是处理事件的DOM元素,所以可以编写下列代码:$(document).ready(function(…

js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

js event 事件兼容浏览器 ie不需要 event参数 firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">…

JS通用事件监听函数

JS通用事件监听函数版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var oldOnload=window.onload; if(typeof window.onload !='function'){ window.onload=fn; }else{ window.onload=function (){ oldOnload(); fn(); } } },//添加事假 add…

js键盘事件全面控制

js键盘事件全面控制主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结第一部分:浏览器的按键事件用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层…

js键盘事件全面控制详解【转】

js键盘事件全面控制主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结第一部分:浏览器的按键事件用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层…

js 鼠标事件的抓取代码

js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> <title>鼠标事件的抓取--www.jbxue.com</title> <script language="JavaScript"> // 鼠标事件的抓取 function mouseCapture(){ ele.setCapture(); } //…

js Touch事件（向左滑动，后退）

js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev){ if(ev.touches.length==1){ switch(ev.type){ case 'touchstart': if(console) console.log('Touch start('+ev.touches[0].clientX+', '+ev.touches[0].client…

数据可视化的优秀入门书籍有哪些,D3.js 学习资源汇总

习·D3.js 学习资源汇总除了D3.js自身以外,许多可视化工具包都是基于D3开发的,所以对D3的学习就显得很重要了,当然如果已经有了Javascript的经验,学起来也会不费力些. Github主页:https://github.com/mbostock/d3/wiki 包括D3简介,案例,教程和公开课,以及之前提到的API参考等. Github教程页面:https://github.com/mbostock/d3/wiki/Tutorials -·-·-·-·-·-其他:-·-·-·-·…

js自定义事件、DOM/伪DOM自定义事件

一.说明.引言我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木有?则RSS或盗版)然后撤了. 事件是个大课题,真要从断奶开始讲起的话,可以写个12期的连载.关于JS事件的文章(类似DOM/BOM事件模型,IE与其他浏览器事件差异,DOM1/DOM2事件定义等)落叶般随处可见.熟豆子反复炒一点意思都没有,因此,这里谈谈自己感兴趣的自定义事件以及周边. 所谓自定义…

js 触摸事件

js触摸事件应用在移动端 webkit内核都支持. 触摸事件api https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html 事件: 1.touchstart: // 手指放到屏幕上的时候触发 2.touchmove: // 手指在屏幕上移动的时候触发 3.touchend: // 手指从屏幕上拿起的时候触发 4touchcancel: // 没测试过 .系统取消touch事件的时候…

JS基础——事件绑定

上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理VB VS JS Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click MsgBox("helo!") MsgBox(sender.width) '弹出触发这个事件对象的宽度 Msg…

js的事件循环绑定和jQuery的隐式迭代

js的事件循环绑定和jQuery的隐式迭代 js事件循环绑定 jQuery隐式迭代先举一个例子:给定一个ul,点击列表内的每一个li元素,使它的背景色变红,下边分别用js代码和jQuery实现. <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> </ul> js事件循环绑定 var lis = docume…

【功能代码】---5 JS通过事件隐藏显示元素

JS通过事件隐藏显示元素在开发中,很多时候我们需要点击事件,才显示隐藏元素.那如何做到页面刚开始就把标签隐藏. 有两种方法: (1) display:none <div id="id" style="display:none"><div> (2)hidden <input type="hidden" id="his" value="haha"&g…

JS中事件绑定的三种方式

以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upload" onclick="upload_file();"> 原文: http://www.w3school.com.cn/jsref/jsref_events.asp 2. jQuery .on() $(node).on("change", f…

js原生事件

js原生事件封装 // 事件处理对象 var EventUtil = { // 添加事件监听 add: function(element, type, callback){ if(element.addEventListener){ element.addEventListener(type, callback, false); } else if(element.attachEvent){ element.attachEvent('on' + type, callback); } else {…