JQuery--事件

一、鼠标事件

1、click 与 dbclick

用法一：<div id="test">点击触发<div>$("ele").click(function(){      // 点击元素，触发事件alert('触发指定事件')
})$("#test").click(function(){   //   this 指向div元素$("ele").click()  //手动指定触发事件
});

用法二：<div id="test">点击触发<div>
$("#test").click(11111,function(e) {//this指向 div元素//e.data  => 11111 传递数据
});eg:
<div class="test3"><p>$('.right').click(1111, set)</p></div><button>不同函数传递数据</button><script type="text/javascript">//不同函数传递数据function data(e) {alert(e.data) //1111
        }function a() {$("button:eq(2)").click(1111, data)}a();</script>

dbclick 与 click 用法基本相同。

2、mousedown 与 mouseup

用法与 click 基本相同。

3、mousemove

该事件在鼠标指针移动时触发，用法与 click 基本相同。

4、mouseover 与 mouseout

用法与 click 基本相同。

5、mouseenter 与 mouseleave

用法与 click 基本相同，它们与 mouseover 和 mouseleave 的本质区别是只会在绑定它的元素上被调用，而不会在后代节点上被触发。使用 mouseenter 与 mouseleave 可以避免冒泡问题。

6、hover

在元素上移进移出切换颜色
$(ele).mouseenter(function(){$(this).css("background", '#bbffaa');})
$(ele).mouseleave(function(){$(this).css("background", 'red');
})使用hover函数：
$(selector).hover(handlerIn, handlerOut)
// handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
// handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

7、focusin

当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件，用法与 click 相同。

8、focusout

作用于 focusin 相反，用法与 focusin 相同。

二、表单事件

9、blur 与 focus

它们与 focusin 和 focusout 的本质区别是是否支持冒泡。

10、change

<input>元素，<textarea>和<select>元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作。

<body><h2>input、textarea与select</h2><div class="left"><div class="aaron">input：<input class="target1" type="text" value="监听input的改变" /></div><div class="aaron1">select：<select class="target2"><option value="option1" selected="selected">Option 1</option><option value="option2">Option 2</option></select></div><div class="aaron3">textarea：<textarea class="target2" rows="3" cols="20">多行的文本输入控件</textarea></div></div>
    输出结果：<div id="result"></div><script type="text/javascript">//监听input值的改变//监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。$('.target1').change(function(e) {$("#result").html(e.target.value)});//监听select：//对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发$(".target2").change(function(e) {$("#result").html(e.target.value)})//监听textarea：//多行文本输入框，当有改变时，失去焦点后触发change事件$(".target3").change(function(e) {$("#result").html(e.target.value)})</script>
</body>

11、select

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

select事件只能用于<input>元素与<textarea>元素。

用法与 click 相同

12、submit

<div id="test">点击触发<div>
$("ele").submit(function(){alert('触发指定事件')
})
$("#text").click(function(){$("ele").submit()  //指定触发事件
});<form id="target" action="destination.html"><input type="submit" value="Go" />
</form>
$("#target").submit(function() { //绑定提交表单触发//this指向 from元素
});<form id="target" action="destination.html"><input type="submit" value="Go" />
</form>
$("#target").submit(11111,function(data) { //绑定提交表单触发//data => 1111 //传递的data数据
});

具体能触发submit事件的行为：

<input type="submit">
<input type="image">
<button type="submit">
当某些表单元素获取焦点时，敲击Enter（回车键）

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为。传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可：

$("#target").submit(function(data) { return false; //阻止默认行为，提交表单
});

三、键盘事件

13、keydown 与 keyup

同 mousedown 与 mouseup 类似。

14、keypress

keypress 同 keydown 非常类似，它们的主要区别是，keypress ：

只能捕获单个字符，不能捕获组合键
无法响应系统功能键（如delete，backspace）
不区分小键盘和主键盘的数字字符

总而言之，KeyPress主要用来接收字母、数字等ANSI字符，而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

四、事件的绑定和解绑

15、on()

jQuery on() 方法是官方推荐的绑定事件的一个方法。

基本用法：.on( events ,[ selector ] ,[ data ] ) $("#elem").click(function(){}) //快捷方式 $("#elem").on('click',function(){}) //on方式多个事件绑定同一个函数： $("#elem").on("mouseover mouseout",function(){ }); 多个事件绑定不同函数： $("#elem").on({ mouseover:function(){}, mouseout:function(){} }); 将数据传递到处理程序： function greet( event ) { alert( "Hello " + event.data.name ); //Hello 慕课网 } $( "button" ).on( "click", { name: "慕课网" }, greet );

on的高级用法，委托机制：
.on( events ,[ selector ] ,[ data ], handler(eventObject) 例如：
<div class="left"><p class="aaron"><a>目标节点</a> //点击在这个元素上</p>
</div>

$("div").on("click","p",fn)
//事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数

16、off()

与 on 相反，off 用来移除事件绑定。

绑定2个事件
$("elem").on("mousedown mouseup",fn)删除一个事件
$("elem").off("mousedown")删除所有事件
$("elem").off("mousedown mouseup")快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
$("elem").off()

五、事件对象的使用

17、event 事件对象

事件中的Event对象容易被初学者忽略掉，可能大多时候初学者不知道怎么去用它，但有些时候它还是非常有用的，例如：

ul><li class="even1"></li><li class="even2"></li><li class="even2"></li>
    .........
</ul>

ul 有 N 个子元素 li (这里只写了3个)，如果我要响应每一个li的事件，那么常规的方法就是需要给所有的li都单独绑定一个事件监听，这样写法很符合逻辑，但是同时有显得繁琐。

因为li都有一个共同的父元素，而且所有的事件都是一致的，这里我们可以采用要一个技巧来处理，也是常说的"事件委托"

事件没直接和li元素发生关系，而且绑定父元素了。由于浏览器有事件冒泡的这个特性，我们可以在触发li的时候把这个事件往上冒泡到ul上，因为ul上绑定事件响应所以就能够触发这个动作了。唯一的问题怎么才知道触发的li元素是哪个一个？

这里就引出了事件对象了：

事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

event.target：target 属性可以是注册事件时的元素，或者它的子元素。通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。

<body><h3>事件委托，通过事件对象区别触发元素</h3><div class="left"><div class="aaron"><ul><li>点击：触发一</li><li>点击：触发二</li><li>点击：触发三</li><li>点击：触发四</li></ul></div></div><script type="text/javascript">//多事件绑定一$("ul").on('click',function(e){alert('触发的元素是内容是: ' + e.target.textContent)})</script>
</body>

18、event 的属性和方法

event.type：获取事件的类型

$("a").click(function(event) {alert(event.type); // "click"事件
});

event.pageX 和 event.pageY：获取鼠标当前相对于页面的坐标

通过这2个属性，可以确定元素在当前页面的坐标值，鼠标相对于文档的左边缘的位置（左边）与 （顶边）的距离，简单来说是从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

event.preventDefault() 方法：阻止默认行为

这个用的特别多，在执行这个方法后，如果点击一个链接（a标签），浏览器不会跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)被调用过了

event.stopPropagation() 方法：阻止事件冒泡

事件是可以冒泡的，为防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数

event.which：获取在鼠标单击时，单击的是鼠标的哪个键

event.which 将 event.keyCode 和 event.charCode 标准化了。event.which也将正常化的按钮按下(mousedown 和 mouseupevents)，左键报告1，中间键报告2，右键报告3

event.currentTarget : 在事件冒泡过程中的当前DOM元素
```
冒泡前的当前触发事件的DOM对象, 等同于this.
```

this和event.target的区别：

js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

.this和event.target都是dom对象

如果要使用jquey中的方法可以将他们转换为jquery对象。比如this和$(this)的使用、event.target和$(event.target)的使用；

六、自定义事件

19、trigger

众所周知类似于mousedown、click、keydown等等这类型的事件都是浏览器提供的，通俗叫原生事件，这类型的事件是需要有交互行为才能被触发。

在jQuery通过on方法绑定一个原生事件：

$('#elem').on('click', function() {alert("触发系统事件")});

alert需要执行的条件：必须有用户点击才可以。如果不同用户交互是否能在某一时刻自动触发该事件呢？正常来说是不可以的，但是jQuery解决了这个问题，提供了一个trigger方法来触发浏览器事件：

$('#elem').trigger('click');

trigger 是什么？

简单来讲就是：根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

trigger除了能够触发浏览器事件，同时还支持自定义事件，并且自定义时间还支持传递参数：

$('#elem').on('Aaron', function(event,arg1,arg2) {alert("自触自定义时间")});
$('#elem').trigger('Aaron',['参数1','参数2'])

20、triggerHandler

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡。

trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题：事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替。

triggerHandler与trigger的用法是一样的，重点看不同之处：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

<body>
<h2>自定义事件triggerHandler</h2>
<div class="left"><div id="accident"><a>triggerHandler事件</a><input type="text"></div><button>事件冒泡,触发浏览器默认聚焦行为</button><br><br><button>不会冒泡，不触发浏览器默认聚焦行为</button>
</div>
<script type="text/javascript">//给input绑定一个聚焦事件$("input").on("focus",function(event,title) {$(this).val(title)});$("#accident").on("click",function() {alert("trigger触发的事件会在 DOM 树中向上冒泡");});//trigger触发focus$("button:first").click(function() {$("a").trigger("click");$("input").trigger("focus");});//triggerHandler触发focus$("button:last").click(function() {$("a").triggerHandler("click");$("input").triggerHandler("focus","没有触发默认聚焦事件");});
</script>
</body>

转载于:https://www.cnblogs.com/unique1319/articles/7121810.html

JQuery--事件相关推荐

第79天：jQuery事件总结（二）
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 一.合成事件 jQuery有两个合成事件--hove ...
49 jQuery事件
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery事件注册单个事件注册语法: element.事件(function() ...
JQuery事件绑定，bind与on区别
jquery事件绑定 bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元 ...
jQuery事件的链式写法
<head> <title>jQuery事件的链式写法</title> <script src="jquery-1.9.1.js&q ...
2017-6-3 jQuery 事件 DOM操作
1. jQuery 事件: ////hover:相当于相当于把mouseover()mouseout()合二为一//$("#div1").hover(function ()//{/ ...
jQuery事件之鼠标事件
jQuery事件之鼠标事件鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发. ...
jQuery 事件用法详解
目录简介实现原理事件操作绑定事件解除事件触发事件事件委托事件操作进阶阻止默认事件阻止事件传播阻止事件向后执行命名空间自定义事件事件队列 jquery中文文档简介 jque ...
jQuery 事件绑定方法（bind hover toggle live.... ）、删除事件方法（unbind, die）及事件对象
事件绑定方法: 1.<type>(function) $("button").click(function(){... }); 2.bind(map) $(" ...
JQuery-学习笔记06【高级——JQuery事件绑定和切换】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
什么是 jQuery 事件
jQuery事件是DOM事件的封装,同时支持自定义的扩展.在程序设计中,事件和代理有着相似的作用: 它们提供了一种机制,使得行为的实现方式和调用时机可以分离. 不谈jQuery,DOM本身就提供了一系 ...

JQuery--事件

JQuery--事件相关推荐

最新文章

热门文章