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 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
JavaScript判断浏览器类型的方法
Feb 10 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
详解webpack 热更新优化
Sep 13 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 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设计模式小结
2013/02/15 PHP
PHP与MongoDB简介|安全|M+PHP应用实例详解
2013/06/17 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
百度地图API使用方法详解
2015/08/25 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
几行代码轻松实现PHP文件打包下载zip
2017/03/01 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
微信小程序 http请求的session管理
2017/06/07 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
three.js实现圆柱体
2018/12/30 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
vue绑定class的三种方法
2020/12/24 Vue.js
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python错误处理操作示例
2018/07/18 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
2016/04/26 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
教师考核材料
2014/05/21 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
python常见的占位符总结及用法
2021/07/02 Python