jQuery 处理页面的事件详解


Posted in Javascript onJanuary 20, 2015

在之前dom操作中提到了javascript对事件处理的介绍。由于不同浏览器处理事件各不相相同,这给开发者带来了不必要的麻烦,jQuery的方便的解决了这个方面的麻烦。

1.绑定事件监听

(https://3water.com/article/60096.htm)对事件的监听做了详细的介绍,看到了iE和DOM标准浏览器对待事件监听的区别,并对多个监听事件执行顺序和方式也不相同。

在jQuery中,通过bind()对事件绑定,相当于IE浏览器的attachEvent()和标准DOM的addEventListener()。如下例子:

<script type="text/javascript">

            $(function() {

                $("img")

                    .bind("click", function() {

                        $("#show").append("<div>点击事件1</div>");

                    })

                    .bind("click", function() {

                        $("#show").append("<div>点击事件2</div>");

                    })

                    .bind("click", function() {

                        $("#show").append("<div>点击事件3</div>");

                    });

            });

        </script>
        <img src="11.jpg">

        <div id="show"></div>

以上代码对img绑定了三个click监听事件.

bind()通用语法为

bind(eventType,[data],Listener)
其中,eventType为事件的类型,可以是blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown/keypress/keyup/error

data为可选参数,用来传递一些特殊的数据供监听函数使用。而listener为事件监听函数,上面的例子中使用匿名函数

对于多个事件类型,如果希望使用同一个监听函数,可以同事添加在eventType中,事件之间使用空格分离。

$(function() {

                $("p").bind("mouseenter mouseleave", function() {

                    $(this).toggleClass("over")

                })

            });

另外一些特殊的事件类型可以直接利用事件名称作为绑定函数,接受参数为监听函数。例如之前反复使用的

$("p").click(function(){

                //添加click事件监听函数

            })

其中,通用语法为

eventTypeName(fn)
可以使用的eventTypeName包括

blur/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/
keydown/keypress/keyup/error等

除了bind()外,jQuery还提供了一个很实用的one()方法来绑定事件。该方法绑定回见出发了一次后就会自动删除,不再生效。

     //首先创建10个<div>块

            for (var i = 0; i < 10; i++)

                $(document.body).append($("<div>Click<br>Me!</div>"));

            var iCounter = 1;

             //每个都用one添加click事件

            $("div").one("click", function() {

                $(this).css({

                    background: "#8f0000",

                    color: "#FFFFFF"

                }).html("Clicked!<br>" + (iCounter++));

            });

例如上例,创建10个div,给每个div绑定一个函数事件,当点击div块时,函数执行一次便不再执行。

2.移除事件监听

jQuery采用unbind()来移除事件,该方法可以接受两个可选函数,也可不设置任何参数,例如下面的代码表示移除div标记的所有事件和P标记的所有click事件。

$("p").unbind("click");

            $("div").unbind();

 如果希望移除某个指定的事件,则必须使用unbind(eventType,listener)方法的第二个参数,例如:

var myFunc = function() {

                //监听函数体

            };

            $("p").bind("click",myFunc);

            $("p").unbind("click",myFunc);

例如以下代码

<script type="text/javascript">

            $(function() {

                var fnMyFunc1; //函数变量

                $("img")

                    .bind("click", fnMyFunc1 = function() { //赋给函数变量

                        $("#show").append("<div>点击事件1</div>");

                    })

                    .bind("click", function() {

                        $("#show").append("<div>点击事件2</div>");

                    })

                    .bind("click", function() {

                        $("#show").append("<div>点击事件3</div>");

                    });

                $("input[type=button]").click(function() {

                    $("img").unbind("click", fnMyFunc1); //移除事件监听myFunc1

                });

            });

        </script>

        

        <img src="11.jpg">

        <input type="button" value="移除事件1">

        <div id="show"></div>

例如以上代码,添加了fnMyFunc1函数bind()绑定时将匿名函数赋值给他,从而作为unbind()函数调用名称。

3.传递事件对象。

https://3water.com/article/60096.htm介绍了对象的概念,并且分析了事件对象常用的属性和方法,可以看到事件对象在不同的浏览器之间存在很多区别,jQuery中没时间对象是通过唯一的方法传递给事件监听函数的。

<script type="text/javascript">

            $(function() {

                $("p").bind("click", function(e) { //传递事件对象e

                    var sPosPage = "(" + e.pageX + "," + e.pageY + ")";

                    var sPosScreen = "(" + e.screenX + "," + e.screenY + ")";

                    $("span").html("<br>Page: " + sPosPage + "<br>Screen: " + sPosScreen);

                });

            });

        </script>

        <p>点击此处</p>

        <span id=""></span>

以上的代码给p绑定了鼠标click事件监听函数,并将事件对象作为参数传递,从而获取了鼠标事件触发点的坐标值。

对于事件的属性和方法,jQuery最重要的工作就是替开发者解决了兼容性问题,常用的属性和方法

属性 说明
altKey 按下alt键为ture,否则为false
ctrlKey 按下ctrl键为ture,否则为false
shiftKey 按下shift键为ture,否则为false
keyCode 对于keyup和keydown事件,返回按键的值(即a和A的值是一样的,都是65)
pageX,pageY 鼠标在客户端的位置,不包括工具栏,滚动条等
relateTarget 
鼠标事件中,鼠标指针进入或离开元素。

screenX,screenY 鼠标在整个屏幕的位置。
target 引起事件的元素/对象
type 事件的名称,如click,mouseover等
which 键盘事件中为按键的unicode值,鼠标按键中代表鼠标按键(1左键 2中键 3为右键)
stopPropagation() 阻止事件向上冒泡。
preventDefault() 阻止事件默认行为

以上即是本文的全部内容了,讲解的非常详细,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jquery轮播的实现方式 附完整实例
Jul 28 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
jquery实现Ajax请求的几种常见方式总结
May 28 jQuery
openlayers4.6.5实现距离量测和面积量测
Sep 25 Javascript
Vue实现简单的留言板
Oct 23 Javascript
DOM 事件流详解
Jan 20 #Javascript
jQuery链使用指南
Jan 20 #Javascript
使用jQuery管理选择结果
Jan 20 #Javascript
javascript动态修改Li节点值的方法
Jan 20 #Javascript
js+css实现tab菜单切换效果的方法
Jan 20 #Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 #Javascript
js动态切换图片的方法
Jan 20 #Javascript
You might like
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
php生成百度sitemap站点地图类函数实例
2014/10/17 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
理解JavaScript中的事件
2006/09/23 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
从盛大通行证上摘下来的身份证验证js代码
2011/01/11 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jquery中实现时间戳与日期相互转换
2016/04/12 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
2019/10/12 Javascript
JQuery发送ajax请求时中文乱码问题解决
2019/11/14 jQuery
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[08:38]DOTA2-DPC中国联赛 正赛 VG vs Elephant 选手采访
2021/03/11 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python将回车作为输入内容的实例
2018/06/23 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
美国经典刺绣和字母儿童服装特卖:Smocked Auctions
2018/07/16 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
乡镇务虚会发言材料
2014/10/20 职场文书
语文复习计划
2015/01/19 职场文书
七一表彰大会简报
2015/07/20 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Oracle11g R2 安装教程完整版
2021/06/04 Oracle