jQuery事件

普通事件绑定

1.普通事件绑定 $(css选择器).事件名(function() { ... }) 事件名去掉on。
2.$(对象).on('事件名', function() { ... })

批量事件绑定

如果选择器含有多个自动批量绑定

$('css选择器').事件(function () {
    // $(this)  代表被触发时间的对象
         console.log($(this).html())
    })

对象循环

当jQuery对象中包含了多个DOM对象可以使用each方法进行循环循环中 $(this) 获取到当前循环的对象

$('css选择器').each(function () {
      console.log($(this).html())
    })

绑定一次性事件

$('css选择器').one('click', function () {
        console.log($(this).html())
    })

动态追加的元素事件处理

动态添加li的函数
1.利用给已绑定对象添加类名作为标识标识是否被绑定过了

function f() {
    $('#myul').append('<li>' + ($('#myul li').length + 1) + '</li>')
     $('#myul li').not('.is-click').click(function () {
         console.log($(this).html())
    }).addClass('is-click')
 }

.append（）：添加标签
.not（）：排除
.addclass（）：增加类名

2.重新绑定之前把已经绑定过的对象的事件先移除绑定再全部重新绑

function f() {
$('#myul').append('<li>' + ($('#myul li').length + 1) + '</li>');
    // unbind() 去除掉指定的绑定事件名
     $('#myul li').unbind('click').click(function () {
         console.log($(this).html())
    })
 }

$('#myul li').click(function () {
    console.log($(this).html())
 })

3.直接给新增对象单独绑定

function f() {
    var li = $('<li>' + ($('#myul li').length + 1) + '</li>');
    li.click(function () {
         console.log($(this).html())
    })
     $('#myul').append(li);
 }
$('#myul li').click(function () {
     console.log($(this).html())
 })

鼠标输入输出事件（hover）

鼠标输入输出事件 $(选择器).hover(移入, 移出)

$('css选择器').hover(function () {
   $(this).css('background', 'yellow')
    },function(){
   $(this).css('background', 'red')
}) 
//  移出效果不需要可以用$.noop（空函数）代替function

事件对象（event）

$('#myin').keyup(function (event) {
console.log(ev.keyCode)
console.log(ev.originalEvent)
 })

resize

当对象发生改变，一般用于window

窗口大小发生改变
$(window).resize(function () {
     // 获取到当前窗口的宽 和 高
     console.log($(window).width(), $(window).height())
 }).trigger('resize');

.trigger（）：在每一个匹配的元素上触发某类事件。