1.JS事件的基本知识<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js事件基本知识< ...
1.JS事件的基本知识
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js事件基本知识</title> <script type="text/javascript" src='/images/loading.gif' data-original="js/jQuery.js"></script> <script type="text/javascript"> //这个事件可以添加到第一个button标签上,因为第一个button标签知道fn1是什么. function fn1() { alert("fn1"); } //这段代码不会被执行,因为页面是从上往下执行,在这里获取不到"#i1". //如果想要解决这个问题,可以将下面的这些代码放到body后面. var obj = document.getElementById("i1"); obj.onclick = function () { alert("fn2"); //不能直接给对象添加已有事件,必须在将已有的事件添加到DOM对象的新的方法中. fn1(); } </script></head><body><input type="button" class="dd" value="点击我" onclick="fn1();"><input type="button" class="dd" id="i1" value="点击我"></body></html>JS事件的学习和JS方法的学习揉杂在一起,JS相对于Java等语言,方法定义和使用上比较随意和简单,但是还是有一些区别,需要理清楚.
2.jQuery方式绑定事件
//jQuery方式绑定事件$(function () { var obj = $(".dd"); obj.click(function () { alert("jQuery方式"); })})这里多多赘述一点,由于jQuery可以理解为是对JS的一种高级封装,这种封装是单向的,所以我们可以在JS中加入jQuery代码块,但是不能将JS和jQuery完全地揉杂在一起,所以对于jQuery的块状代码必须放入到一个分离的jQuery块中.
对于jQuery的绑定事件的方法,这里只举例click()方法,其他的方法查阅jQuery的文档即可.
3.事件操作和委派
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件操作和委派</title> <script type="text/javascript" src='/images/loading.gif' data-original="js/jQuery.js"></script> <script type="text/javascript"> $(function () { //间接绑定:bind. //间接绑定,普通情况下,这种绑定方式是多余的. //给一个或多个事件绑定函数. $("input").bind("click", function () { alert("bind间接绑定事件"); }); //委派绑定:live $(".dd").live("click", function () { alert("live委派绑定事件"); }); //我在这里新添加一个标签 //对于这种用JS新添加的标签,间接绑定的事件对这种标签没有用处. //对于这种用JS新添加的标签,委派绑定的事件会给符合条件的标签添加事件. $("body").append("<input type='button' class='dd' value='我是方法生成的标签,点击我''>"); }) </script>></head><body><input type="button" class="dd" value="点击我"></body></html>不论是bind绑定还是live绑定,都是间接绑定
4.事件切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件的切换</title> <style> .hover { background: aqua; } </style> <script type="text/javascript" src='/images/loading.gif' data-original="js/jQuery.js"></script> <script type="text/javascript"> $(function () { //需求:鼠标覆盖变色,鼠标移走恢复 $("#d1").hover( //鼠标覆盖 function () { $("#d1").addClass("hover"); }, //注意上面有一个逗号 //鼠标移走 function () { $("#d1").removeClass("hover"); } ); }) </script></head><body><div style="border:1px solid black; width: 100px; height: 100px" id="d1"> Hello hover!</div></body></html>在jQuery开发文档中,hover()函数归类到了事件切换中,对于hover()函数的事件切换的定义,仅限于鼠标的覆盖和移走两个操作,上面是一个标准的事件切换代码.
原标题：jQuery事件学习
关键词：jquery
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
