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高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 Javascript
JS+CSS3模拟溢出滚动效果
Aug 12 Javascript
bootstrap模态框垂直居中效果
Dec 03 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
js通过canvas生成图片缩略图
Oct 02 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 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中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
了不起的node.js读书笔记之node.js中的特性
2014/12/22 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
Javascript基础教程之JavaScript语法
2015/01/18 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
jquery文字填写自动高度的实现方法
2016/11/07 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
教师个人鉴定材料
2014/02/08 职场文书
教师自我鉴定范文
2014/03/20 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
十八大演讲稿
2014/05/22 职场文书
政风行风评议工作总结
2014/10/21 职场文书
建国大业观后感600字
2015/06/01 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers