JQ8 基础事件

/ 0评 / 0

绑定事件

jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数:bind(type, [data], fn),type 表示一个或多个类型的事件名字符串;[data]是可选的,作为event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象;fn 表示绑定到指定元素的处理函数。

$('input').bind('click', function () {//点击按钮后执行匿名函数

                 alert('弹窗!');

});

$('input').bind('click', 123, function (e) {//[data]额外的数据为数字

                  alert(e.data);

});

$('input').bind('click', 'abc', function (e) {//[data]额外的数据为字符串

                  alert(e.data);

});

$('input').bind('click', [1,2,3,'a','b'], function (e) {//[data]额外的数据为数组

                 alert(e.data[3]);

});

$('input').bind('click', {user : 'Li', age : 100}, function (e) {//[data]额外的数据为对象

                 alert(e.data.age);

});

 

$('input').bind('click', fn);//执行普通函数式无须圆括号

function fn() {

                alert('处理函数!')

}

//同时绑定多个事件

$('input').bind('mouseout mouseover', function () { //移入和移出分别执行一次

  $('div').html(function (index, value) {

     return value + '1';

   });

});

//通过对象键值对绑定多个参数

$('input').bind({ //传递一个对象

  'mouseout' : function () { //事件名的引号可以省略

    alert('移出');

   },

  'mouseover' : function () {

    alert('移入');

   }

});

//使用unbind 删除绑定的事件

$('input').unbind(); //删除所有当前元素的事件

//使用unbind 参数删除指定类型事件

$('input').unbind('click'); //删除当前元素的click 事件

//使用unbind 参数删除指定处理函数的事件

function fn1() {

    alert('点击1');

}

function fn2() {

    alert('点击2');

}

$('input').bind('click', fn1);

$('input').bind('click', fn2);

$('input').unbind('click', fn1); //只删除fn1 处理函数的事件

                                                                      简写事件

方法名 触发条件 描述
click(fn)  鼠标 触发每一个匹配元素的click(单击)事件
dblclick(fn) 鼠标 触发每一个匹配元素的dblclick(双击)事件
mousedown(fn) 鼠标 触发每一个匹配元素的mousedown(点击后)事件
mouseup(fn) 鼠标 触发每一个匹配元素的mouseup(点击弹起)事件
mouseover(fn) 鼠标 触发每一个匹配元素的mouseover(鼠标移入)事件mouseout(fn)
mouseout(fn) 鼠标 触发每一个匹配元素的mouseout(鼠标移出)事件
mousemove(fn)  鼠标 触发每一个匹配元素的mousemove(鼠标移动)事件
mouseenter(fn)  鼠标 触发每一个匹配元素的mouseenter(鼠标穿过)事件
mouseleave(fn)  鼠标 触发每一个匹配元素的mouseleave(鼠标穿出)事件
keydown(fn)  键盘 触发每一个匹配元素的keydown(键盘按下)事件
keyup(fn)  键盘 触发每一个匹配元素的keyup(键盘按下弹起)事件
keypress(fn)  键盘 触发每一个匹配元素的keypress(键盘按下)事件
unload(fn)  文档 当卸载本页面时绑定一个要执行的函数
resize(fn)  文档 触发每一个匹配元素的resize(文档改变大小)事件
scroll(fn)  文档 触发每一个匹配元素的scroll(滚动条拖动)事件
focus(fn)  表单 触发每一个匹配元素的focus(焦点激活)事件
blur(fn) 表单 触发每一个匹配元素的blur(焦点丢失)事件
focusin(fn)  表单 触发每一个匹配元素的focusin(焦点激活)事件
select(fn)  表单 触发每一个匹配元素的select(文本选定)事件
change(fn)  表单 触发每一个匹配元素的change(值改变)事件
submit(fn)  表单 触发每一个匹配元素的submit(表单提交)事件

注意:这里封装的大部分方法都比较好理解,重点几个需要注意区分的简写方法。

.mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么jQuery 还封装了另外一组:.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢?是:.mouseenter()和.mouseleave()这组穿过子元素不会触发,而.mouseover()和.mouseout()则会触发。

//HTML 页面设置

<div style="width:200px;height:200px;background:green;">

    <p style="width:100px;height:100px;background:red;"></p>

</div>

<strong></strong>

//mouseover 移入

$('div').mouseover(function () { //移入div 会触发,移入p 再触发

    $('strong').html(function (index, value) {

        return value+'1';

     });

});

//mouseenter 穿过

$('div').mouseenter(function () { //穿过div 或者p

    $('strong').html(function (index, value) { //在这个区域只触发一次

        return value+'1';

     });

});

//mouseout 移出

$('div').mouseout(function () { //移出p 会触发,移出div 再触发

    $('strong').html(function (index, value) {

       return value+'1';

     });

});

//mouseleave 穿出

$('div').mouseleave(function () { //移出整个div 区域触发一次

     $('strong').html(function (index, value) {

        return value+'1';

      });

});

.keydown()、.keyup()返回的是键码(键盘上的任意键),而

.keypress() 返回的是字符编码(键盘上可以输出的字符的键)。

$('input').keydown(function (e) {

      alert(e.keyCode); //按下a 返回65

});

//charCode 属性只有在发生keypress 事件才包含值,而且这个值是按下的那个键所代表字符的ASCII 编码

$('input').keypress(function (e) {

       alert(e.charCode); //按下a 返回97

       alert(String.fromCharCode(e.charCode));

});

PS:可以使用String.fromCharCode()将ASCII 编码转换成实际的字符。

.focus()和.blur()分别表示光标激活和丢失,事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失,但事件触发时机可以是子元素。

<div style="width:200px;height:200px;background:red;">

     <input type="text" value="" />

</div>

<strong></strong>

//focus 光标激活

$('input').focus(function () { //当前元素触发

    $('strong').html('123');

});

//focusin 光标激活

$('div').focusin(function () { //绑定的是div 元素,子类input 触发

    $('strong').html('123');

});

注意:.blur()和.focusout()表示光标丢失,和激活类似,一个必须当前元素触发,一个可以是子元素触发。

发表评论

电子邮件地址不会被公开。 必填项已用*标注