jQuery-常用事件及用例 284

通过具体示例了解运用各常用事件及区别

1) ready()当Dom树加载完毕就要执行的函数,即JaveScript中的页面加载事件

JQ的(ready)与JS的(onload)加载事件区别:1)前者只要Dom树加载完毕后即可执行,后者还需要加载外部资源(数据,图片,js等)2)前者可多次执行js实现鼠标移上去显示详细信息,后者只执行一次3)执行先后次序以JQ版本不同两种先后执行次序也不同

//JQ加载事件
//方式1
$(function () {
    console.log('JQ加载事件的简写形式');
});
//方式2
$(document).ready(function () {
    console.log('JQ加载事件的原本形式');
});
//JS加载事件
window.onload = function () {
    console.log('JS加载事件');
}

JS与JQ书写格式; 此版本执行次序JS,JQ

2) on(): 在选择元素上绑定一个或多个事件的事件处理函数

//两个参数与三个参数绑定事件的着重点不同
//两个参数 为当前元素绑定事件
 $('#dv1').on('click', function () {
     alert('div绑定了一个单击事件');
 });
 //三个参数 为父元素下匹配的子元素绑定事件
 $('#dv1').on('mousemove',$('p'), function () {
     alert('p绑定了一个鼠标移动事件');
 });

3)click(fn) 当鼠标指针在匹配元素的上方,按下并松开鼠标左键或者调用click()方法都会触发click事件

$('#dv1').click(function () {
     alert('div绑定了一个单击事件');
 });
//调用click事件
$(document).ready(function(){
  $('#dv1').click(function(){
    $('p').click();
  });
});

4) dblclick(fn) 当双击元素时就会触发例如用于修改节点上的文本

5) focus(fn) 当元素获得焦点时js实现鼠标移上去显示详细信息,触发 focus 事件,通过鼠标点击或者键盘上的Tab导航触发。

6) blur(fn) 当元素失去焦点时就会触发blur事件,一般用在文本框元素上

示例:通过以上三个事件修改p标签文本(只能修改一次,动态生成元素需要重新绑定)

    
修改文本

$('p').dblclick(function () {//双击事件
     //获取p文本
     var txt = $('p').text();
     //创建文本框标签,将p标签文本设置为文本框内容
     var inp = $('');
     //删除p标签
     $('#dv1').empty();
     //将文本框加入div中
     $('#dv1').append(inp);
      //获取焦点事件
     inp.focus();
     //失去焦点事件
     inp.blur(function () {
         //获取修改后的值
         var str = inp.val();
         //清除文本框元素
         $('#dv1').empty();
         //动态创建p元素,追加到div中并且为p赋修改后的值
         $('
').appendTo($('#dv1')).text(str);
     });
 });

7) keydown(fn) 当键盘按下时触发,例如获取键盘按键的ASCII码

$(document).keydown(function (e) {
    var k = e.keyCode;//获取用户按下的ASCII码
    //小游戏控制 左上右下 的方向按钮
    console.log('按键为: '+String.fromCharCode(k)+'    ASCII码为: '+k);
});

获取键盘按键

8) keyup(fn) 按下键盘的键弾起后触发的事件,检测文本框字符个数

$('input').keyup(function () {
    if ($('input').val().length < 6) {
        console.log($('input').val());
    } else {
        $('input').val('内容不能少于6个字符');
    }
})

9) keypress(fn) keypress 事件与 keydown 事件类似,但是keypress 事件不会触发比如 ctrl,alt,shift,esc键,所以需要使用 keydown() 方法来检查这些键;按下键盘会触发键盘事件顺序依次为：keydown->keypress->keyup.

keydown,keypress事件触发在文字还没敲进文本框,只是按下字符键显示的结果即得到的是触发键盘事件前的文本而keyup是事件触发整个键盘事件的操作已经完成,获得的是触发键盘事件后的文本;对中文输入法不友好,无法响应中文输入;

10) mousedown(fn) 当鼠标指针移动注册事件的元素上方,并按下鼠标按键时触发

11) mouseup(fn) 当用户在注册的元素上放开松鼠标按钮时会触发

Mouse Down是鼠标按下触发的动作;Mouse Up是鼠标抬起触发的动作;Click就是在被注册事件的元素上面鼠标按下又抬起时触发的事件

var btn = $('input[type="button"]');
btn.mousedown(function () {
    btn.css('color', 'red');//前景色
}).mouseup(function () {
    btn.css('color', 'blue');
})

12) mousemove(fn) 当鼠标指针在指定的元素中移动时就会触发

//在整个文档页面中移动
$(document).mousemove(function (e) {
    //鼠标指针距离窗口可视区域的左/上边距
    console.log(e.clientX+'  '+e.clientY);
});

13) mouseover(fn)与mouseenter(fn)

mouseover：不论鼠标指针穿过被选元素或其子元素都会触发

mouseenter：只有在鼠标指针穿过被选元素时时才会触发

14) mouseout(fn)与mouseleave(fn)

mouseout事件：不论鼠标指针离开被选元素还是任何子元素都会触发

mouseleave事件：只有在鼠标指针离开被选元素时才会触发

4事件测试

    


$('#dv1').mouseover(function () {
    console.log('mouseover 1');//自身与子元素
}).mouseenter(function () {
    console.log('mouseenter 2');//自身
}).mouseout(function () {
    console.log('mouseout 3');//自身与子元素
}).mouseleave(function () {
    console.log('mouseleave 4');//自身
});

15) hover(fn) 鼠标移入移出时触发,是mouseover与mouseout事件的结合体

 $('#dv1').hover(function () {
     $('#dv1').css('background-color', 'red');
 }, function () {
     $('#dv1').css('background-color', 'yellow');
 });

16)resize(fn) 当改变浏览器窗口的大小时触发

$(window).resize(function (e) {
    $('#dv1').html($(window).width());
});

17) scroll(fn) 当用户滚动指定的元素时触发

在样式中设置属性overflow:scroll;

    13) mouseover(fn)与mouseenter(fn)
    mouseover：不论鼠标指针穿过被选元素或其子元素都会触发           
    mouseenter：只有在鼠标指针穿过被选元素时时才会触发
    14) mouseout(fn)与mouseleave(fn) 
    mouseout事件：不论鼠标指针离开被选元素还是任何子元素都会触发
    mouseleave事件：只有在鼠标指针离开被选元素时才会触发

 
var num = 0;
 $('#dvScroll').scroll(function () {
     $('p').text('滚动了' + ++num + '次');
 });

18) select(fn) 当 textarea 或文本类型的input元素中的文本被选择时触发

$("input").select(function(){
    alert("文本已选中!");
  });

19) submit(fn) 当单击表单的提交按钮时就会触发该事件只适用于表单元素

$("form").submit( function () {
  alert('数据已提交');
} );

20) change(fn) 元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。

$("input").change(function() { alert("文本内容被改变"); }); 

还有很多其它不常用的事件不再一一列举说明,遇到了可以百度一下