jquery14 on() trigger() : 事件操作的相关方法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="jquery-2.0.3.js"></script>
<script> jQuery.event = {
global 事件的全局属性(源码还没用到)
add 绑定事件
remove 取消事件
trigger 主动触发事件
dispatch 配发事件的具体操作
handlers 函数执行顺序的操作
props JQ中共享原生JS的event属性
fixHooks 收集event兼容的集合
keyHooks 键盘的event兼容
mouseHooks 鼠标的event兼容
fix event对象的兼容处理
special 特殊事件的处理
simulate focusin的模拟操作(trigger , dispatch)
}; jQuery.Event = function(){};
jQuery.Event.prototype = {
isDefaultPrevented
isPropagationStopped
isImmediatePropagationStopped
preventDefault
stopPropagation
stopImmediatePropagation
}; jQuery.fn.extend({
on
one
off
trigger
triggerHandler
}); //6720
.click();
.mouseover();
jQuery.fn.extend({
hover
bind
unbind
delegate
undelegate
}); $(function(){ $('#div1').on('click',function(){
alert(123);
}); $('#div1').on('click',{name:'hello'},function(ev){
alert(ev.data.name);
});
-----------------------------------------------------------------------
//ul要是li的父级或者主线节点
/*
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );//this=$('ul')
},
*/
$('ul').delegate('li','click',{name:'hello'},function(){
$(this).css('background','red');//点击li,li变红，这个点击其实是ul身上，通过委托加到了li身上
});
$('ul').on('click','li',{name:'hello'},function(){//这也是委托，on有selector就是委托
$(this).css('background','red');
});
-----------------------------------------------------------------------
$('#div1').on('click',function(){
alert(123);
});
$('#div1').on('mouseover',function(){
alert(456);
}); $('#div1').on({
'click' : function(){
alert(123);
},
'mouseover' : function(){
alert(456);
}
});
-----------------------------------------------------------------------
$('#div1').one('click',function(){//只执行一次
alert(123);
});
-------------------------------------------------------------------
$('#input1').focus(function(){
$(this).css('background','red');
}); $('#input1').trigger('focus');//触发focus事件
$('#input1').triggerHandler('focus'); //触发focus事件，但是光标不会移进去，不会触发当前事件的默认行为 }); </script>
</head> <body>
<div id="div1">div</div>
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
<input type="text" id="input1">
</body>
</html>
jquery14 on() trigger() : 事件操作的相关方法的更多相关文章
- jquery15 on() trigger() : 事件操作的相关方法
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- trigger事件模拟
事件模拟trigger 在操作DOM元素中,大多数事件都是用户必须操作才会触发事件,但有时,需要模拟用户的操作,来达到效果. 需求:页面初始化时触发搜索事件并获取input控件值,并打印输出(效果图如 ...
- jq事件操作汇总
bind() 向匹配元素附加一个或更多事件处理器blur( ) 触发.或将函数绑定到指定元素的 blur 事件change() 触发.或将函数绑定到指定元素的 ...
- jQuery 事件操作
入口函数 使用$(document).ready(()=>{})作为jQuery入口函数,与window.onload(()=>{})类似,但它不会等待图片等外部资源的加载完毕,而是在HT ...
- HTML 事件(四) 模拟事件操作
本篇主要介绍HTML DOM中事件的模拟操作. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流与事件委托 4. ...
- Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...
- （旧）子数涵数·Flash——影片剪辑的事件操作
一.综述 1.概念:影片剪辑的事件操作,就是onClipEvent命令,就如同在按钮上使用的on命令. 2.方法:onClipEnvent(参数){命令} 3.参数:onClipEnvent有许多的参 ...
- U3D Trigger事件触发
使用Trigger事件触发,可以达到虽然触发了,可是不改变任何效果. 这个是进入时候触发的: void OnTriggerEnter2D(Collider2D other) { print (othe ...
- 10-JavaScript之DOM的事件操作
JavaScript之DOM的事件操作 1.介绍 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等 ...
随机推荐
- Struts2 | struts.xml文件中使用method属性和通配符简化action标签和Action处理类的编写
转自:https://www.jianshu.com/p/310e89ee762d 在Struts2框架中,我们知道基本的Action标签只能实现一个url请求对应一个Action处理类.那么我们如果 ...
- Strings are immutable
It is tempting to use the [] operator on the left side of an assignment, with the intention of chang ...
- hbase伪分布安装配置
hbase1.2.4 伪分布式安装 注意:在安装hbase或者hadoop的时候,要注意hadoop和hbase的对应关系.如果版本不对应可能造成系统的不稳定和一些其他的问题.在hbase的lib ...
- Android框架-Volley(一)
1. Volley简介 我们平时在开发Android应用的时候不可避免地都需要用到网络技术,而多数情况下应用程序都会使用HTTP协议来发送和接收网络数据.Android系统中主要提供了两种方式来进行H ...
- Saying Good-bye to Cambridge Again
Saying Good-bye to Cambridge Again Very quietly I take my leave, As quietly as I came here; ...
- koda java
https://kodejava.org/category/spring/spring-jdbc/
- Mojo For Chromium Developers1
Mojo For Chromium Developers Overview This document contains the minimum amount of information neede ...
- js字符串排序方法
前端开发过程中有时需自己手写排序方法 一般想到数字的字符串排序方法 我们会用到 var newArr = arr. sort(function(a,b){return a - b})来进行排序 但除此 ...
- 使用let's encrypt为你的Ubuntu14+nginx网站保驾护航！
finch最近正在研究一个新的网站系统,闲的没事想搞搞ssl,结果搞了两天,遇到很多问题,现在记录并分享一下经验. 环境之前搭建好了是Ubuntu14+nginx+php5+mysql 现在开始使用l ...
- 轻松学习之Linux教程四 神器vi程序编辑器攻略
本系列文章由@超人爱因斯坦出品,转载请注明出处. 文章链接: http://hpw123.net/a/Linux/Linuxjichu/2014/1026/93. ...