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 相关文章推荐
简单实用的全选反选按钮例子
Oct 18 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
微信小程序登录时如何获取input框中的内容
Dec 04 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
基于VUE实现判断设备是PC还是移动端
Jul 03 Javascript
react中hook介绍以及使用教程
Dec 11 Javascript
vue+element UI实现树形表格
Dec 29 Vue.js
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内核解析:PHP中的哈希表
2014/01/30 PHP
基于linnux+phantomjs实现生成图片格式的网页快照
2015/04/15 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
JS添加删除DIV的简单实例
2016/07/08 Javascript
jQuery获取与设置iframe高度的方法
2016/08/01 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
基于vue cli重构多页面脚手架过程详解
2018/01/23 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
安全检查管理制度
2014/02/02 职场文书
美容院营销方案
2014/03/05 职场文书
机械专业求职信范文
2014/07/15 职场文书
退休欢送会主持词
2015/07/01 职场文书
浅谈JavaScript作用域
2021/12/06 Javascript
Python序列化模块JSON与Pickle
2022/06/05 Python