jquer基础事件方法实例分析

这篇文章主要介绍“jquer基础事件方法实例分析”，在日常操作中，相信很多人在jquer基础事件方法实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jquer基础事件方法实例分析”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联，为您提供网站建设、成都网站制作、网站营销推广、网站开发设计，对服务成都混凝土搅拌罐等多个行业拥有丰富的网站建设及推广经验。成都创新互联网站建设公司成立于2013年,提供专业网站制作报价服务,我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏心悦目的作品。 与客户共同发展进步，是我们永远的责任！

基础事件方法：1、click()，设置鼠标单击事件；2、dblclick()，设置鼠标双击事件；3、change()，设置内容改变事件；4、focus()，设置触发焦点事件；5、blur()，设置失去焦点事件；6、mousedown()等。

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

事件方法触发器或添加一个函数到被选元素的事件处理程序。

下面的表格列出了一些用于处理事件的 jQuery 方法。

方法	描述
bind()	向元素添加事件处理程序
blur()	添加/触发失去焦点事件
change()	添加/触发 change 事件
click()	添加/触发 click 事件
dblclick()	添加/触发 double click 事件
die()	在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
focus()	添加/触发 focus 事件
focusin()	添加事件处理程序到 focusin 事件
focusout()	添加事件处理程序到 focusout 事件
hover()	添加两个事件处理程序到 hover 事件
keydown()	添加/触发 keydown 事件
keypress()	添加/触发 keypress 事件
keyup()	添加/触发 keyup 事件
live()	在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
mousedown()	添加/触发 mousedown 事件
mouseenter()	添加/触发 mouseenter 事件
mouseleave()	添加/触发 mouseleave 事件
mousemove()	添加/触发 mousemove 事件
mouseout()	添加/触发 mouseout 事件
mouseover()	添加/触发 mouseover 事件
mouseup()	添加/触发 mouseup 事件
off()	移除通过 on() 方法添加的事件处理程序
on()	向元素添加事件处理程序
one()	向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
ready()	规定当 DOM 完全加载时要执行的函数
toggle()	在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger()	触发绑定到被选元素的所有事件
triggerHandler()	触发绑定到被选元素的指定事件上的所有函数
unbind()	从被选元素上移除添加的事件处理程序
undelegate()	从现在或未来的被选元素上移除事件处理程序

说明：

1、以上事件函数有三种用法：

//直接绑定事件到元素上
$('.target1').keydown(function(e) {
    $("em:first").text(e.target.value)    //通过对象e获取输入的值
});
 
//传递参数调用函数处理
$("#test").click(11111,function(e) {
    //this指向 div元素
    //e.data  => 11111 通过e传递参数数据
});
 
//手动触发已绑定的点击事件
$elem.click()

2、mouseover与mouseenter区别：不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件，称作支持冒泡处理，冒泡处理指子元素与父元素共同定义的事件，在触发子元素时，或者没有定义子元素，事件就会向父级传播，引发父级事件触发。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。

3、form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为。传统的方式是调用事件对象  e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可。

    //回车键或者点击提交表单后禁止浏览器默认跳转：
    $('#target2').submit(function() {
        alert('捕获提交表达动作,阻止页面跳转')
        return false;
    });

4、on()使用

基本用法：.on( events ,[ selector ] ,[ data ] )

最常见的给元素绑定一个点击事件，对比一下快捷方式与on方式的不同

$("#elem").click(function(){})  //快捷方式
$("#elem").on('click',function(){}) //on方式

//多个事件绑定同一个函数，通过空格分离，传递不同的事件名，可以同时绑定多个事件
$("#elem").on("mouseover mouseout",function(){ });

//多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){}, 
    mouseout:function(){}
});

//将数据传递到处理程序
$( "button" ).on( "click", {    //第二个参数传递数据给函数调用
  name: "Mr.Tory"
}, greet );
function greet( event ) {
  alert( "Hello " + event.data.name ); //输出Hello Mr.Tory
}

事件对象的属性与方法

.type	事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click
.data	事件调用时传入额外参数
.target	触发该事件的 DOM 元素
.which	指示按了哪个键或按钮
.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
.pageX/Y	相对于文档左/上边缘的鼠标位置
.result	上一个相同事件处理器函数返回的值
.preventDefalut()	阻止事件的默认动作
.stopPropagation()	取消事件冒泡

$("#content").click(function(event) {
   $("#msg").html("
外层div元素被单击
");
   event.stopPropagation();                         //通过event方法阻止事件冒泡  
});

到此，关于“jquer基础事件方法实例分析”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

新闻名称：jquer基础事件方法实例分析
本文地址：http://6mz.cn/article/ispdgs.html