jQuery 中的事件绑定

一、事件概念

和数据库中的触发器一样,当操作了数据的时候会引发对应的触发器程序执行一样,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 元素。

三、常见的事件

焦点事件

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

id选择器：$("#标签ID");
类选择器：$(".标签class");
元素选择器：$("标签元素");
组选择器：$("#标签ID，标签元素，.标签class");（就是多种类型的条件组合在一起）
后代选择器：$("父标签标签1");（找到父标签下面的所有标签1）
子选择器：$("父标签>标签1");（找到父标签下的所有子标签1）
位置选择器：
$("标签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）
属性选择器
$("标签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）