事件流
JavaScript DOM事件流：
- 事件捕获阶段，jq无此阶段
- 处于目标阶段
- 事件冒泡阶段
jQuery阻止冒泡：
ev.stopPropagation()阻止ev对象事件冒泡
ev.preventDefault()阻止默认事件
return false;组织冒泡与默认事件
- ev.type事件类型
- ev.target事件对象
- ev.pageX鼠标x方向位置
- ev.pageY鼠标y方向位置
事件绑定
动态生成的元素，不能直接添加事件，里面的事件也不会发生
obj.bind('click',function(){})，第一个参数为时间类型，第二个参数为回调函数。通过空格可以添加多个事件类型。也可以通过key：value方式来添加多个类型与对应事件
移除事件：obj.unbind('click')，如果没有参数，表示移除所有事件。
绑定自定义事件
触发自定义事件
obj.trigger('事件名',[参数列表])
<script type="text/javascript"> $(function () { $("#btn").bind('myClick',function (ev,a,b,c) { alert("已触发自定义事件") }); $("#btn").trigger('myClick',[1,2,3]); }) </script>
事件代理
自己完成不了的事件，交给父级元素来做这事件
即给后来添加的元素添加事件
绑定多个选择器，中间用逗号
父级.on('事件名','点击的标签元即选择器','回调函数')
<script type="text/javascript"> $(function () { $("ul").on('click','li',function () { alert("xxxx"); }) }) </script>
鼠标事件
单击
双击
按下/弹起
移动
移入
移出
获取焦点
失去焦点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery鼠标事件</title> <script src="js/jquery-3.3.1.js"></script> <style type="text/css"> *{ padding: 0; margin: 0; } #box{ width: 200px; height: 200px; background-color: green; } #child{ width: 100px; height: 100px; background-color: #A9A9A9; } </style> </head> <body> <div id="box"> <div id="child"></div> </div> <input type="text"> <input type="password"> </body> <script type="text/javascript"> $(document).ready(function () { //双击事件 $("#box").dblclick(function () { alert("dblclick"); }); //鼠标按下与弹起触发 $("#box").mousedown(function () { console.log("mousedown"); }); $("#box").mouseup(function () { console.log("mouseup"); }); //鼠标移入和移除，鼠标指针穿过/离开被选元素或被选元素的子元素都将触发动作 $("#box").mouseover(function () { console.log("mouseover") }); $("#box").mouseout(function () { console.log("mouseout") }); //只有被选元素移入/移除才触发 $("#box").mouseenter(function () { console.log("mouseenter") }); $("#box").mouseleave(function () { console.log("mouseleave") }); //鼠标移动时触发动作 $("#box").mousemove(function () { console.log("mousemove") }); //鼠标获取或失去焦点触发事件,可模拟change()事件 $("input[type=text]").focus(function () { console.log($(this).val()) }) $("input[type=text]").blur(function () { console.log($(this).val()) }) //键盘按下或弹起事件触发，可做搜索框，类似百度搜索出现候选词条 //按下是输入之前的值 $("input[type=password]").keydown(function () { console.log($(this).val()) }); $("input[type=password]").keyup(function () { console.log($(this).val()) }) }) </script> </html>
表单事件
- change()事件，仅用于input元素，textarea，select等
- select()方法，用于input元素类型为type的情况，textarea标签等文本标签，select指用鼠标选中内容
- submit()事件，用于form表单中类型为submit的触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单事件</title> <script src="js/jquery-3.3.1.js"></script> </head> <body> <form action="http://www.baidu.com"> <select name="sweets" id="" multiple=""> <option value="">巧克力</option> <option value="" selected="selected">糖果</option> <option value="">焦糖</option> <option value="">烧饼</option> <option value="" selected="selected">饼干</option> </select> <input type="text" value="hello" id="target"> <input type="submit" value="123"> </form> <div class="show"></div> <textarea id="other">dsgfsaffsfs</textarea> </body> <script type="text/javascript"> $(function () { //change事件 $('select').change(function () { $(".show").text($('select option:selected').text()); }) //select仅限于用于input type=text和textarea上 $("#other").select(function () { console.log($(this).text()); }) $("form").submit(function (ev) { //阻止默认行为 ev.preventDefault(); //下面做希望做的事儿 alert(111) }) }) </script> </html>