jQuery事件学习

$(document).ready()方法 (亦可这样写$(function(){}))和window.onload方法有相似的功能，但在执行时间方面不同

window.onload()实在网页中所有的元素（包括元素所有的关联元素，如图片链接等）完全加载后才执行，而$(document).ready()方法注册的事件处理程序，在DOM完全就绪(并不意味着元素关联文件下载完毕)就可以被调用，提高了Web应用程序的响应速度。

hover(enter,leave)方法：用于模拟光标悬停事件,当光标移动到元素上时会触发第1个函数，当光标移除这个元素时，会触发第二个函数

toggle(fn1,fn2,……)方法用于模拟鼠标连续单击事件，第一次单击触发第一个事件，第二次点击触发第二个事件……

triggerHandler()方法触发被选元素的指定的事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

$("form #name").triggerhandler("blur");

事件问题

事件对象：当触发某一事件时，事件对象就被创建

例如：$("p").on("click",function(e){

e.preventDefault();

console.log("事件对象产生");

})

当点击p的时候，事件对象就产生了，这个对象只能事件处理函数才能访问.

停止事件冒泡：事件冒泡就是，当子元素和父元素绑定了同一事件之后，在触发子元素的事件之后，还会触发父元素上相同的事件，就像水下的泡泡一直向上传递。

例如：<div class="parent">

</div>

js代码：$(function(){

$(".parent").on("click",function(e){

console.log("parent");

});

$(".child_level01").on("click",function(e){

console.log("child_level01");

});

$(".child_level02").on("click",function(e){

console.log("child_level02");

})

当点击span标签时，会发现控制台输出：parent，child_level01，child_level02.

停止冒泡的方法，是在方法中加 e.stopPropagation();

阻止默认行为：网页元素有自己的默认的行为，例如，单击超链接后会跳转、单击提交按钮后表单会提交

preventDefault()方法可以阻止元素的默认行为。

事件捕获：事件捕获和事件冒泡正好是两个相反的过程，事件捕获是从最顶端往下开始触发。

事件对象的属性

event.type :可以获取事件的类型

event.preventdefault():阻止默认行为

event.stopPropagation():阻止事件冒泡

event.target:获取到触发事件的元素

event.relatedTarget:获取到触发事件的相关元素

event.pageX和event.pageY：获取到光标相对于页面的x和y坐标。

event.which:在鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中获取键盘的按键。

event.metaKey:键盘事件中获取<ctrl>按键

转载于:https://www.cnblogs.com/hehy/p/3689206.html

jQuery事件学习相关推荐

jQuery框架学习第五天：事件与事件对象
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
html学习 - jquery事件监听详解
html学习 - jquery事件监听详解 html学习 - jquery事件监听详解监听方法监听方法参数解释 click参数事件自动执行问题解决 bind方法 live方法监听方法在jqu ...
JavaEE学习日志(六十二): jQuery遍历，jQuery事件，省市联动，左右互选
JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇) JavaEE学习日志(六十二) jQuery jQuery遍历传统遍历 jQuery对象遍历 jQuery全局函 ...
jQuery学习笔记03---CSS样式、jQuery事件
1.CSS样式操作 1.1.CSS类: addClass() 为每个匹配的元素添加指定的类名,添加样式 removeClass() 从所有匹配的元素中删除全部或者指定的类,删除样式 toggleCla ...
第79天：jQuery事件总结（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 一.合成事件 jQuery有两个合成事件--hove ...
jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
JQuery进阶学习
JQuery进阶学习的内容 1. 动画 2. 遍历 3. 事件绑定 4. 案例 5. 插一. 动画三种方式显示和隐 ...
DHL:jQuery框架学习使用总结，插件，继续中...
1.基础知识:jQuery事件与事件对象[文章来自学IT网:http://www.xueit.com/html/2009-05/33_2020_00.html] 事件是javascript的灵魂: d ...

jQuery事件学习

jQuery事件学习相关推荐

最新文章

热门文章