JS中的事件机制

1、事件的触发和传播

事件被用户输入系统触发,并按照DOM依次向上传播。这是两种行为,浏览器提供了两种方式来控制,即preventDefault(取消事件触发)、stopPropagation(取消事件传播)。所以jQuery对两种行为的控制是分开的,具体如下图。

2、自定义事件

JS中事件分两种类型,浏览器定义的基本事件类型,譬如click,blur,change,mouseover等,还支持用户自定义事件类型。

事件可以用户自定义,自定义事件通过绑定自定义事件到DOM元素和触发DOM上的自定义事件两部,Jquery的做法如下:

使用bind绑定自定义事件名,并附加上处理函数,提供页面入口,供用户触发,而后系统使用trigger触发事件。

3、Jquery的.bind()事件处理方法,现今bind方法已弃用,鼓励使用on()

bind方法提供了几种基本能力

1、在某一个元素上绑定一个或多个事件,并提供各自的处理函数

2、支持传入事件数据和事件对象

3、对双击事件的处理,需要依赖于用户的操作系统和浏览器,用户可以配置双击间隔频率,浏览器的识别不一

为元素绑定多个事件,并提供各自的事件处理函数,this为元素对象

支持事件和事件数据的传入,用户传入的数据,默认挂载在event.data属性上,事件的处理函数,默认接收一个事件对象作为参数。bind对象可以接收三个参数,接收三个参数时,第一个是事件类型,第二个是事件数据,第三方是数据处理函数。由于是事件处理函数,处理事件,事件数据要被事件函数在闭包里使用,所以数据数据的传递最好使用三个参数的bind方法,如果闭包中直接使用外部数据,他使用的是数据变更后的,最后数据,不能使用变更过程中的数据。通过bind第二个参数参数,他使用的是变量的数据副本,这样变量怎么赋值都不影响他当时接收的值。如下:

以上两个弹出的message均为Not in the face

各自使用,变量变化过程中的数据。

4、jQquery提供的事件方法,都有两种触发方法,一种是绑定的HTML标签自动触发,也可以通过调用trigger方法手动去触发。

一般带参数的事件方法是绑定方法,不带参数的方法是触发方法,触发也可以通过trigger事件触发,即 $(‘#tData‘).trigger(‘contextmenu‘);

5、jQuery使用on()代替bind()向DOM元素之上绑定事件,off()和on()对应,用于解绑绑定到DOM元素上的事件。

原文地址:https://www.cnblogs.com/hengwu/p/9689403.html

时间: 2024-10-12 03:46:04

JS中的事件机制的相关文章

再次讲解js中的回收机制是怎么一回事。

在前几天的一篇闭包文章中我们简单的介绍了一下闭包,但是并没有深入的讲解,因为闭包涉及的知识点比较多,为了能够更好的理解闭包,今天讲解一下关于js中的回收机制. 在初识闭包一文中我说过js中有回收机制这么一回事,让我们一起回顾一下,并且深入的了解js中的回收机制到底是怎么一回事. function a(){ var num = 10; return function(){ num ++; console.log(num); } } a()(); //11 a()(); //11 按理说第二次执行函

Node.js入门:事件机制

Evented I/O for V8 JavaScript 基于V8引擎实现的事件驱动IO. 事件机制的实现 Node.js中大部分的模块,都继承自Event模块(http://nodejs.org/docs/latest/api/events.html ).Event模块(events.EventEmitter)是一个简单的事件监听器模式的实现.具有addListener/on,once,removeListener,removeAllListeners,emit等基本的事件监听模式的方法实现

看懂此文,不再困惑于 JS 中的事件设计

看懂此文,不再困惑于 JS 中的事件设计 今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一字节:爽. 作者:aitangyong 链接:blog.csdn.net/aitangyong/article/details/43231111 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 javascript给DOM绑定事件

jQuery中的事件机制深入浅出

昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScript中调用是原生的函数方法,而jQuery中调用的绑定的是jQuery中的对象方法,那么在昨天的第一篇中,我们已经说过了jQuery对象和DOM对象之间的转换,至于其中的转换的原理,我们就需要去分析一下jQuery中的源码了,这个我们在源码分析中再去做讨论, 首先呢,我们先来看一下,jQuery中

关于js中的回收机制,通俗版

在前面的几篇文章中,我讲解过了js中的回收机制,但是对于当时的我来说,我自己对回收机制的这个概念也有些懵懵懂懂,现在对回收机制有了更深入的理解,所以特此发布此文给于总结,也好加深记忆. 如果你想学习闭包那么js中的回收机制是必不可少的,当然学习闭包除了需要理解js中的回收机制以外还需要了解其他的概念,我的其他文章有相关的说明,这里不做闭包的讲解. 为什么要有回收机制?why? 打个比方,我有一个内存卡,这个内存是8G的,我把文件,视频,音乐,都保存到了这个内存卡,随着我的储存的内容越来越多,这个

js中的事件,内置对象,正则表达式

[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按下去触发 keypress: 键盘按下并松开的瞬间触发 keyup: 键盘抬起时触发 [注意事项:(了解)] ① 执行顺序: keydown--keypress--keyup ② 长按时,会循环不断的执行keydown-keypress ③ 有keydown事件,不一定有keyup事件(事件触发过程

js中鼠标事件总结

js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblclick,所有的这些事件都包含有一个事件对象event,当然在IE低版本下,event对象是挂在window底下的.这个我们另行讨论. 1.通过html添加事件 <input type="button" click="alert(1)"/> 2.通过DOM0级方式添加事件 <input type="button"

Flex中利用事件机制进行主程序与子窗体间参数传递

在开发具有子窗体,或者itemrenderer的应用时,常常涉及到子窗体向父窗体传递参数或者从itemrenderer内的控件向外部的主程序传递参数的需求.这些都可以通过事件机制这一统一方法加以解决.在我的应用中有两个需求: 1.左侧的List控件的itemrenderer中包含CheckBox控件,当其状态改变时需要同时改变主程序中的一个数组变量的内容:2.左下方的"新增届次"按钮会弹出一个窗口,窗口中输入届次信息后需要修改数据库中的表,同时表的更改结果要能够在List控件中体现出来

从零开始的JS生活(二)——BOM、DOM与JS中的事件

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM