一、事件冒泡与阻止事件冒泡
事件冒泡:当一个元素触发某个事件的时候,会把这个事件传播到其父元素,一直到顶层元素。
阻止事件冒泡:在被触发事件的子元素中添加 return false;
即可。
二、事件的触发
之前讲的绑定事件是事件触发后的事件处理过程,并且上面的事件触发是被动的事件触发,怎么可以主动触发事件呢?
文本框的获取焦点事件的触发:
// 方式一文本框元素.focus();// 方式二文本框元素.trigger("focus");// 方式三文本框元素.triggerHandler("focus");
PS:方式一和方式二,都可以获取文本框的焦点,并且触发浏览器的默认行为(光标闪烁);而方式三,可以获取文本框的焦点,但是不能触发浏览器的默认行为。
三、事件参数对象
事件处理函数有没有参数呢?
通过 arguement.length
可以得到有一个参数,这个参数是一个对象,里面有很多事件相关的属性。
获取用户按下的组合键
$(document).mousedown(function (e) { if (e.altKey) { console.log("alt按下了"); } else if (e.ctrlKey) { console.log("ctrl按下了"); } else if (e.shiftKey) { console.log("shift按下了"); } else { console.log("鼠标按下"); } });
altKey, ctrlKey, shiftKey 相应的按键按下后,对应事件的值为 true。
// 鼠标按下的键值e.button// 按键按下的键值e.keyCode// 触发该事件的目标对象,是一个 DOM 对象// 当发生事件冒泡的时候,可以定位到具体发生事件的源对象,而不是冒泡的对象。(比如:p在div里面,那么点击p触发的事件下,e.target 是写在div事件处理函数里面的,此时 e.target 是p对象。)e.target// 触发事件的当前的对象// (比如:p在div里面,那么点击p触发的事件下,e.currentTarget 是写在div事件处理函数里面的,此时 e.currentTarget 是div对象)e.currenyTarget// 代理的那个对象e.delegateTarget
四、链式编程的原理
链式编程就是一个对象调用方法后还可以继续调用方法。这就要求对象调用方法后的返回值还是这个对象,那么这个方法内部是如何实现的呢?
其实很简单:就是在最后返回调用其的对象。return this;
就好了。
还有一个问题,就是 jQuery 中 val(); 在没有参数时时读取数值,不能链式编程;在有参数的时候是设置,可以链式编程。
所以方法的内部实现,在 return this; 之前还要做个判断,如果有参数才返回调用对象,否则不返回。
案例:五星好评
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul { margin: 100px 0 0 300px; } li { list-style: none; font-size: 20px; float: left; color: #ff0000; cursor: pointer; } </style></head><body> <ul id="uu"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script src="jquery-1.12.4.min.js"></script> <script> $("#uu>li").click(function () { $("#uu>li").html(""); $(this).attr("index", 1).siblings("li").removeAttr("index"); $(this).html("").prevAll("li").html(""); }).mouseenter(function () { $(this).html("").prevAll("li").html(""); }).mouseleave(function () { $("#uu>li").html(""); $("#uu>li[index=1]").html("").prevAll("li").html(""); }); </script></body></html>