jQuery学习---------认识事件处理

3种事件模型:

原始事件模型

DOM事件模型

IE事件模型

原始事件模型(0级事件模型)

1、事件处理程序被定义为函数实例,然后绑定到DOM元素事件对象上,实现事件的注册。

例子:var btn = document.getElementsByTagName("input")[0];

btn.onclick = function(){

函数体....

}

2、也可以把特定的事件处理函数的函数体直接赋给DOM元素的事件属性

例子:<input type="button" onclick="alert(‘hello‘)"

0级事件模型的优缺点:

优点:使用方便

缺点:元素属性被用来存储事件处理函数的引用,

所以每个元素的每个事件只能注册一个事件处理程序。

DOM事件模型:

1、注册事件

addEventListener()方法:

语法:addEventListener("type",function,useCapture)

参数:type:是要绑定的事件类型,但是这里没有“on”前缀。

如onclick事件应写作:click

function:事件处理函数,自带一个默认参数,引用event对象

usrCapture:是一个布尔值,

为true时:在事件传播的捕捉阶段触发响应;

为false时:在事件传播的冒泡阶段触发响应

例子:var btn = document.getElementsByTagName("input")[0];

btn.addEventListener("click",function(){

btn.value = event.type;

},true)

2、事件传播

DOM 2级事件模型中,一旦事件被触发,事件流首先从DOM树的顶部(文档节点#document)向下传播,直到目标节点,然后再从目标节点向上传播到DOM树顶。

从上到下的过程被称为捕获阶段,

从下到上的过程被称为冒泡阶段。

终止事件流的冒泡:stopPropagegation()方法

例子:var btn = document.getElementsByTagName("input")[0];

do{

btn.addEventListener("click",function(){

div.innerHTML += " "+this.nodeName+" ";

},true)

btn = btn.parentNode;

}while(btn);

上例中,第三个参数设置为true,注册的是捕获型事件。

所以点击按钮,事件触发顺序为:#document->html->body->button

如果,第三个参数设置为false,注册的是冒泡型事件。

所以点击按钮,事件的触发顺序为:button->body->html->#document

3、销毁事件

removeEventListener()方法:

注意:removeEventListener()和addEventListener()的第三个参数要保持一致

否则销毁操作是无效的。

IE事件模型:

1、注册事件:

attachEvent()方法:

语法:attachEvent("type",function)

参数:type:元素事件类型,如:onclick

function:事件处理函数

注意:IE时间模型中,事件处理函数中的this指针总是指向window对象,

0型事件模型中,事件处理函数中的this指针总是指向当前注册事件的对象

2、事件传播:

IE事件模型:事件流总是从目标对象向上传递知道树顶,即冒泡型。

终止事件流的冒泡:设置event对象的cancelBubble属性

3、注销事件:

detachEvent()方法

事件处理机制:

Event对象:

当触发事件时,浏览器会自动创建一个event对象,

event对象实际上是Event类型的实例,

默认状态下他会被作为参数传递给事件处理函数

实现访问的兼容性:

var event = event||window.event;

注意:IE和DOM标准浏览器返回的event对象的属性和方法存在差异!!!

jQuery学习---------认识事件处理

时间: 2024-08-16 10:56:33

jQuery学习---------认识事件处理的相关文章

jQuery学习之开篇

吐槽 最近比较烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,如果没有掌握JS.JQuery想要进行后续的开发会非常困难.得,又得学下JQuery,一种蛋蛋的忧伤.一直认为前端的水非常的深这段时间算是见识到了,哎,不过工作还的继续,吐槽完了,卯足干劲充电吧! 前言 某前端白痴一个,会点html+css+js.JQuery的学习书籍看的是<锋利的JQuery>,先入门看了两章,感觉

JQuery学习笔记(1)

JQuery学习笔记(1) 认识JQuery 简介 JQuery是一个JavaScript库,语法简洁,有跨平台的兼容性,简化了开发人员遍历html文档.操作dom.处理事件.执行动画和开发Ajax的操作.理念是:写得少,做得多. 优点 1.轻量级.UglifyJS压缩后大小保持在30KB 2.选择器强大. 3.DOM操作封装. 4.可靠地事件处理机制. 5.完善的Ajax. 库类型 jquery.js(开发版) 约229kb,用于学习和开发. jquery.min.js(生产版) 约31kb,

jquery学习之AJAX

1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与server交换数据并更新部分网页的艺术,在不又一次载入整个页面的情况下. 2,什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步

jQuery学习之路(1)-选择器

▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优

jQuery 学习笔记

jQuery 学习笔记 position()是相对父元素的,有top.left两个属性. offset()是相对于document的当前坐标. offsetParent()是获取离元素最近的有定位的父元素. .closet() 获取最近的匹配选择器的父元素. off()移除一个事件处理函数,要删除委托事件需提供对应的选择器. detch()和remove()一样,但是不会移除绑定数据,以便以后添加.empty()是清空该元素的所有子元素.

jquery 学习第一课之start

1.$选取符 ( $ == jQuery ) (1) $("div").addClass("special");选取本页面中的所有<div>元素,然后将这些div加上都加上一个名为“special”的CSS样式. (2)$("div")选取所有的div元素. (3)$(“#body”)选取id为body的元素. (4)$("div #body")选取id为body的<div>. (5)$("d

好程序员web前端学习路线分享jQuery学习技巧

好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! 1.关于页面元素的引用 通过jquery的$引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jquery学习(一)

简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 首先一定要注意的是引入的路径 按照案例写一个简单的DEMO <%@ page language="java" contentType="text/html; charset=UT