宝哥软件园

从头开始学习jQuery(5)jQuery事件和事件对象

编辑:宝哥软件园 来源:互联网 时间:2021-10-21

一.摘要

事件是脚本编程的灵魂。因此,这一章也是jQuery学习的重点。本文将详细解释jQuery中的事件处理和事件对象。

二.前言

是这个系列到目前为止内容最多的。这足以表明它的重要性。每个人都应该列举更多的例子。如果时间允许,我会列举尽可能多的例子。投入生产的真实例子暂时不能加到文章中,但也许最后我会列举一些作品供大家学习。另外,我的水平有限,因为我不是UI设计师。这篇文章可能有一些错误。希望你能帮我指出来。一起学习,一起进步。在技术的世界里,我们彼此没有任何利益关系。希望大家抱着互相鼓励的态度,我也会考虑回复中的激进言论,但希望大家互相尊重,保护程序员的净土!三.事件和事件对象已经在我的文章《javascript公共脚本库系列(II) :添加事件多播委托的方法》和《Javascript公共脚本库系列(III) :格式化事件对象/事件对象的详细说明》中用Javascript解释了事件和事件对象。首先,让我们看一下我们经常使用的添加事件的方式。DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML L1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML中的事件' head titlejavascript/title脚本类型=' text/JavaScript ' src=' scripts/jquery-1 . 3 . 2-vsdoc2 . js '/scriptonclick=showMsg})函数showMsg(event) { alert('!');}/script/head body div id=' testdiv 1 ' onclick=' showMsg();'click event 1/div div id=' testdiv 2 ' click event 2/div/body/html我们最常通过向元素添加onclick元素属性来添加事件。为testDiv2添加onclick事件的方法是修改Dom属性。在前一章中,我们解释了什么是元素属性。什么是Dom属性?这两种方法效果相同。当您单击div时,将显示一个提示框。请注意,虽然效果相同,但并不等同。document . getelementbyid(' testdiv 2 ')。onclick=showmsg相当于: div id=' test div 1 ' onclick=' alert '(!');'单击事件1/div,注意不同之处?我们修改元素属性和添加事件的常用方法实际上是设置一个匿名函数: document . getelementbyid(' test div 1 ')。onclick=function (event) {alert('!');};匿名函数的签名与我们手写的showMsg签名相同。因此,showMsg可以直接分配给onclick。这种方法的缺点是:1。一个事件只能绑定一个事件处理程序。使用“=”赋值将清除这次绑定的所有事件处理程序。2.从事件函数(无论是匿名的还是绑定的)获取事件对象的方式,应该在不同浏览器的:IE中特别处理。该事件是窗口对象的属性。事件处理程序必须访问事件对象: obj . onclick=function(){ var oevent=window . event;}在DOM standard中,事件对象必须作为唯一参数传递给事件处理程序: obj . onclick=function(){ var oevent=arguments[0];}除了使用参数[0]访问此参数,我们还可以指定参数名称。上面的代码相当于: obj . onclick=function(oevent){ }目前,兼容DOM的浏览器有Firefox、safari和opera。IE7等。3.添加组播委托的功能在不同的浏览器中是不同的。以下是文章《Javascript公共脚本库系列(二):添加事件组播委托的方法》中提供的为兼容多浏览器添加组播委托的方法。

更多资讯
游戏推荐
更多+