jQuery 中的事件绑定

时间：2022-10-01 10:46:15

一、事件概念

和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行 一样,JS 中的事件就是对用户特定的行为作出相应的响应的过程,其实上就是浏览器 监听到用户的某些行为的时候会执行对应绑定程序。

二、事件的绑定

在 html元素上将触发事件的行为和事件响应的程序关联起来的过程就是事件绑 定。在绑定事件的时候需要先取得 html 中的按钮,但是此时html 还没有加载完毕,所以不能取得按钮元素(button)。此时我们可以将js 的导入放到页面的最后(这是之前的方案),也可以使用一个加载事件来解决这一问题。 DEMO:在匿名函数中绑定事件

//使用加载事件(html一旦加载完毕就马上执行“”之后的匿名函数

window.onload=function(){

//在匿名函数中绑定事件，取得按钮对象并且绑定事件

document.getElementById("btn").onclick=login;

}

//登录的函数

function login(username, password){

	var name="smith";

	var pwd="1234";

	if(username==name&&password=Epwd) {

		lalert("登录成功");

	}else{

		alert("用户名密码不正确!");

		}

}

DEMO:在body 元素中绑定 onload 事件。

<body onload="load()">

	<button id="btn" type="button">登录</button>

</body>

function load() {

	//取得按钮对象并且绑定事件

	document.getElementById("btn").onclick=login;

}

//登录的函数

function login(username, password){

	var name="smith";

	var pwd="1234";

	if(username==name && password--pwd){

		alert("登录成功");

	}else{

		alert("用户名密码不正确!");

	}

}

加载事件就是当html 全部加载完毕之后再触发的事件,此时事件的绑定是在整 个html代码加载完毕之后才执行的。以上的window.onload 事件默认的载体就是 body 元素。

三、常见的事件

焦点事件

  1. blur:在元素失去焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
  2. focus:在元素获得焦点时触发。这个事件不会冒泡;所有浏览器都支持它。
  3. focusin:与 focus 等价,但它冒泡。
  4. focusout:与 blur 等价,也冒泡。
  5. 支持 focusin、focusout 的浏览器有:IE5.5+、Safari 5.1+、Opera 11.5+ Chrome。 但只支持 DOM2 级事件处理程序
  6. blur、focusout 的事件目标是失去焦点的元素; focus、focusin 的事件目标是获 得焦点的元素
  7. change 事件

鼠标与滚轮事件

click 在用户单击住鼠标按钮或按下回车键时触发。 触发顺序 mousedown mouseup click,如果 mousedown、mouseup 其中之一被取消,就不会触发 click 事件。 mousedown 用户按下了任意鼠标按钮时触发。 mouseup 用户释放按钮时触发 mouseenter 在鼠标光标从元素外部首次移动到元素范围之内时触发。不冒泡, 而且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事,但 DOM3 级事件将它纳入了规范。IE、Firefox9+和Opera 支持这个事件。 mouseleave 在位于元素上方的鼠标光标移动到元素范围之外时触发。不冒泡,而 且在光标移动到后代元素上不会触发。DOM2 级事件并没有定义这个事,但 DOM3 级事件将它纳入了规范。IE、Firefox9+ 和 Opera 支持这个事件。 mouseover 在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边 界之内时触发。不能通过键盘触发这个事件。 mouseout 在鼠标指针位于一个元素上方,然后用将其移入另一个元素时触发。 又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。 不能通过键盘触发这个事件。

四、jQuery 中的事件绑定

在之前绑定事件的时候需要在 html中使用onxxxx 的形式去绑定,这种操作有一个 缺点,让html代码显得混乱(html只负责内容的描述)。 那么最好的方式是将要绑定事件的元素选择出来然后在 js 中实现绑定,现在可以使用jq 实现这一操作,而且 jq 的事件绑定很灵活。 DEMO:使用jQuery 绑定单击事件 1、第一种绑定方式，用jQuery的加载事件

$(function () {

// 绑定删除事件

	$("button").click(function () {

		alert("绑定了一个单机事件!");

	 })

})

2、第二种绑定方式

$(function () {

//绑定删除事件

	$("button").click(remove);

})

function remove(){

	alert("删除数据");

}

3、第三种绑定方式

$(function(){

	 $("button").on("click", function(){

		 alert("删除数据");

	 });

})

4、第四种绑定方式

$(function(){

	$("button").bind("click", function(){

	 alert("删除数据");

});

以上的所有绑定都只是为一个按钮绑定事件 DEMO:为多个元素绑定事件，实现同时删除(淡出)页面显示

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<!--表示样式可以根据设备的大小自适应-->

<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Insert title here</title>

<script src="js/jquery.min.js"></script>

<script src="js/newdui1.js"></script>

<script>

   $(function(){

      $("button").click(removeById);

    })

    function removeById(){

       var flag=window.confirm("你确定要删除吗？")

       if (!flag) {return};

       var parentsTr=$(this).parents("tr");

       $(this).parents("tr").fadeOut('slow', function() {

          parentsTr.remove();

          console.log($("tr").length);

      });

  }

</script>

</head>

<body>

   <table border="1">

       <tr><td>编号</td><td>姓名</td><td>职位</td><td>薪资</td><td>操作</td></tr>

       <tr><td>7369</td><td>第三</td><td>工人</td><td>5000</td><td><button type="button">删除</button></td></tr>

       <tr><td>7521</td><td>张三</td><td>司机</td><td>5000</td><td><button type="button">删除</button></td></tr>

       <tr><td>7788</td><td>李四</td><td>职员</td><td>5000</td><td><button type="button">删除</button></td></tr>

       <tr><td>7346</td><td>五一</td><td>经理</td><td>5000</td><td><button type="button">删除</button></td></tr>

       <tr><td>7839</td><td>小二</td><td>老板</td><td>5000</td><td><button type="button">删除</button></td></tr>

       <tr><td>7567</td><td>大哥</td><td>员工</td><td>5000</td><td><button type="button">删除</button></td></tr>

   </table>

</body>

</html>

五、JQuery选择器

    1. id选择器：$("#标签ID");
    2. 类选择器：$(".标签class");
    3. 元素选择器：$("标签元素");
    4. 组选择器：$("#标签ID，标签元素，.标签class");（就是多种类型的条件组合在一起）
    5. 后代选择器：$("父标签 标签1");（找到父标签下面的所有标签1）
    6. 子选择器：$("父标签>标签1");（找到父标签下的所有子标签1）
    7. 位置选择器：
      $("标签a：first");（找到第一个标签a）
      $("标签a：last");（找到最后一个标签a）
      $("标签a：even");（找到序数为偶数标签a）
      $("标签a：odd");（找到序数为奇数标签a）
      $("标签a：eq(idenx)");（找到索引为index的标签a）
      $("标签a：lt(idenx)");（找到索引小于index的标签a）
      $("标签a：gt(idenx)");（找到索引大于index的标签a）
    8. 属性选择器
      $("标签a[属性x]");（找到带有属性x的标签a）
      $("标签a[属性x='数值1']");（找到属性x等于数值1的标签a）
      $("标签a[属性x^='数值1']");（找到属性x以数值1开头的标签a）
      $("标签a[属性x*='数值1']");（找到属性x值包含数值1的标签a）
      $("标签a[属性x!='数值1']");（找到属性x值不等于包含数值1的标签a）
 

jQuery 中的事件绑定的更多相关文章

  1. jQuery中的事件绑定方法

    在jQuery中,事件绑定方法大致有四种:bind(),live(), delegate(),和on(). 那么在工作中应该如何选择呢?首先要了解四种方法的区别和各自的特点. 在了解这些之前,首先要知 ...

  2. Jquery中的事件绑定&dollar;&lpar;&amp&semi;quot&semi;&num;btn&amp&semi;quot&semi;&rpar;&period;bind&lpar;&amp&semi;quot&semi;click&amp&semi;quot&semi;&comma;function&lpar;&rpar;&lbrace; &rcub;&rpar;

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  3. jQuery 中的事件绑定与取消绑定

    1:在jQuery中使用bind方法进行事件的绑定,bind方法有两个参数,第一个参数是事件的类型例如click,change,keyup,keydown,blur,focus等.第二个参数是一个回调 ...

  4. js和jQuery中的事件绑定与普通事件

    普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...

  5. jQuery中是事件绑定方式--on、bind、live、delegate

    概述:jQuery是我们最常用的js库,对于事件的绑定也是有很多种,on.one.live.bind.delegate等等,接下来我们逐一来进行讲解. 本片文章中事件所带的为版本号,例:v1.7+为1 ...

  6. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

  7. 关于jquery中的事件绑定bind（）和live（）

    live可以说是bind是方法的变种. 二者的主要区别就是live方法的作用机理是事件委托,live方法的作用机理是将事件绑定DOM的根节点上. live方法的处理机制就是把事件绑定在DOM树的根节点 ...

  8. jQuery学习笔记（三）jQuery中的事件

    目录 加载DOM 事件绑定 合成事件 事件冒泡 移除事件 一．加载DOM Javascript 与HTML之间的交互是通过用户操作浏览器页面引发的事件来处理的.jQuery提供了丰富的事件处理机制.从 ...

  9. jQuery中的事件与动画 &lpar;你的明天Via Via&rpar;

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

随机推荐

  1. JS 初级（三）接上

    传送门 http://www.cnblogs.com/Sabo-dudu/p/5788197.html 现阶段我就了解了这么多,在以后的学习中,我会不断的更新,如果有什么不同的见解可以一块学习,谁有更 ...

  2. MongoDB的数据库基本操作（二）

    创建数据库 >use mydb switched to db mydb  查看所有的数据表 >show collections  system.indexes 创建数据表 >db.c ...

  3. const int &ast; p 和 int const &ast; p 和 int &ast; const p 的区别

    首先注意,const int * p 和int const *p 是一样的,并且不管是不是*p,即使const int i和int const i也是一样的,所以我们接下来只讨论int const * ...

  4. visualSVN server库迁移&lpar;转&rpar;

    转自:http://blog.csdn.net/yuhuijun_1/article/details/9762683 首先,VisualSVN Server Manager,包含两个路径,一个是安装路 ...

  5. XJOI网上同步训练DAY1 T3

    思路:一开始看到这题的时候想DP,可是发现貌似不行..因为有前缀也有后缀,而且有的后缀会覆盖到现在的前缀,这就不满足无后效性了啊! 但是有个很巧妙的思路:如果我们知道a[i]的最大值,那么p的数量和q ...

  6. pyqt 正则表达式例子学习

    def rex01(self): username=QtCore.QRegExp('[a-zA-Z0-9_]{2,10}') self.names.setValidator(QtGui.QRegExp ...

  7. Log in Spring

    记录日志向来是企业级应用程序必须考虑的事情.早些年,一个项目一个日志功能或模块,然后有了log4j这样的产品.不知是log4j将记录日志做到了极致,或是技术含量不高,又或是经济利益不明显,它已成为了这 ...

  8. Spring&plus;SpringMVC&plus;MyBatis&plus;easyUI整合进阶篇&lpar;一&rpar;设计一套好的RESTful API

    写在前面的话 看了一下博客目录,距离上次更新这个系列的博文已经有两个多月,并不是因为不想继续写博客,由于中间这段时间更新了几篇其他系列的文章就暂时停止了,如今已经讲述的差不多,也就继续抽时间更新&lt ...

  9. A&period; Arrays&lpar;Codeforces Round &num;317 水题&rpar;

    A. Arrays time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...

  10. 在win10中解决 你要以何方式打开此 &period;xlsx

    鼠标右击开始按钮,点击控制面板. 查看方式选择大图标或者小图标.   然后点击“默认程序”.     点击,设置默认程序.   在左侧程序蓝,选择你需要设定的程序.然后点击“将此程序设为默认值”.确定 ...

相关文章