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。