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 相关文章推荐
Egret引擎开发指南之运行项目
Sep 03 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
很酷的星级评分系统原生JS实现
Aug 25 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
JS中使用media实现响应式布局
Aug 04 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
Sep 18 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
May 07 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
非常漂亮的js烟花效果
Mar 10 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
zf框架的Filter过滤器使用示例
2014/03/13 PHP
详解PHP序列化反序列化的方法
2015/10/27 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
浅析php如何实现App常用的秒发功能
2016/08/03 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
javascript import css实例代码
2008/07/18 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Python面向对象程序设计OOP深入分析【构造函数,组合类,工具类等】
2019/01/05 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python系列 文件操作的代码
2019/10/06 Python
Python语言异常处理测试过程解析
2020/01/08 Python
如何编写优秀的食品项目创业计划书
2014/01/23 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
法律进社区活动总结
2015/05/07 职场文书
行政答辩状范文
2015/05/21 职场文书
黄埔军校观后感
2015/06/10 职场文书
超市员工管理制度
2015/08/06 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript