jQuery基础_事件
来源:互联网 发布:推荐股票的软件 编辑:程序博客网 时间:2024/05/16 10:20
0.event.type返回事件类型
1.click与dbclick事件
注意,除了click(function(){})外还有,双参数形式。
click(1111,fun);
function fun(e){e.data;//1111}
mousedown,mouseup注意触发时区域,且可以用event.which来区别,event.which=1为左键,2为中键,3为右键。
2.mouseover,mouseout事件
可以用event对象.pageX,.pageY来传递鼠标移动时的坐标
ie独有的mouseenter和mouseleave事件有相同作用,但是区别是,mouseenter与mouseleave自动停止了冒泡,相当于mouseover里封装了阻止冒泡方法。
类似的还有hover,可以减少代码量,传入两个回调函数即可,$().hover(funIn,funOut)
// hover()方法是同时绑定 mouseenter和 mouseleave事件。 // 我们可以用它来简单地应用在 鼠标在元素上行为 $("p").hover( function() { $(this).css("background", 'red'); }, function() { $(this).css("background", '#bbffaa'); } );
3.获得焦点触发事件focusin()
配合失焦事件focusout()
同样也有不支持冒泡的blur与focus事件
4.change事件
<input>,<textarea>,<select>元素的值都是可以发生改变的,可以通过change事件来监听这些改变。
文本的话,失焦时若有改变则触发,选项则是作出选择时触发。
5.select事件
在textarea或input元素中文本被选择时,触发select事件,select事件只能用于这两个标签。
http://www.imooc.com/code/9799
这里题目使用搜狗浏览器会弹出三次。这是浏览器默认行为导致的。表单元素中常见
$("input").select(function(e){ alert(e.target.value); // return false; //stopPropagation(); //e.preventDefault() }) $("#bt1").click(function(){ $("input").select(); })用jQuery对象调用弹出三次
$("input").select();用原生js对象是两次
$("input")[0].select();可以理解为调用函数执行一次,但是执行函数会引发对应jQuery对象与原生js对象的选中行为,从而再次引发函数调用!这就是弹出多次的原因。
这可以用return false阻止函数被再次调用,或者用阻止浏览器默认行为的e.preventDefault(),或者阻止冒泡。
6.submit事件
在用户提交时,验证表单输入的正确性,若错误终止提交。
同样因为是表单元素中使用,要注意阻止浏览器默认行为(默认跳转等,有些浏览器阻止了提交,但是还是会跳转页面),加return false;
7.keydown,keyup,keypress
keyup是在松开键盘字符后触发,看起来是输入同步的。
keydown是在敲击键盘字符时触发,因为敲击时,字符还未来得及输入,所以若alert出来是空值,再次敲击才能输出前一个敲击的字符。
keypress与keydown/keyup的区别是:
(1)只能捕获单个字符,不能捕获组合键
(2)无法响应系统功能键
(3)不区分小键盘与主键盘的数字字符
故而keydown,keyup处理keypress不能处理的功能键(f1-f12等),keypress主要用来接收字母数字等ANSI字符。
8.多事件绑定on,删除off事件
多个事件绑定同一个函数
$("#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还有一个参数,过滤器:
$("div").on("click","p",fn)
事件委托(利用冒泡):点击p子元素a时,会向上一层层冒泡直到div,加了p过滤器,使得将事件委托给了p,即点击a冒泡遇到p则执行事件,继续冒泡,若无p了则不执行事件。
删除事件,所有事件:
$("elem").on("mousedown mouseup",fn)
$("elem").off()
9.event.target
代表当前触发事件的元素,用于事件冒泡时处理事件委托,判断元素。
在事件委托中:
<ul> <li>点击:触发一</li> <li>点击:触发二</li> <li>点击:触发三</li> <li>点击:触发四</li></ul>
$("ul").on('click',function(e){ alert('触发的元素是内容是: ' +e.target.textContent) })
上面这个例子中,点击li,冒泡触发事件,this为ul,target为li。
event.target!=this
event.currentTarget==this
this,event.currentTarget是会随冒泡变化的,但是event.target不会,他是直接引发事件的DOM元素。
注意:他们都是DOM对象,用$(this),$(event.target)转换为jQuery元素。
10.事件触发器与自定义函数trigger()
同样可以传参数。详见http://www.imooc.com/code/10155这个例子。
用法:
$('#elem').trigger('click');
trigger会触发浏览器默认、原生行为,此时使用triggerHandler()。
它只影响第一个匹配到的元素,不会冒泡,不会触发浏览器默认行为,这个例子很好的说明了triggerHandler既没有冒泡也没有触发默认聚焦事件。
-----------------------------------------------------------------------------------
ps:附加
parseInt(“”,10)意思是用10进制解析前面字符串,将之变为int,即“11”为11。
- jQuery基础_事件
- JavaScript_基础_事件
- jQuery基础_动画
- jQuery基础事件-绑定事件
- jQuery基础事件-事件简写
- jquery基础三 事件
- JQuery 基础事件
- jQuery Mobile 基础事件
- 8.jQuery 基础事件
- jQuery--基础事件
- jQuery基础事件
- jQuery基础事件
- jQuery基础事件
- jQuery基础-事件篇
- jQuery基础(三、事件)
- Jquery基础2-事件
- jQuery基础之四 -- 事件
- 4、jQuery基础重点事件
- pv和uv
- 数据库连接池原理
- 00 我读Thinking in java(第四版)
- (Selenium) The Firefox browser preference setting is stored in profile
- linux设备驱动之USB主机控制器驱动分析
- jQuery基础_事件
- no model named caffe
- 敏捷开发论坛会
- 网络游戏开发(二)
- python的模块和包机制:import和from..import..
- 让PowerDesigner支持SQlite
- 关于iOS内存管理的规则思考
- 业务架构精简元模型
- Web开发——如何使JDBC插入数据的时候返回自动增长的主键值