详解jQuery中的事件


Posted in Javascript onDecember 14, 2016

大致介绍

jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力

jQuery中的事件

详解jQuery中的事件

加载DOM

在jQuery中是用$(document).ready()方法来替代JavaScript中的window.onload方法的,但是他们也有一些不同点

1、执行时机

例如我们有一个有很多图片的网页

$(document).ready()方法是在这个网页的DOM树加载完就可以执行的,而window.onload方法必须在DOM树加载完和图片都加载完才执行

如果使用jQuery我们想要在整个页面加载完在执行可以使用load()方法

下面两段代码的功能是一样的

// jQuery
      $(window).load(function(){
        // 代码1
      });
      // JavaScript
      window.onload = function(){
        // 代码2
      };

2、多次使用

JavaScript的onload事件一次只能保存对一个函数的引用,而$(document).ready()可以保存多个

function one(){
        alert('1');
      }
      function two(){
        alert('2');
      }
      // JavaScript
      window.onload = one;
      window.onload = two;//只执行two()
      // jQuery
      $(document).ready(function(){
        one();
      });
      $(document).ready(function(){
        two();
      });//one() 和 two()都会执行

3、简写方式

$(document).ready(function(){});可以简写为$(function(){});

事件绑定

bind()函数的语法:bind(type,[.data],fn)

第一个参数是事件类型

第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象

第三个参数是用来绑定的处理函数

用例子来看,有两个div,第二个div隐藏,当我们点击第一个div时,第二个div显示

<div id="div1"></div>
  <div id="div2"></div>
  <script type="text/javascript">
  $(function(){
    $('#div1').bind('click',function(){
      $(this).next().show();
    });
    
  });

增加功能,当点击div1时如果div2是显示的,则隐藏它,否则就显示它

$(function(){
    $('#div1').bind('click',function(){
      if($(this).next().is(':visible')){
        $(this).next().hide();
      }else{
        $(this).next().show();
      }
    });
  });

简写:

$('#div1').click(function(){
      if($(this).next().is(':visible')){
         $(this).next().hide();
       }else{
         $(this).next().show();
       }
    })

合成事件

1、hover()方法

用于模拟光标悬停事件。当光标移动到元素上时触发第一个函数,当光标移出元素时,会触发第二个函数

$('#div1').hover(function(){
      $(this).next().show();
    },function(){
      $(this).next().hide();
    });

2、toggle()方法

用于模拟鼠标连续单击事件,当鼠标第一次点击元素,触发第一个函数,当鼠标点击同一个函数时触发第二个函数

$('#div1').toggle(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

阻止事件冒泡和阻止默认行为

1、阻止事件冒泡 

stopPropagation()方法

2、阻止默认行为

preventDefault()方法

注意:1、return false 在jQuery中是即阻止事件冒泡又阻止默认行为

 2、jQuery不支持事件捕获

事件对象的属性

1、event.type

 改方法的作用是获取到事件的类型

$('#div1').click(function(ev){
      alert(ev.type);//click
    })

2、event.target

获取到触发事件的元素

$('#div1').click(function(ev){
   alert(ev.target.id);//div1
  })

3、event.relatedTarget

获取相关元素

4、event.pageX和event.pageY

获取到光标相对于页面的x的坐标和y的坐标

$('#div1').click(function(ev){
   alert(ev.pageX + ',' + ev.pageY);//275,181
   })

5、event.which

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键;在键盘事件中获取键盘的按键

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠标左键,2是鼠标中见,3是鼠标右键
})

移除事件

 unbind()方法语法: unbind([type],[data]);

 第1个参数是事件类型,第2个参数是将要移除的函数

 看一个例子,为div1绑定如下事件

$('#div1').bind('click',function(){
      alert('1');
    }).bind('click',function(){
      alert('2');
    }).bind('mouseover',function(){
      alert('3');
    })

   1、如果没有参数,则删除所有绑定的事件

       $('#div1').unbind();//删除所有事件

    2、如果提供了事件类型作为参数,则只删除该类型的绑定事件

        $('#div1').unbind('mouseover');//删除mouseover事件

    3、如果把绑定时传递的处理函数作为第2个参数,则只有这个特定的时间处理函数会被删除

模拟操作

1、常用模拟

在jQuery中可以使用trigger()方法完成模拟操作,例如可以使用下面的代码来触发id为btn的按钮的click事件

$('#btn').trigger('click');

2、触发自定义事件

trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。

$('#btn').bind('myclick',function(){
  alert('1');
});
$('#btn').trigger('myclick');

3、传递数据

$('#btn').bind('myclick',function(event,message1,message2){
 alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);

4、执行默认操作

$('input').trigger('focus');

以上代码会触发input元素的focus事件,也会使<input>元素本身得到焦点

如果只想触发<input>元素上绑定的特定事件,同时取消浏览器对此事件的默认操作可以使用triggerHandler()方法

其他用法

添加事件命名空间,便于管理

例如可以把元素绑定的多个事件类型用命名空间规范起来

$('div').bind('click.plugin',function(){
      alert('1');
    });
    $('div').bind('mouseover.plugin',function(){
      alert('2');
    });
    $('div').bind('dbclick.plugin',function(){
      alert('3');
    });
    $('button').click(function(){
      $('div').unbind('.plugin');
    })

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS 常用校验函数
Mar 26 Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
IE下JS读取xml文件示例代码
Aug 05 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
Dec 06 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
Aug 29 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
简介JavaScript错误处理机制
Aug 04 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 #Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 #Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 #Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 #Javascript
微信小程序 require机制详解及实例代码
Dec 14 #Javascript
js实现获取鼠标当前的位置
Dec 14 #Javascript
详解vue.js组件化开发实践
Dec 14 #Javascript
You might like
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
php学习之 数组声明
2011/06/09 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
Yii基于CActiveForm的Ajax数据验证用法示例
2016/07/14 PHP
PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】
2019/03/27 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
21个值得收藏的Javascript技巧
2014/02/04 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python网络爬虫信息提取mooc代码实例
2020/03/06 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
治超工作实施方案
2014/05/04 职场文书
2015年元旦演讲稿
2014/09/12 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2014年转正工作总结
2014/11/08 职场文书
采购内勤岗位职责
2015/04/13 职场文书