4_1：事件注册 + 事件处理 + 事件对象

$('input').on('focus',function (event) {
    console.log(event);
});

基本和 webAPI 里面的事件对象一致

$('input').on('focus',function (event) {
    console.log(event);
});

基本和 webAPI 里面的事件对象一致

一事件注册

二事件处理

//2 事件处理 on() 绑定事件
    $("div").on({
        click:function () {
            $(this).css('background','red');
        },//绑定事件1
        mouseenter:function () {
            $(this).css('background','pink');
        },//绑定事件2
        onmouseleave:function () {
            $(this).css('background','green');
        }//绑定事件3
    });

三事件对象

知识梳理

//1 单个注册事件 element.click(function(){});

//2 事件绑定 element.on({可以绑定多个事件});

//3 解绑事件 element.off();

//4 自动触发事件 element.trigger();

一绑定事件 on()

优势

//1 可以绑定多个事件
//2 可以事件委托
//3 可以给 未来动态创建的元素绑定事件

1）语法

element.on(events,[selector],fn);

//1. events:一个或多个用空格分隔的事件类型，如"click"或"keydown" 。

//2. selector: 元素的子元素选择器 。

//3. fn:回调函数 即绑定在元素身上的侦听函数。

2）绑定多个事件

//1 绑定多个事件处理程序
$("div").on({
    click:function () {
        $(this).css('background','red');
    },//绑定事件1
    mouseenter:function () {
        $(this).css('background','pink');
    },//绑定事件2
    onmouseleave:function () {
        $(this).css('background','green');
    }//绑定事件3
});

//2 多个事件处理程序相同
$("div").on('mouseenter mouseleave', function () {
    $(this).toggleClass('current');
}); //鼠标经过加上current 鼠标离开去掉current

3）事件委托

//事件委托
$('ul').on('click',('li'),function () {
    alert('事件委托');
});
//ul 是事件绑定对象  li是事件触发对象

4）可以给未来动态创建的元素绑定事件

//1 单独注册事件 不能给未来创建的元素 绑定事件
$('ul li').click(function () {
　　alert('10');
});
var li = $('<li>我是后创建的</li>');
$('ul').append(li);//这个li 没有点击事件


//2 on() 可以给 未来动态创建的元素 的绑定事件
$('ul').on('click','li',function () {
    alert(10);
});
var li = $('<li>我是后创建的</li>');
$('ul').append(li);

小案例微博发布

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        .box {
             600px;
            margin: 100px auto;
            border: 1px solid #000;
            padding: 20px;
        }

        textarea {
             450px;
            height: 160px;
            outline: none;
            resize: none;
        }

        ul {
             450px;
            padding-left: 80px;
        }

        ul li {
            line-height: 25px;
            border-bottom: 1px dashed #cccccc;
            display: none;
        }

        input {
            float: right;
        }

        ul li a {
            float: right;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>
<body>
<div class="box" id="weibo">
    <span>微博发布</span>
    <textarea name="" class="txt" cols="30" rows="10"></textarea>
    <button class="btn">发布</button>
    <ul>
    </ul>
</div>
<script>
    //1 点击发布按钮 动态创建小li 把文本框的值和删除按钮放入小li中 并把li插入到ul中
    $(".btn").on('click',function () {
        var li = $("<li></li>");
        li.html($('.txt').val() + "<a href='javascript:;'>删除</a>");//把文本框的值赋值给li
        $("ul").prepend(li);
        li.slideDown();//过渡效果 和 css中的 display: none; 配合使用  让元素滑动出来
        $(".txt").val("");//清空输入框
    });
    //2 点击删除 删除留言本身
    // $('ul a').click(function () {  //普通方法 不能给动态生成的元素 添加事件  [这个案例的练习重点]
    //     $(this).parent().remove();
    // });
    //on() 可以给动态生成的元素 绑定事件
    $('ul').on('click','a',function () {
        $(this).parent().slideUp(function () {
            $(this).remove();//这里的this 是 li 不是a
        });
    });
</script>
</body>
</html>

二解绑事件 off()

$('div').off();//1 移除所有事件

$('div').off('click');//2 移除其中一个事件

$('div').off('click mouseenter');//3 移除多个事件 中间用空格分隔

$('ul').off('click','li');//4 解除事件委托
    
// 如果事件只想触发一次  用 one()来绑定 
　 就不存在绑定后再解绑这样的操作了

三自动触发事件 trigger()

$('div').click(); //1 元素.事件

$('div').trigger('click'); //2 元素.trigger('事件名称')

$('div').triggerHandler('click'); //3 元素.triggerHandler() 不会触发元素的默认行为

代码范例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自动触发</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<input type="text">
<script>
    //给input添加 焦点事件
    $('input').on('focus',function () {
        $(this).val('你好');
    });
    //自动触发 但是阻止了默认行为 没有光标闪烁
    $('input').triggerHandler('focus');
</script>
</body>
</html>