jquery事件注册
jquery事件处理
jquery事件对象

# jquery事件注册

# 单个事件注册

语法：

element.事件(function(){})
$("div").click(function(){}事件处理程序)

其他事件和原生基本一致

比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll

# jquery事件处理

# 事件处理on()绑定事件

on()方法在匹配元素上绑定一个或多个事件的事件处理函数

语法∶

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

On(事件，[选择器]，FN)

events:一个或多个用空格分隔的事件类型，如"click"或"keydown”。
selector:元素的子元素选择器。
fn:回调函数即绑定在元素身上的侦听函数。

on()优势1：

可以绑定多个事件，多个处理事件处理程序

$("div").on({
    mouseover: function(){},
    mouseout: function(){},
    click: function(){}
});

如果事件处理程序相同

$("div").on('mouseover mouseout',function({
    $(this).toggleClass('current');
}))

on()优势2：

可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$('ul').on('click','li',function(){
    alert('hello world');
})

on()优势3：

动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

# 事件处理on()解绑事件

off()方法可以移除通过on()方法添加的事件处理程序

$('p').off()//解绑p元素所有事件处理程序
$('p').off('click') //解绑p元素上面的点击事件
$('ul').off('click','li')//解绑事件委托

如果有的事件只想触发一次，可以使用one()来绑定事件

<style>
    div{
        width: 500px;
        height: 500px;
       background-color: red;
    }
</style>
<body>
<div></div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    $('div').on({
        click: function(){
            console.log(1);
        },
        mouseover: function(){
            console.log(2);
        }
    }
      
    )  // 事件解绑off
        // $('div').off();
        $('div').off('click'); //解除div上的点击事件

        $('ul').on('click','li',function(){
            alert(234);
        })
        $('ul').off('click','li');  //解除绑定

        // one()只触发一次
        $('div').one('click',function(){
            alert('one')
        })
</script>    
</body>

# 自动触发事件trigger()

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

element.click()//第一种简写形式
element.trigger('type')//第二种自动触发模式
$('p').on('click',function(){alert('hi')})
$('p').trigger('click');//此时自动触发点击事件，不需要鼠标点击
element.triggerHandler(type)//第三种自动触发模式

<style>
    div{
        width: 500px;
        height: 500px;
       background-color: red;
    }
</style>
<body>
<div></div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<input type="text">
<script>
    $('div').on({
        click: function(){
            console.log(1);
        },
        mouseover: function(){
            console.log(2);
        }
    }
      
    )  // 事件解绑off
        // $('div').off();
        $('div').off('click'); //解除div上的点击事件

        $('ul').on('click','li',function(){
            alert(234);
        })
        $('ul').off('click','li');  //解除绑定

        // one()只触发一次
        // $('div').one('click',function(){
        //     alert('one')
        // })
        // 自动触发
        // $('div').click() //会触发元素默认行为
        // $('div').trigger('click')//会触发元素默认行为
        // $('div').triggerHandler('click') //不会会触发元素默认行为
        $('input').on('focus',function(){
            $('input').val("eur")
        })
        // $('input').triggerHandler('focus')
        $('input').trigger('focus')

</script>    
</body>

# jquery事件对象

事件被触发，就会有事件对象的产生。

element.on(events,[selector],function(event){})

阻止默认行为:event.preventDefault()或者return false

阻止冒泡:event.stopPropagation()

← jquery常用API jquery其他方法 →