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 相关文章推荐
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
Vue.js学习笔记之常用模板语法详解
Jul 25 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
js的对象与函数详解
Jan 21 Javascript
详解javascript中的Error对象
Apr 25 Javascript
javascript 模块依赖管理的本质深入详解
Apr 30 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实现微信发红包程序
2015/08/24 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
vue解决使用webpack打包后keep-alive不生效的方法
2018/09/01 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
Python异常对代码运行性能的影响实例解析
2018/02/08 Python
Python网络编程之TCP套接字简单用法示例
2018/04/09 Python
Python正则表达式和元字符详解
2018/11/29 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
基于Python测试程序是否有错误
2020/05/16 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
初级Java程序员面试题
2016/03/03 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
会计助理岗位职责
2014/02/17 职场文书
立志成才演讲稿
2014/09/04 职场文书
美国旅游签证工作证明
2014/10/14 职场文书
简单的辞职信怎么写
2015/02/28 职场文书
期中考试后的感想
2015/08/07 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript