jQuery-中的事件

Posted 2020-08-09 只要闪电降临 就会有跳舞的火焰

【jQuery中的事件】

javascript和html之间的交互是通过用户和浏览器操作页面时引发的事件来处理的，虽然传统的javascript能完成这些交互，但事
jQuery增加并扩充了基本事件处理机制。

【加载DOM】
1、执行时机
$(document).ready()方法和window.onload方法相似的功能，但在执行时机方面是有区别的，后者是等到页面中所有的元素完全加载到浏览器在执行，而前者是在DOM再如就绪是就可以执行。另外要注意一点，就是$(document).ready()内注册的事件，只要DOM就绪就会被执行，因此可能此时uansu的关联文件未下载完，例如图片等，要解决这个问题可以使用jQuery的另一个关于页面加载的方法——load()方法。该方法会在元素的onload()事件中绑定一个处理函数。
2、多次使用
就是说window.onload方法只能使用一次，而$(document).ready()方法可以多次使用。

【事件绑定】
可以使用bind()方法来对匹配的元素进行特定是事件绑定，调用格式为：bind(type [.data],fn);
参数说明：第一个参数指的是时间的类型，也可以自定义，第二个参数可选，作为对象属性值传递给事件对象到的额外数据对象。
第三个参数用来绑定的处理函数。
在用于标题链接显示内容的列子中步骤为：
——等待DOM加载完毕；
——找到“标题”所在的元素，绑定click事件；
——找到“内容”元素，如果内容元素是显示则隐藏，隐藏则显示。

改变绑定事件类型步骤：
——等待DOM加载完毕；
——找到“标题”所在的元素，绑定mouseover事件；
——找到“内容”元素，显示“内容”；
——找到“标题”所在的元素，绑定mouseout/事件；
——找到“内容”元素，隐藏“内容”；

【合称事件】
jQuery有两个合成事件：hover()方法和toggle()方法，这两个方法都属于jquery的自定义方法。
hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数，当光标移除元素时会触发第二个函数。
toggle()方法：用于模拟鼠标连续单击事件。
两个方法的执行步骤为：
——等待DOM装载完毕；
——找到“标题”元素，添加toggle()方法，在该方法中定义两个函数，分别表示显示和隐藏；
——在显示函数里，给"标题"添加高亮class；
——在隐藏函数里，移除高亮。

【事件冒泡】
在页面上可以有多个事件，也可以多个元素响应同一个事件，当页面有多个元素，切都绑定了click事件，当单击子元素的click事件时，会从内到外的触发各个元素的click事件，就像冒泡一样，不断向上直至顶端。

事件冒泡引发的问题：事件冒泡会引发意料之外的效果，本来你只想触发一个事件的，结果全部触发了。
解决方案：
（1）事件对象：在程序中使用事件对象只需为函数添加一个参数：
$("element").blind("click",function(event){
   //
});
（2）停止事件冒泡：停止事件冒泡可以阻止事件中其他对象的事件处理函数执行。jQuery中提供了stopPropagation()方法来停止事件冒泡。
（3）阻止默认行为：网页中的元素有自己默认的行为，如：低级连接会跳转，单击提交按钮后表单会提交，有时候需要阻止元素的默认行为，jQuery提供了preventDefault()方法来阻止默认事件。如果想同时对事件对象停止冒泡和阻止默认行为i，可以在事件处理函数中返回false，这是对在事件对象上同时调用stopPropagation()方法和preventDefault()方法的简写。

例如：在表单事件中可以把   event.preventDefault();改为return false;
（4）事件捕获：事件捕获的过程和事件冒泡的恰好相反，事件捕获是从最顶端往下开始触发。

【事件对象的属性】
jQuery对事件对象的常用属性进行了封装，使得事件处理在各个浏览器上都兼容。
（1）event.type()方法：作用是获取事件的类型。
（2）event.preventDefault()和event.stopPropagation()方法在javascript中对IE是无效的，但是jQUERY对其进行了 封装，使得他得到了兼容。
（3）event.target()方法：作用是获取触发事件的元素，jquery对其进行封装后，避免了各个浏览器不同标准的差异。
（4）event.relatedTarget()：mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget()来访问的。event.relatedTarget()在mouseover中相当于IE中的event.fromElement,在mouseout中相当于IE中的event.toElement()，jquery对其进行封装后，使他兼容各种浏览器。
（5）event.pageX和event.pageY：该方法作用是获取的光标相对于页面的X坐标和Y坐标。
（6）event.which：该方法作于是在鼠标单击事件中获取到鼠标的左中右键，即在键盘事件中获取键盘的按键，如：
$("a").mousedown(function(e){
alert(e.which)     / /1=鼠标左键；2=鼠标中建；3=鼠标右键。
})；
（7）event.metaKey
针对不同浏览器中的<ctrl>按键解释不同，jQuery进行了封装。

【移出事件】
在事件的绑定中，可以多个元素绑定一个事件，亦可以一个元素绑定多个事件，同样也可以移除事件，jQuery提供了unbind()方法
：unbind([type],[data]);
第一个参数是事件类型，第二个参数是将要移除的函数，具体说明如下：
（1）如果没有参数则删除所有绑定的事件；
（2）如果提供了事件类型做参数，则只删除该类型的绑定事件；
（3）如果把在绑定时传递的处理参数作为第二个参数，则只有这个特定的处理函数会被删除。
移除“按钮”<button>元素上注册的事件时，可以只删除其中的一个事件，这个首先得为这些匿名处理函数指定一个变量。
另外，对于只需要触发一次，随后就要立即解除绑定的情况，jQuery提供了一种简写的方式——one()方法，可以为元素绑定事件
处理函数，当处理函数触发一次后，立即被删除。即在每个对象上，事件处理函数只会执行一次。one()方法的结构和bind()方法
的结构相似，用法也相同，使用one()方法为<button>元素绑定单击事件后，只要用户单击1次按钮时，处理函数才会执行，之后单击毫无作用。

【模拟操作】
1、常用模拟
以上例子都是用户必须通过单击按钮，才能触发click事件，但是有时需要模拟用户操作，来达到单击的效果。例如，在用户进入页面后，就触发click事件，而不需要用户去主动单击。
在jQUERY中用trigger()方法完成模拟操作：$("#btn").trigger("click");
这样页面装载完毕后，就会立即输出想要的效果，也可以直接简化写法:$("#btn").click();
2、触发自定义事件
trigger()方法不仅能触发浏览器支持的具有相同名称的事件，也可以触发自定义的事件。
3、传递数据
trigger(type,[data])方法：有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以
数组形式。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的。
4、执行默认操作
trigger()方法触发事件后，会执行浏览器的默认操作。例如表单的focus事件：
$("input").trigger("focus");
会使得<input>元素本生得到焦点。如果只想触发绑定的事件，不想执行浏览器默认操作，可以使用——triggerHandler()方法。
该方法会绑定事件，但不会得到焦点。

到这里jQuery的事件就说完了，还有一些其他的事件，没有具体细则，只有在平时的练习中不断学习和掌握。具体的举例也没说到，有读到的小伙伴就自行琢磨吧！