jquery基础事件

一.常用的事件有:click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error。。。。。

二.Query 通过.bind()方法来为元素绑定这些事件。可以传递三个参数:bind(type,[data],fn):

type 表示一个或多个类型的事件名字符串.

[data]是可选的,作为 event.data 属性值传递一个 额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象.

fn 表示绑定到指 定元素的处理函数。

前提:jquery包的引入

准备的html:待续

第一部分:添加绑定事件: bind()

1.匿名函数

//使用点击事件
 $(‘input‘).bind(‘click‘,function(){ //点击按钮后执行匿名函数

 alert(‘点击!‘); 
});

解释:给元素绑定click事件,函数为function(){}。

2.普通函数

//普通处理函数

 $(‘input‘).bind(‘click‘,fn); //执行普通函数式无须圆括号

 function  fn()
{ 

alert(‘点击!‘); 

}

解释:通过有函数名来调用。进一步绑定在事件上。

3.同时绑定多个事件

//可以同时绑定多个事件

$(‘input‘).bind(‘mouseout  mouseover‘, function(){ //移入和移出分别执行一次 

$(‘div‘).html(function(index,value)

{ returnvalue+‘1‘; }); 

});

4.对象键值对绑定多个参数(函数)

//通过对象键值对绑定多个参数

 $(‘input‘).bind({ //传递一个对象

 ‘mouseout‘:function(){ //事件名的引号可以省略 
alert(‘移出‘); 

},
‘mouseover‘:function()
{
 alert(‘移入‘);
 }
 });

第二部分:删除绑定事件:unbind()

1.删除所用当前的元素事件

//使用 unbind 删除绑定的事件

 $(‘input‘).unbind();   //删除所有当前元素的事件

2.删除指定的事件

//使用 unbind 参数删除指定类型事件 

$(‘input‘).unbind(‘click‘); //删除当前元素的 click 事件

3.删除指定函数

//使用 unbind 参数删除指定处理函数的事件

 function fn1(){ alert(‘点击 1‘); }

 functionfn2(){ alert(‘点击 2‘); }

$(‘input‘).bind(‘click‘,fn1);

 $(‘input‘).bind(‘click‘,fn2);

$(‘input‘).unbind(‘click‘,fn1); //只删除 fn1 处理函数的事件
时间: 2024-12-09 21:54:45

jquery基础事件的相关文章

jQuery基础——事件篇

jQuery基础--事件篇 鼠标事件 click与dbclick事件 click方法监听用户单击操作,dbclick监听用户双击操作,这两个方法类似. dbclick与click事件不同的是: click事件触发需要以下几点: click事件其实是由mousedown与mouseup 2个动作构成,所以点击的动作只有在松手后才触发 dblclick事件触发需要以下几点: dblclick又是由2个click叠加而来的,所以dblclick事件只有在满足以下条件的情况下才能被触发 鼠标指针在元素里

jQuery 基础事件

JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标 或键盘触发页面中绑定事件的元素即可触发.jQuery 为开发者更有效率的编写事件行为,封 装了大量有益的事件方法供我们使用. 一.绑定事件 在 JavaScript 课程的学习中,我们掌握了很多使用的事件,常用的事件有:click.dblclick. mousedown.mouseup.mousemove.mouseover.mouseout.change.select.submit.keydown. ke

jQuery基础-事件

只能添加一个处理函数,后面的会覆盖前面 会有兼容性差异 冒泡 会依次检查父元素 截获冒泡 或者 最大的缺陷 并且在IE和NetSpace里面分别为冒泡和捕获两种 多个处理函数 依次执行 捕获--->自己--->冒泡 true 只捕获,不冒泡 false 只冒泡 从父元素的处理事件开始执行 又想捕获又想冒泡怎么办? true和false都写一次 jQuery就处理了很多兼容性的差异 绑定事件 不带其他参数的话,全部事件都会清理掉 原文地址:https://www.cnblogs.com/weiz

Jquery | 基础 | 事件的链式写法

$(".title").click(function () { $(this).addClass("curcol").next(".content").css("display", "block"); }); <!DOCTYPE html> <html> <head> <title>jQuery事件的链式写法</title> <script

9、网页制作Dreamweaver(jQuery基础:事件)

事件 定义:即当HTML中发生某些事(点击.鼠标移过等)的时候调用的方法 $(selector).action() 事件的触发有两种方法: 1.直接将发生的事写在<javascript>中 1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 $("button").click(function(){ 4 $("p").hide(); 5 }

【jquery基础教程】jquery事件及操作大汇总

在学习Javascript语言中,有一个优秀的Javascript库是大家都会遇到的--jquery,今天小编汇总了jquery事件及操作,现在一起来看看jquery基础教程吧! 事件 bind()        向匹配元素附加一个或更多事件处理器 blur( )        触发.或将函数绑定到指定元素的 blur 事件 change()        触发.或将函数绑定到指定元素的 change 事件 click()        触发.或将函数绑定到指定元素的 click 事件 dblc

Jquery基础之事件操作

事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作.常见的元素点击事件.鼠标事件.键盘输入事件等,较传Javascript 相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力. 一.DOM加载事件 页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表 展示两个事件的异同.    w

jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

1.jQuery鼠标事件之click与dbclick事件 方法一:$ele.click()(不带参数) <div id="test">点击触发<div> $("ele").click(function(){ alert('触发指定事件') }) $("#test").click(function(){ $("ele").click() //手动指定触发事件 });   方法二:$ele.click( h

【总结整理】JQuery基础学习---事件篇

jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作.这两个方法的用法是类似的,下面以click()事件为例 使用上非常简单: 方法一:$ele.click() 绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少 <div id="test">点击触发<div> $("el